three.js新手入门教程( 六 ) three.js就是使用javascript来写3

setInterval方法
如果要设置特定的FPS ，可以使用该方法：
setInterval(func,msec)
其中， func是每过msec毫秒执行的函数，如果将func定义为重绘画面的函数，就能实现动画效果。
varid=setInterval(draw,20);functiondraw(){
mesh.rotation.y=(mesh.rotation.y+0.01)%(Math.PI*2);
renderer.render(scene,camera);
}
这样，每20毫秒就会调用一次draw函数，改变长方体的旋转值，然后进行重绘。最终得到的效果就是FPS为50的旋转长方体。
requestAnimationFrame方法
不在意多久重绘一次，就适合用requestAnimationFrame方法。它告诉浏览器在合适的时候调用指定函数，通常可能达到60FPS 。 requestAnimationFrame同样有对应的cancelAnimationFrame取消动画，使用方法类似clearInterval 。
由于requestAnimationFrame只请求一帧画面，与settimeout很相似。因此，除了在init函数中需要调用，在被其调用的函数中需要再次调用requestAnimationFrame：
functiondraw(){
mesh.rotation.y=(mesh.rotation.y+0.01)%(Math.PI*2);
renderer.render(scene,camera);
varid=requestAnimationFrame(draw);
}
可以使用renderer.setAnimationLoop(callback)来代替requestAnimationFrame() 。 .callback为每个可用帧都会调用的函数。如果传入‘null’,所有正在进行的动画都会停止。对于WebVR项目，必须使用此函数。
相机控件
threeJS包括多个相机控件，每个控制都必须加载对应的控制器插件后才能使用。
控制器要生效必须在renderer中使用代码更新
varclock=newTHREE.Clock();functionrender(){
vardelte=clock.getDelta();
trackballControls.update(delta);
requestAnimationFrame(render);
webGLRenderder.render(scene,camera);
}
其中， THREE.Clock()对象可以获取一次渲染耗费的时间，调用clock.getDelta()会返回此次调用和上次调用之间的时间。
OrbitControls
可以使得相机围绕目标进行轨道运动。以舞台中心为中点，左右拖动屏幕会让镜头围绕着中心点旋转，镜头会看着中心点。
OrbitControls(object:Camera,domElement:HTMLDOMElement)
object:（必须）将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身。
domElement:（可选）用于事件监听的HTML元素，其默认值为整个文档，但是如果你只希望在特定的元素上（例如Canvas上）进行控制，在这里进行指定即可。
TrackballControls
以模型或者点为中心,围绕中心来展示。拖动模型后,模型位置会变化,但是摄像机LookAt的位置不会变化,导致再次旋转模型将不再以模型为中心点。
注意：使用相机控件，会导致相机lookAt()失效，需要设置OrbitControls.target为目标向量，比如
controls.target=newTHREE.Vector3(0,-1000,0);
这样就可以看到视角更新为想要的视角啦。
渲染
WebGLRender
使用WebGLRender对象能调动计算机显卡，计算指定相机角度下的scene样子进行渲染。
varrenderer=newTHREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth,window.innerHeight);.
renderer.setPixelRatio(window.devicePixelRatio);
调用setClearColor(0xEEEEEE)将渲染器的背景色设置为白色，调用setSize()来控制渲染器渲染scene的范围。
//将渲染的结果输出到指定页面元素中
document.getElementById("WebGL-output").(renderer.domElement);
//渲染场景renderer.render(scene,camera);
渲染机制
threejs的渲染器是基于webGL的。它的渲染机制是根据物体离照相机的距离来控制和进行渲染的。也就是说，它根据物体的空间位置进行排序，然后根据这个顺序来渲染物体。对于透明的物体，是按照从最远到最近的顺序进行渲染。