Three.js 设置控制器作用范围
程序员文章站
2024-01-08 12:43:58
...
在应用Three.js时,发现即使鼠标不在场景出左击+滑动也会使场景中的镜头旋转(即在A区或者B区都可以控制场景C中的对象旋转),但有时这会影响到控制面板操作,因此需要限制控制器的作用范围只是在场景所在的canvas.
造成上面结果的原因是没有指定控制器的事件监听对象,可以通过控制器参数设置,API有如下说明:
因此,只需要获取到场景所在的canvas,然后指定OrbitControls的参数就可以了。例如,我通过
let divContainer = document.getElementById('divid');
divContainer.childNodes[1]
console.log("子节点:", divContainer.childNodes[1])
获取到场景的canvas:
然后设置OrbitControls参数:
this.controls =new OrbitControls(this.camera, divContainer.childNodes[1]);
就OK了,控制器只会作用于场景所在的canvas,而不会影响覆于场景表面的那些面板操作了。
上一篇: 2020-10-25
下一篇: three.js使用总结(一)
推荐阅读