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

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

К сожалению, все экземпляры, похоже, используют Three.OrbitControls одинаково: независимо от того, на какой холст указывает мышь - все модели фиксируют событие.

Желаемый результат состоит в том, что OrbitControls обновляет только холст, на который указывает мышь.

Как мне это изменить, чтобы модель на каждом холсте вела себя независимо? (исходный код)

javascript reactjs canvas three.js requestanimationframe

29.08.2018 01:31

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

877

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто передайте каждый холст как второй параметр конструктора: См. Второй параметр конструктора.

По умолчанию это document, но если вы передадите определенный элемент DOM, вместо этого он привяжет прослушиватели событий к этому объекту.

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

29.08.2018 01:37

Другие вопросы по теме

Как добавить данные в Firebase.database () с помощью React?

Реагировать на неопределенные ошибки

Машинопись: Как использовать два цвета в зависимости от шрифта?

Серверное перенаправление onClick с реактивным маршрутизатором

В ответе React fetch отсутствует заголовок авторизации

Не удается открыть веб-сокет из приложения React через NGINX

Подсветка синтаксиса для JSX нарушена в VS Code для свойств компонентов, отличных от camelCase

Слушайте установку расширения Chrome в приложении

Как разместить веб-приложение node response на cPanel?

Не удается отправить файл в конечную точку Express с помощью Axios через React

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

Ответы 1

Другие вопросы по теме

Похожие вопросы