手把手教你创建threejs场景

1、手把手教你创建threejs场景手把手教你创建threejs场景本篇教程通过一个示例简单的介绍了threejs主要概念，以及在threejs中场景的呈现逻辑。最后有示例的代码，可以自己运行尝试，更多精彩尽在【】分享更多threeJS、webGL有趣的事情开始之前在使用three.js之前，你需要有一个地方来呈现它。可以将下面代码保存，并且用浏览器打开vmetacharset=utf-8Myfirstthree.jsappbodymargin:0;canvaswidth:100%;height:100%/Ouravascriptwillgohere.下面所有的代码都会在script标签里面创建场

2、景要想使用three.js来展示任何物体，我们需要三样东西：scene,cameraandrenderer,即场景、相机和渲染器。我们用相机来渲染场景。varscene=newTHREE.Scene();varcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);varrenderer=newTHREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);document.body.appen

3、dChild(renderer.domElement这段代码里，我们创建了场景，创建了相机和渲染器。在three.js里有不同的相机，这里我们先用透视相机，即PerspectiveCamera,创建PerspectiveCamera的第一个参数是视野，fieldofview,FOV定义了在任何一刻我们能够看到的场景的范围，单位是度数。第二个参数是纵横比，aspectratio,基本上正常都会设置成宽度比高度，反之的话就会看到图像是被压扁的效果。接下来的两个属性是近剪裁平面和远剪裁平面，nearandfar,这意味着比far更远或者比near更近的物体是不会被渲染出来的。相机只渲染介于两者之间的

4、物体。现在你可以先不必考虑这一点,但是在你做自己的程序时,你可能会设置成合适的值来提升性能。下一个值就是渲染器renderer,这里就是魔术开始的地方。除了我们这里使用的WebGLRenderer以外，three.js还有其他的一些渲染器，用于一些就浏览器的备用或者由于某些原因不支持webgl的情况。除了创建渲染器实例之外，我们还需要设置我们希望它渲染我们的应用程序的大小。通常来讲，这个大小是浏览器窗口的宽度和高度。对于性能密集型应用程序，您还可以为setSize提供较小的值，例如window.innerWidth/2和window.innerHeight/2,这将使应用程序呈现为一半大小。如

5、果你希望保持应用程序的大小但是以较低的分辨率渲染它，可以通过调用setSize并将其作为updateStyle(第三个参数)来调用。例如*setSize(window.innerWidth/2,window.innerHeight/2,false)*将会以canvaslOO%的宽度和高度渲染，但是分辨率会减少到一半。最后，我们把renderer元素添加进我们的HTML文档流里，这是渲染器用canvas元素来向我们展示场景。到此，我们的三要素都已经完成，但是要想看到物体，我们需要创建物体。vargeometry=newTHREE.BoxGeometry(1,1,1);varmaterial=ne

6、wTHREE.MeshBasicMaterial(color:OxOOffOO);varcube=newTHREE.Mesh(geometry,material);scene.add(cube);cameraBbsition.z=5;要想创建一个正方体，我们需要BoxGeometry这个几何，它包含了正方体所有的点和面，除了几何以外，我们还需要有材质来为它赋色。three.js里有很多材质，但是目前我们暂时只关注于MeshBasicMaterial,这里为了简单，我们只给这个材质设置了一个颜色OxOOffOO,这里的颜色和CSS里或者PS里颜色一致。有了几何和材质，下一个我们需要的是mesh,

7、mesh是一个对象，它有几何和材质组成，可以添加进场景并且在场景里自由移动。我们默认使用*scene.add()*来将物体添加进场景里，默认位置是(O,O,O),这样的话我们的相机位置就和这个正方体位置重合了，因此我们将相机的位置往外移动一点。渲染场景如果你将上面的代码复制进HTML,你也看不到任何东西。这是因为我们还没有用渲染器渲染。因此我们需要用render去渲染，并且放到动画循环里。functionanimate。requestAnimationFrame(animate);renderer.render(scene,camera);animateH这里我们创建了一个循环，这样这个渲染器

8、就会在每次屏幕刷新的时候渲染一次场景，这里你可能会问为什么不用setlnterval方法，这是因为requestAnimationFrame有很多好处，其中最大的好处就是当你点击浏览器另外的tab页时，它就会暂停，因此就不会浪费电脑的性能和电池。旋转正方体如果你将上面的代码都复制到HTML页面，你应该可以看到一个绿色的正方体，下面我们再增加一点乐趣，让它自转。将下面的代码加入上面的动画循环里，在render之前。cube.rotation.x+=0.01;cube.rotation.y+=0.01;这行代码会在每一帧运行(通常是1秒6O帧)，并且给正方体一个旋转动画。基本上你所有想移动或者改变

9、的事情都可以放在这个动画循环里，你可以在这里调用其它函数，这样你就不需要写数百行的动画函数了。最终结果恭喜你完成了第一个three.js的应用程序。完整的代码贴在下方，你可以自己尝试一下，做做实验，弄清楚上面提到的几个概念。htm卜Myfirstthree.jsappbodymargin:0;canvaswidth:100%;height:100%varscene=newTHREE.Scene();varcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);varrenderer=newTHREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);vargeometry=newTHREE.BoxGeometry(1,1,1);varmaterial=newTHREE.MeshBasicMaterial(color:0 x00ff00);varcube=newTHREE.Mesh(geometry,material);scene.add(cube)