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

Question

我创建了 React + 三个沙箱，其中多个 canvases 显示了简单的四面体模型（demo here)。

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

期望的结果是 OrbitControls 仅更新 canvas 鼠标指向的位置。

我应该如何更改它，以便每个 canvas 中的模型独立运行？ (source code)

Answer 1

只需将每个 canvas 作为构造函数的第二个参数传递：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);