React + Three.js с OrbitControls на нескольких холстах

Question

Я создал реагирующую + три песочницы с несколькими холстами, показывающими простую модель тетраэдра ( демо здесь) .

К сожалению, все экземпляры, похоже, используют 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);