在多个画布上带有OrbitControls的React + Three.js

Question

我已经创建了带有多个画布的react +三个沙箱，这些画布显示了简单的四面体模型（demo here)。

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

所需结果是OrbitControls仅更新鼠标指向的画布。

如何更改此设置，以便每个画布中的模型独立运行？ （source code）

Answer 1

只需将每个画布作为构造函数的第二个参数：See second parameter of constructor。

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

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