React + Three.js在多个画布上使用OrbitControls

Question

我创建了 react + 三个沙箱，其中包含多个画布，显示简单的四面体模型(演示在这里(。

不幸的是，所有实例似乎都以相同的方式使用Three.OrbitControls：无论鼠标指向哪个画布 - 所有模型都会捕获事件。

期望的结果是 OrbitControls 只更新鼠标指向的画布。

我应该如何更改此设置，以便每个画布中的模型独立运行？(源代码(

Answer 1

只需将每个画布作为构造函数的第二个参数传递： 请参阅构造函数的第二个参数。

这默认为document，但如果传递特定的 DOM 元素，它会将事件侦听器绑定到该对象。

var controls1 = OrbitControls(cam1, canvas1);
var controls2 = OrbitControls(cam2, canvas2);
var controls3 = OrbitControls(cam3, canvas3);
var controls4 = OrbitControls(cam4, canvas4);