十分钟练习Three.JS，感受其无穷魅力！

前言本文不会详细讲解Three.js的几何体、材质、相机、模型、光源等概念，而是先分成几个模块给大家快速演示一个盒子小案例。基于这些模块，你可以快速了解Three.js的无限魅力。为了学习，我们将使用Three.js简单的做一个立方体，让大家更宏观的理解Three.js。我将把它分解成代码段（模块）进行开发。模块如下：Scene对象Mesh模型光源CameraRenderer对象渲染操作1.创建html文件首先，我们要创建一个html文件，这样才有开发空间。创建完成后，我们就可以导入Three.js文件了，这就是今天的主角。我直接导入远程url地址进行加载，你也可以去官网下载本地导入。2.CreatesceneobjectswithThree.js引擎创建一个虚拟的三维场景。3.创建网格模型这行代码newTHREE.BoxGeometry(200,200,200)的意思是创建一个长200，宽200，高200的立方体对象。然后通过代码newTHREE.MeshLambertMaterial为立方体对象定义材质。在这里可以了解立方体的属性（包括颜色、透明度等属性）。这里我们暂时列出颜色属性。然后我们需要将立方体与属性相关联，所以我们使用网格模型，将两者作为构造函数Mesh的两个参数传递，最后将它们添加到场景中。4.设置光源代码new三.PointLight('#fff')创建一个点光源对象。参数#fff定义光强度。你可以试试把参数改成#666，你会看到立方体的表面颜色变深了，这个很好理解。现实生活中，光线强度变低，周围的景物自然昏暗。夜空中的耀斑是点光源的一个例子。代码THREE.AmbientLight('#333')创建一个环境光对象。环境光的颜色会影响整个场景。环境光没有特定的光源。是模拟漫反射的光源，所以不需要指定位置。它可以将光线均匀地照射到场景中的各个物体上，一般用来弱化阴影或者给环境增添一些色彩，所以环境光不能作为场景中的唯一光源。5.设置相机代码newTHREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000)创建一个正射投影相机对象，什么是“正射投影”，什么是“相机对象”，这样作为构造函数参数中使用的参数s，即代码vars=20一个定义为0的系数，你可以改成200到300，你会发现立方体的显示效果变小了，这个很好理解，cameraconstructor的前四个参数定义了photowindow的大小，就像正常拍照，取景范围大，被拍者相对于背景自然会变小。camera.position.set(200,300,200);而camera.lookAt(scene.position)定义了相机的位置和拍照的方向，相机可以改变.position.set(200,300,200)参数重新定义相机位置。把第一个参数，也就是x坐标从200改成250，你会发现屏幕上立方体的角度变了，就像生活中拍照一样。人是同一个人，只是你照片的位置和角度不一样，显示出来的效果肯定不一样。你不需要关心这些具体的参数细节，至少你知道相机可以缩放显示3D场景，显示3D场景不同角度的视图。6.Create渲染器对象Three.js是基于原生WebGL封装的3D引擎，因此浏览器使用代码newTHREE.WebGLRenderer()来渲染一帧图像。您可以设置渲染区域大小和背景颜色。7.执行渲染操作指定场景和相机作为渲染区域的参数，并将该区域添加到页面中完成代码代码body{margin:0;overflow:hidden;}是隐藏body窗口区域滚动条结语下图很形象的说明了两者之间的关系场景摄像机渲染器