关键看一下里面的注释
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script src="three.js"></script> <script type="text/javascript"> //基础知识恶补 //场景（THREE.Scene）： // 是所有不同对象的容器，也就是说该对象保存所有物体、光源、摄像机以及渲染所需的其他对象 //材质： 原文：https://www.cnblogs.com/amy2011/p/6148736.html // 材质就像物体的皮肤，决定了几何体的外表，例如是否像草地/金属，是否透明，是否显示线框等 // Three.js提供了一个材质基类THREE.Material，该基类拥有three.js所有材质的公有属性 // 材质的公共属性分类： // 基础属性：ID，name，透明度，是否可见，是否需要刷新等 // 融合属性：决定了物体如何与背景融合 // 高级属性：可以控制WEBGL上下文渲染物体的方法，大多数情况下，是不会用这些属性，我们这里不再讨论 var camera, scene, renderer; var geometry, material, mesh; init(); animate(); function init() { //创建相机 camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10); camera.position.z = 1; //创建场景 scene = new THREE.Scene(); //创建几何体 - 立方体 geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);//参数：长宽高 //创建材质 material = new THREE.MeshNormalMaterial(); //material.visible = false;//是否可见 material.transparent = true;//是否透明 material.opacity = 0.9;//透明度 //创建网格，几何体是不能被渲染的，只有几何体和材质 结合成网格 才能被渲染到屏幕上 mesh = new THREE.Mesh(geometry, material); //添加到场景 scene.add(mesh); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } function animate() { requestAnimationFrame(animate); mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render(scene, camera); } </script> </body> </html>
效果：
