关键看一下里面的注释

代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6. </head>
  7. <body>
  8.  
  9.     <script src="three.js"></script>
  10.     <script type="text/javascript">
  11.  
  12.         //基础知识恶补
  13.  
  14.         //场景（THREE.Scene）：
  15.         //  是所有不同对象的容器，也就是说该对象保存所有物体、光源、摄像机以及渲染所需的其他对象
  16.  
  17.         //材质：   原文：https://www.cnblogs.com/amy2011/p/6148736.html
  18.         //  材质就像物体的皮肤，决定了几何体的外表，例如是否像草地/金属，是否透明，是否显示线框等
  19.         //  Three.js提供了一个材质基类THREE.Material，该基类拥有three.js所有材质的公有属性
  20.         //  材质的公共属性分类：
  21.         //      基础属性：ID，name，透明度，是否可见，是否需要刷新等
  22.         //      融合属性：决定了物体如何与背景融合
  23.         //      高级属性：可以控制WEBGL上下文渲染物体的方法，大多数情况下，是不会用这些属性，我们这里不再讨论
  24.  
  25.         var camera, scene, renderer;
  26.         var geometry, material, mesh;
  27.  
  28.         init();
  29.         animate();
  30.  
  31.         function init() {
  32.  
  33.             //创建相机
  34.             camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  35.             camera.position.z = 1;
  36.  
  37.             //创建场景
  38.             scene = new THREE.Scene();
  39.  
  40.             //创建几何体 - 立方体
  41.             geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);//参数：长宽高
  42.  
  43.             //创建材质
  44.             material = new THREE.MeshNormalMaterial();
  45.  
  46.             //material.visible = false;//是否可见
  47.             material.transparent = true;//是否透明
  48.             material.opacity = 0.9;//透明度
  49.  
  50.             //创建网格，几何体是不能被渲染的，只有几何体和材质 结合成网格 才能被渲染到屏幕上
  51.             mesh = new THREE.Mesh(geometry, material);
  52.  
  53.             //添加到场景
  54.             scene.add(mesh);
  55.  
  56.             renderer = new THREE.WebGLRenderer({ antialias: true });
  57.             renderer.setSize(window.innerWidth, window.innerHeight);
  58.             document.body.appendChild(renderer.domElement);
  59.         }
  60.  
  61.         function animate() {
  62.  
  63.             requestAnimationFrame(animate);
  64.  
  65.             mesh.rotation.x += 0.01;
  66.             mesh.rotation.y += 0.02;
  67.  
  68.             renderer.render(scene, camera);
  69.         }
  70.     </script>
  71. </body>
  72. </html>

效果：

three.js 测试1的更多相关文章

  1. js 测试

    今天js测试题目: 被基础题目虐暴......惨不忍睹 1. var num = 2; switch(num){ case 1: console.log("1"); case 2: ...

  2. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  3. js测试地址

    很多时候,想写js测试代码,比如在学习的时候.看书敲代码,每次打开VS还是很麻烦的.特别是需要加载一些库的时候. 此时有个工具可以解决: https://jsfiddle.net/ 也是在别人的博客里 ...

  4. w3c JS测试

    到W3c的js测试里面溜达了一圈: 做错了几道题: 外部脚本必须包含<script>标签吗? 否!! 这里的外部脚本是指xx.js这个文件,在文件中写js代码是不需要包含script标签的 ...

  5. JS 测试 Prototype

    JS 测试 Prototype 测试 JavaScript 框架库 - Prototype 引用 Prototype 如需测试 JavaScript 库,您需要在网页中引用它. 为了引用某个库,请使用 ...

  6. JS 测试网络速度与网络延迟

    一.延迟与网速 通过js加载一张1x1的极小图片,测试出图片加载的所用的时长.如果换一个几百KB的图片,则可心用来计算下载网速 document.write('<input type=" ...

  7. react.js 测试

    <html>    <head>        <title>hellow</title>        <script src="ht ...

  8. jest js 测试框架-简单方便人性化

    1. 安装 yarn global add jest-cli or npm install -g jest-cli 备注:可以安装为依赖不用全局安装 2. 项目代码 a. 项目初始化 yarn ini ...

  9. js测试密码的强度

    测试密码的强度.js //网站也会根据输入密码的字符特点给出相应的提示,如密码过短.强度差.强度中等.强度强等. //这又是怎么实现的呢?看下面代码: <input type="pas ...

  10. ava js 测试框架基本试用

    随着js 越来越强大,日常使用中关于js 的问题也就越突出了,我们需要关注的点也就不能只像以前那样 只编写简单的功能实现,我们同时也需要关注js 的健壮性,测试就是其中一个比较重要的环节,以下 是av ...

随机推荐

  1. 解决vue刷新页面以后丢失store的数据

    刷新页面时vue实例重新加载,store就会被重置,可以把定义刷新前把store存入本地localStorage.sessionStorage.cookie中,localStorage是永久储存,重新 ...

  2. 微信小程序起步

    微信小程序 文档 微信小程序开发文档 本质 so微信小程序到底是什么?是原生的app还是H5应用? 简单来说,小程序是一种应用,运行的环境是微信(App)进程中,使用了部分的H5技术 目录介绍 app ...

  3. Hash函数浅谈

    Hash函数是指把一个大范围映射到一个小范围.把大范围映射到一个小范围的目的往往是为了节省空间,使得数据容易保存. 除此以外,Hash函数往往应用于查找上.所以,在考虑使用Hash函数之前,需要明白它 ...

  4. day11——函数名的使用、f格式化、迭代器、递归

    day11 函数名的第一类对象及使用 1.可以当作值被赋值给变量 def func(): print(1) print(func) a = func a() 2.当作元素存放在容器中 def func ...

  5. Oracle高危安全漏洞：具有查询权限用户可绕开安全限制进行数据修改

    数据库版本 11.2.0.* 检查数据库是否存在此bug的脚本: Oracle用户执行此脚本 #!/bin/bash # Usage: 检查ORACLE数据库是否存在高危安全漏洞(具有查询权限用户可绕 ...

  6. Kafka学习笔记1——Kafka的安装和启动

    一.准备工作 1. 安装JDK 可以用命令 java -version 查看版本

  7. Regex 首字母转大写/小写，全大写，全小写

    语法 \l 第一个字符小写,比[\L]或[\U]优先级别低,连续使用,第一个[\l]或[\u]优先 \L 后面所有字符小写,比[\l]或[\u]优先级别高 \u 第一个字符大写,比[\L]或[\U]优 ...

  8. oracle中查询一月的时间补0的问题

    sql语句 select NVL(B.weight, 0),A.time from (SELECT TO_CHAR(TO_DATE(开始时间, 'yyyy-MM-dd') + ROWNUM - 1, ...

  9. OL7.6上RPM方式安装Oracle 19c

    设置主机名 [root@localhost ~]# cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost4 localh ...

  10. thinkphp整合系列之极验滑动验证码geetest

    给一个央企做官网,登录模块用的thinkphp验证码类.但是2019-6-10到12号,国家要求央企检验官网漏洞,防止黑客攻击,正直贸易战激烈升级时期,所以各事业单位很重视官网安全性,于是乎集团总部就 ...