OpenGL（WebGL）的三维空间中，存在点光源和聚光灯两种类型。 而且，作为点光源的一种特例还存在平行光源(无线远光源)。另外，作为光源的参数还可以进行 [环境光] 等设置。 作为对应， Three.js中可以设置 [点光源(Point Light)] [聚光灯(Spot Light)] [平行光源(Direction Light)]，和 [环境光(Ambient Light)]。 和OpenGL一样、在一个场景中可以设置多个光源。 基本上，都是环境光和其他几种光源进行组合。 如果不设置环境光，那么光线照射不到的面会变得过于黑暗。 本文中首先按照下面的步骤设置平行光源，在这之后还会追加环境光。
(0) 声明全局变量(对象)
(1) 设置平行光源
(2) 设置光源向量
(3) 追加光源到场景
这里我们用「DirectionalLight」类声明一个叫 [light] 的对象来代表平行光源
//设置光源 var light; function initLight() { light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源 light.position.set( 200, 200, 200 );//设置光源向量 scene.add(light);// 追加光源到场景 }
5.设置物体object
这里，我们声明一个球模型
//设置物体 var sphere; function initObject(){ sphere = new THREE.Mesh( new THREE.SphereGeometry(20,20), //width,height,depth new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定 ); scene.add(sphere); sphere.position.set(0,0,0); }
最后，我们写一个主函数执行以上五步：
//执行 function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); renderer.clear(); renderer.render(scene, camera); }
这时，测试以上程序，你会发现浏览器窗口中出现了你绘制的球形模型：
总结
以上就是three.js的入门内容，我们核心的五步就是：
1.设置three.js渲染器
2.设置摄像机camera
3.设置场景scene
4.设置光源light
5.设置物体object
可能其中有些设置你还不太清楚，没关系，后面几篇文章会对以上五个主要步骤进行详细的讲解，敬请期待~~
本例完整代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>lesson1-by-shawn.xie</title> <!--引入Three.js--> <script src="https://www.jb51.net/Three.js"></script> <script type="text/javascript"> //开启Three.js渲染器 var renderer;//声明全局变量（对象） function initThree() { width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽 height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高 renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效） renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致） document.getElementById('canvas3d').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。 renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor) } //设置相机 var camera; function initCamera() { camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far） camera.position.x = 0;//设置相机的位置坐标 camera.position.y = 50;//设置相机的位置坐标 camera.position.z = 100;//设置相机的位置坐标 camera.up.x = 0;//设置相机的上为「x」轴方向 camera.up.y = 1;//设置相机的上为「y」轴方向 camera.up.z = 0;//设置相机的上为「z」轴方向 camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标 } //设置场景 var scene; function initScene() { scene = new THREE.Scene(); } //设置光源 var light; function initLight() { light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源 light.position.set( 200, 200, 200 );//设置光源向量 scene.add(light);// 追加光源到场景 } //设置物体 var sphere; function initObject(){ sphere = new THREE.Mesh( new THREE.SphereGeometry(20,20), //width,height,depth new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定 ); scene.add(sphere); sphere.position.set(0,0,0); } //执行 function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); renderer.clear(); renderer.render(scene, camera); } </script> <style type="text/css"> div#canvas3d{ border: none; cursor: move; width: 1400px; height: 600px; background-color: #EEEEEE; } </style> </head> <body> <!--盛放canvas的容器--> <div></div> </body> </html>
总结