three﹒js自学基础.docVIP

推荐网站：WebGL中文网/ 里面有教程，初级教程免费 ，其余要收费 three.js官方网站：/ three.js-master包里面有很多很有趣的例子在three.js-master\examples下你可以一个一个点开看有没有需要的renderer.render(scene, camera); 2.requestAnimationFrame(animate); 1.初始化渲染器： three.js的渲染器主要有WebGLRenderer和CanvasRendererdiv id=canvasframe/div 代码： renderer = new THREE.WebGLRenderer({antialias: true});//开启WebGL抗锯齿 width = document.getElementById(canvasframe).clientWidth; height = document.getElementById(canvasframe).clientHeight; renderer.setSize(width, height); document.getElementById(canvasframe).appendChild(renderer.domElement); 你也可以不需要div标签创建渲染器 代码： var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); 2.照相机——这块在WebGL中文网讲解得比较详细 three.js提供两类照相机，一类是OrthographicCamera（正交相机），一类是PerspectiveCamera（透视相机） 正交就是高中老师画正方形那种，没有近大远小，透视相机有。我们使用的是透视相机 代码： camera = new THREE.PerspectiveCamera(60, width / height, 1, 10000); camera.position.set(lengthX,lengthY, 100); camera.up = new THREE.Vector3(0,0,1); THREE.PerspectiveCamera(fov, aspect, near, far) fov：视角度数，可以理解为眼睛睁开大小，度数越大，你看到的物体越多，物体越小 aspect：是照相机水平方向和竖直方向长度的比值，一般等于width/height near和far：是相机最近和最远的距离，均为正值，farnear camera.position.set(x,y,z);照相机的位置 camera.up = new THREE.Vector3(0,0,1); cmmera.up哪个轴是向上的，three.js默认是右手坐标轴，即y轴向上，这里我们让z轴向上 camera.position = new THREE.Vector3(0,0,1)和camera.up.set(0,0,1)一样的效果。 3.场景 一般只需要scene = new THREE.Scen();新建场景就可以了 源代码中加入了scene.fog = new THREE.FogExp2(0xcccccc,0.002);使场景产生雾效果 FogExp2(hex,density) hex,雾的颜色如果设置为黑色，远处的物体将呈现黑色 density：定义雾增长速度如何密集。默认为0.00025。 4.灯光 有几种灯光，常用的有AmbintLight（环境光），directionalLight（平行光），PointLigth（点光源），spotLight（聚光灯），其他的你可以在官方文档里查找使用，初始化都比较简单，以程序里的平行光为例 light = new THREE.DirectionalLight( 0xffffff ); light.position.set( 1, 1, 1 ); scene.add( light ); 设置平行光颜色为白色，在坐标（1,1,1）的位置，平行光类似太阳关照，添加到场景中 5.物体 就是放在场景中的物体， 普通的物体有两种属性，一个是它的材质material，一个是它的模型geometry（就是它长什么样子）。 代码： var material = new THREE.MeshLambertMaterial({color:color }); var geometry = new THREE