资源描述：
《three.js的自学基础》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、推荐网站：WebGL中文网http://www.hewebgl.com/里面有教程，初级教程免费，其余要收费three.js官方网站：www.threejs.org/three.js-master包里面有很多很有趣的例子，在three.js-masterexamples下，你可以一个一个点开看有没有需要的WebGL中文网和Three.js入门指南一起看就可以了，入门指南有一些例子不能出来，但是讲得也不错，代码里面的结构根据webGL中文网例子来编写的一、基本需要初始化：1.渲染器（renderer）——渲染物体的，在web浏览器中必须
2、有一个平台显示3d效果2.照相机（camera）——视角，展现在我们面前的3.场景（scene）4.灯光（light）5.物体（object）渲染部分：1.renderer.render(scene,camera);2.requestAnimationFrame(animate);81.初始化渲染器：three.js的渲染器主要有WebGLRenderer和CanvasRenderer，渲染的效果不同有细微差异，我们使用的是WebGLRenderer，当你使用渲染器时，一般在html页面上加入
标签——>这里的div标签是
3、vid="canvasframe">
代码：renderer=newTHREE.WebGLRenderer({antialias:true});//开启WebGL抗锯齿width=document.getElementById('canvasframe').clientWidth;height=document.getElementById('canvasframe').clientHeight;renderer.setSize(width,height);document.getElementById('canvasfram
4、e').appendChild(renderer.domElement);你也可以不需要div标签创建渲染器代码：varrenderer=newTHREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);2.照相机——这块在WebGL中文网讲解得比较详细three.js提供两类照相机，一类是OrthographicCamera（正交相机），一类是Per
5、spectiveCamera（透视相机）正交就是高中老师画正方形那种，没有近大远小，透视相机有。我们使用的是透视相机代码：camera=newTHREE.PerspectiveCamera(60,width/height,1,10000);camera.position.set(lengthX,lengthY,100);camera.up=newTHREE.Vector3(0,0,1);THREE.PerspectiveCamera(fov,aspect,near,far)fov：视角度数，可以理解为眼睛睁开大小，度数越大，你看到的物体
6、越多，物体越小aspect：是照相机水平方向和竖直方向长度的比值，一般等于width/heightnear和far：是相机最近和最远的距离，均为正值，far>>nearcamera.position.set(x,y,z);照相机的位置camera.up=newTHREE.Vector3(0,0,1);cmmera.up哪个轴是向上的，three.js默认是右手坐标轴，即y轴向上，这里我们让z轴向上camera.position=newTHREE.Vector3(0,0,1)和camera.up.set(0,0,1)一样的效果。3.场景一
7、般只需要scene=newTHREE.Scen();新建场景就可以了源代码中加入了scene.fog=newTHREE.FogExp2(0xcccccc,0.002);使场景产生雾效果FogExp2(hex,density)hex,雾的颜色如果设置为黑色，远处的物体将呈现黑色density：定义雾增长速度如何密集。默认为0.00025。84.灯光有几种灯光，常用的有AmbintLight（环境光），directionalLight（平行光），PointLigth（点光源），spotLight（聚光灯），其他的你可以在官方文档里查找使用，
8、初始化都比较简单，以程序里的平行光为例light=newTHREE.DirectionalLight(0xffffff);light.position.set(1,1,1);scene.add(light)
