欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Three.js 设置控制器作用范围

程序员文章站 2024-01-08 12:43:58
...

在应用Three.js时,发现即使鼠标不在场景出左击+滑动也会使场景中的镜头旋转(即在A区或者B区都可以控制场景C中的对象旋转),但有时这会影响到控制面板操作,因此需要限制控制器的作用范围只是在场景所在的canvas.

Three.js 设置控制器作用范围

造成上面结果的原因是没有指定控制器的事件监听对象,可以通过控制器参数设置,API有如下说明:

Three.js 设置控制器作用范围

因此,只需要获取到场景所在的canvas,然后指定OrbitControls的参数就可以了。例如,我通过

let divContainer = document.getElementById('divid');
divContainer.childNodes[1]
console.log("子节点:", divContainer.childNodes[1])

获取到场景的canvas:

Three.js 设置控制器作用范围

然后设置OrbitControls参数:

this.controls =new OrbitControls(this.camera, divContainer.childNodes[1]);

就OK了,控制器只会作用于场景所在的canvas,而不会影响覆于场景表面的那些面板操作了。

相关标签: 日常填坑呗