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 用于大数据,室内设计,衣服等立体的的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-14使用AWS Lambda和S3打造智能文件整理器 - (动手搭建系列)
- 2024-11-14Netflix简化营收基础设施中的合同管理工具
- 2024-11-142024年必备的6款开源Terraform神器
- 2024-11-14Spin 3.0来啦:全新功能让你的无服务器Wasm应用开发更上一层楼
- 2024-11-14如何高效管理项目?小团队到大企业的多功能项目管理工具推荐
- 2024-11-1333 张高清大图,带你玩转 KubeSphere 4.1.2 部署与扩展组件安装
- 2024-11-11Spark 新作《循序渐进 Spark 大数据应用开发》简介
- 2024-11-11KubeSphere 社区双周报| 2024.10.25-11.07
- 2024-11-11云原生周刊:Istio 1.24.0 正式发布
- 2024-11-10一个故事,为你理清云开发服务的选择思路