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

最新推荐文章于 2024-05-02 20:07:00 发布

末木CT

最新推荐文章于 2024-05-02 20:07:00 发布

阅读量1k

点赞数 2

分类专栏：其他

本文链接：https://blog.csdn.net/Rachel_CT/article/details/109656482

版权

16 篇文章 0 订阅

订阅专栏

在应用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，而不会影响覆于场景表面的那些面板操作了。

关注