Javascript 反应+；在多个画布上使用OrbitControl的Three.js

我已经创建了react+三个沙盒，其中有多个画布，显示简单的四面体模型（

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

理想的结果是OrbitControl只更新鼠标指向的画布

---

我应该如何改变这一点，使每个画布中的模型都能独立运行？（）

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

这默认为

document

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

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