如何在多个对象上使用 Three.js OrbitControl [英] How to use Three.js OrbitControl on multiple objects

问题描述

所以我有轨道控制工作，但我在页面上有 3 个对象.当它控制一个时，它控制所有.此外，平移/缩放对于 OrthographicCamera 根本不起作用.

So i have the orbit control working, but i have 3 objects on the page. When it controls one, it controls them all. Also pan/zoom does not work at all with the OrthographicCamera.

我为 OrbitControls 的每个实例分配了自己的变量，因此它不是全局变量.

I have each instance of the OrbitControls assigned its own variable, so it is not global across them all.

controlsObjOne = new THREE.OrbitControls(cameraObjOne);
controlsObjOne.addEventListener('change', renderObjOne);

对于其他模型，我使用 ObjTwo、Three 等.除了轨道之外，一切都以这种方式工作(相机、灯光、渲染等).是否可以使用这个库，或者是否有另一个我没有见过的可以与多个对象一起使用的库?

I use ObjTwo, Three, etc for the other models. Everything works this way (camera, light, render, etc) except the orbit. Is it possible with this library or is there another one that i have not seen that will work with multiple objects?

推荐答案

这样做的原因是默认情况下，OrbitControls 将用于鼠标/触摸输入的 eventListeners 附加到文档.可以将 domElement 作为第二个参数传递.然后所有 eventListeners 将绑定到该元素(例如渲染器画布 domElement).但这会极大地限制导航的可能性，因为 mousemove 只会在鼠标位于画布区域时注册.

The reason for this is that by default, the OrbitControls attach the eventListeners for mouse/touch input to the document. One can hand over a domElement as a second parameter. Then all eventListeners will be bound to that element (for example the renderer canvas domElement). But that will highly limit the navigation possibilities, since the mousemove will only get registered when the mouse is in the canvas area.

您想要的是渲染器画布上的 mousedown eventListeners 和文档上的 mousemove 以在按下鼠标后自由移动鼠标.

What you want is the mousedown eventListeners on the renderer-canvas and the mousemove on the document to freely move the mouse once the mouse is pressed.

我创建了一个带有第三个参数的修改版本来移交您的画布元素:https://gist.github.com/mrflix/8351020

I created a modified version with a 3rd parameter to hand over your canvas element: https://gist.github.com/mrflix/8351020

这篇关于如何在多个对象上使用 Three.js OrbitControl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！