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

2022/6/22 23:21:44

本文主要是介绍THREE webGL: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/



这篇关于THREE webGL:3D 用于大数据,室内设计,衣服等立体的的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程