THREE webGL:3D 用于大数据，室内设计，衣服等立体的

调用的render，每次调用render就是一次渲染，如果用interval("fn",ms)就可以实现动画。

建议不卡顿，那么每秒30~60次, 间隔33~17ms之间

 

一  初识

倒叙：

最终的是调用：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//1. body元素中插入canvas对象 document.body.appendChild(renderer.domElement);   //2. new出来的对象 setSize  setClearColor new THREE.WebGLRenderer().render(scene,camera);   //2.1 scene  camera 场景里有物体 和 网格画布 场景里还有光源 和 环境光    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh  scene.add(mesh); //网格模型添加到场景中   相机的拍摄位置，大小  var point = new THREE.PointLight(0xeeeeee);  var ambient = new THREE.AmbientLight(0x444444);

 

二 动画　　

动画： 多次调用render ，移动模型对象

实际开发中，为了更好的利用浏览器渲染，可以使用函数requestAnimationFrame()代替setInterval()函数

?

1	var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh <br>fn(){<br>renderer.render(scene,camera);<br>mesh.rotateY(0.01);<br>requestAnimationFrame(fn)}

　三 鼠标操作

可以在下载的three.js-master文件中找到(three.js-master\examples\js\controls[OrbitControls.js]

执行构造函数THREE.OrbitControls()浏览器会同时干两件事，一是给浏览器定义了一个鼠标、键盘事件，自动检测鼠标键盘的变化，如果变化了就会自动更新相机的数据

?

1 2	var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象 controls.addEventListener('change', render);//监听鼠标、键盘事件

　　

 

 

摘自：http://www.webgl3d.cn/Three.js/