Three.js研究小结

一个典型的Three.js程序至少包括渲染器(Renderer),场景(Scene).照相机(Camera)以及在场景中创建的物体.

渲染器(Renderer):
渲染器和Canvas元素进行绑定
var renderer=new THREE.WebGLRenderer();
renderer.setSize(400,300);//设置Canvas画布的大小
renderer.setClearColor(0X000000);//将背景色(用于清除画面的颜色)设置为黑色
document.getElementsByTagName("body")[0].appendChild(renderer.domElement);//将渲染器对应的canvas添加到body中
场景(Scene)
在Three.js中添加的物体都是添加到场景中,因此,场景相当于一个大容器.一般说,场里没有很复杂的操作.在程序最开始的时候进行实例化,然后将物体添加到场景中即可.
var scene=new THREE.Scene();
照相机(Camera)/值得注意的是,照相机也需要添加到场景中
坐标系(WebGL和Three.js使用的右手坐标系):上Y右X,前Z
定义一直透视投影的照相机
原理:
var camera=new THREE.PerspectiveCamera(45,4/3,1,1000);
camera.position.set(0,0,5);
scene.add(camera);

正交投影照相机:
构造函数:
THREE.OrthographicCamera(left , right , top , bottom , near , far) //为了保证照相机的横竖比例,需要保证(left- right)与(top- bottom)的比例与Canvas的高度,宽度的比例一致 , near与far都是指到照相机位置在深度平面的位置,而照相机不应该拍摄到其后方的物体,因此这两个值应该是正值(为了保证场景中的物体不被忽略掉,一般near的值设置的要小一些,far的值设置的要较大).
透视投影照相机:
构造函数:
THREE.PerspectiveCamera(for ; aspect , near , far);//其中for是张角,aspect是canvas横竖大小比例

立方体构造函数:
THREE.CubeGeometry(width , height , depth , widthSegments , heightSegments , depthSegments);

平面构造函数:
THREE.PlaneGeometry(width , height , widthSegments , heightSegments);

球体的构造函数: 经度跨过的弧度 纬度跨过的弧度
THREE.SphereGeometry(radius , segmentsWidth , segmentsHeight , phiStart , phiLength , thetaStart , thetaLength );
半径 经度上切片数 纬度上切片数 经度开始的弧度 纬度开始的弧度
经度弧度: new THREE.SphereGeometry(3 , 8 , 6 , Math.PI / 6 , Math.PI / 3) ;表示起始经度Math.PI / 6 , 经度跨度Math.PI / 3

圆形构造函数:
THREE.CircleGeometry(radius , segments , thetaStart , thetaLength);

圆柱体构造函数:
THREE.CylinderGeometry(radiusTop , radiusBottom , height , radiusSegments , heightSegments , openEnded);
布尔值,表示是否没有底面和顶面
缺省值为False,表示有顶面和底面

正四面体构造函数:
THREE.TetrahedronGeometry( radius , detail );

正八面体构造函数:
THREE.OctahedronGeometry( radius , detail );

正二十面体构造函数:
THREE.IcosahedronGeometry(
radius , detail );

圆环面构造函数:
THREE.TorusGeometry(
radius , tube , radialSegments , TubularSegments , arc ); arc是圆环面的弧度,缺省值是Math.PI*2

圆环节构造函数:
THREE.TorusKnotGeometry(
radius , tube , radiusSegments , TubularSegments , p , q , heightScale);

材质(Material):
1.基本材质(BasicMaterial) 构造函数: THREE.MeshLambertMaterial(opt);
2.Lambert材质:(MeshLambertMaterial):只考虑漫反射,不考虑镜面反射,因此对于金属,镜子等需要镜面反射的就不适应.
光照模型公式:
Idiffuse = kd * Id * cos ( theta )
漫反射光强=物体表面的漫反射属性 * 光强 * cos(光的入射角弧度)
Lambert材质(LambertMaterial) 构造函数: THREE.MeshLambertMaterial(opt);

3.Phong材质(PhongMaterial) :考虑了镜面反射的效果,因此对于金属和镜面尤为合适.
镜面反射光照公式(漫反射部分和Lambert是相同的):
Ispecular = Ks * Is * cos ( alpha ) ^ n
镜面反射光强 = 材质表面镜面反射系数 * 光源强度 * cos ( 反射光与视线的夹角 ) ^ 高光指数 (指数越大,高光光斑越小)
4. 法向材质(NormalMaterial) 构造函数: new THREE.MeshNormalMaterial();
材质的颜色与照相机与该物体的角度有关.

实现动画原理:
setInterval方法(设置重绘函数):setInterval(func , mesc) fun为每过mesc毫秒执行的函数,setInterval函数返回一个id;
clearInterval方法(停止重绘方法):如果需要停止重绘函数,使用此函数,并传入id即可.

如何选取方法实现动画:
setInterval可以手动设置FPS,而requestAnimationFrame则是自动设置的;前者也不能保证按照原先设定好的值执行,在路蓝旗处理繁忙时,很可能低于预设值.总之,requestAnimationFrame适用于对时间较为敏感的环境(但是动画逻辑更为复杂),setInterval可在保证程序的运算不至于导致延迟的情况下提供更加简洁的逻辑.