Three.js教程:鼠标操作三维场景
推荐:将NSDT场景编辑器加入你3D工具链
其他工具系列:NSDT简石数字孪生
为了使用鼠标操作三维场景,可以借助three.js众多控件之一OrbitControls.js
,可以在下载的three.js-master
文件中找到(three.js-master\examples\js\controls
)。 然后和引入three.js
文件一样在html文件中引入控件OrbitControls.js
。本节课的目的不是为了深入讲解OrbitControls.js
,主要目的一方面向大家展示下threejs的功能,另一方面后面课程学习过程中经常会通过鼠标旋转、缩放模型进行代码调试。
代码实现
OrbitControls.js
控件支持鼠标左中右键操作和键盘方向键操作,具体代码如下,使用下面的代码替换1.1节中renderer.render(scene,camera);
即可。
function render() {
renderer.render(scene,camera);//执行渲染操作
}
render();
var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
controls.addEventListener('change', render);//监听鼠标、键盘事件
OrbitControls.js控件提供了一个构造函数THREE.OrbitControls()
,把一个相机对象作为参数的时候,执行代码new THREE.OrbitControls(camera,renderer.domElement)
,浏览器会自动检测鼠标键盘的变化, 并根据鼠标和键盘的变化更新相机对象的参数,比如你拖动鼠标左键,浏览器会检测到鼠标事件,把鼠标平移的距离按照一定算法转化为相机的的旋转角度,你可以联系生活中相机拍照,即使景物没有变化,你的相机拍摄角度发生了变化,自然渲染器渲染出的结果就变化了,通过定义监听事件controls.addEventListener('change', render)
,如果你连续操作鼠标,相机的参数不停的变化,同时会不停的调用渲染函数render()
进行渲染,这样threejs就会使用相机新的位置或角度数据进行渲染。
执行构造函数THREE.OrbitControls()
浏览器会同时干两件事,一是给浏览器定义了一个鼠标、键盘事件,自动检测鼠标键盘的变化,如果变化了就会自动更新相机的数据, 执行该构造函数同时会返回一个对象,可以给该对象添加一个监听事件,只要鼠标或键盘发生了变化,就会触发渲染函数。 关于监听函数addEventListener
介绍可以关注文章《HTML5事件》。
场景操作
- 缩放:滚动—鼠标中键
- 旋转:拖动—鼠标左键
- 平移:拖动—鼠标右键
requestAnimationFrame()
使用情况
如果threejs代码中通过requestAnimationFrame()
实现渲染器渲染方法render()
的周期性调用,当通过OrbitControls操作改变相机状态的时候,没必要在通过controls.addEventListener('change', render)
监听鼠标事件调用渲染函数,因为requestAnimationFrame()
就会不停的调用渲染函数。
function render() {
renderer.render(scene,camera);//执行渲染操作
// mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
requestAnimationFrame(render);//请求再次执行渲染函数render
}
render();
var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
// 已经通过requestAnimationFrame(render);周期性执行render函数,没必要再通过监听鼠标事件执行render函数
// controls.addEventListener('change', render)
注意开发中不要同时使用requestAnimationFrame()
或controls.addEventListener('change', render)
调用同一个函数,这样会冲突。
![](https://static.ghost.org/v5.0.0/images/publication-cover.jpg)
上一篇:Three.js教程:旋转动画、requestAnimationFrame周期性渲染 (mvrlink.com)