标签：scene render webGL THREE js var new 3D

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

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

一  初识

倒叙：

最终的是调用：

//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()函数

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

}

　三 鼠标操作

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

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

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

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

标签：scene,render,webGL,THREE,js,var,new,3D
来源： https://www.cnblogs.com/lxq3280/p/16403206.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。