alexjet73
@alexjet73

Как сделать два canvas для одной сцены в three.js?

Собственно сабж. Есть одна сцена, которую нужно показывать в двух разных местах dom. Рендер привязан к событию change orbitcontrols, т.е. рендерит при повороте камеры вокруг объекта. Выводится все в указанный WebGLRenderer канвас.
Точно такая же сцена требуется в другом месте, и не хотелось бы дублировать код и создавать ту же сцену для другого канвас.
Какие есть способы дублировать всё на два канвас? Первое что пришло в голову простое дублирование канвас drawImage, а рендерить сцену посредством слушателя канвас mousemove при зажатой ЛКМ.

Но может есть какой то встроенный функционал в threejs или более правильные и производительные варианты?
  • Вопрос задан
  • 135 просмотров
Пригласить эксперта
Ответы на вопрос 1
sfi0zy
@sfi0zy Куратор тега JavaScript
Creative frontend developer
Точно такая же сцена требуется в другом месте, и не хотелось бы дублировать код и создавать ту же сцену для другого канвас

Сцену дублировать не обязательно. WebGLRenderer не умеет рендерить в несколько мест одновременно, но можно иметь одну сцену и много рендереров, каждый из которых будет рендерить ее в свой канвас. Это работает.

Если посмотреть с другой стороны, то возможно, что вам не нужны два канваса. Это может звучать странно, но тем не менее. Пользователь же все равно видит только один экран информации. Можно иметь один канвас на весь экран, и в нем рендерить сцены в какие-то его участки. Там есть такой функционал у рендерера, называется "ножницы" (scissor). Его можно использовать как раз для таких задач. Есть хороший пример в документации.

Но если делать именно 100% дублирование, то оба этих варианта будут не самыми толковыми с точки зрения производительности. В лоб скопировать уже готовое содержимое канваса в другой через drawImage должно быть проще, чем рендерить всю сцену еще раз. Поэтому решение, которое пришло вам в голову - очень даже ничего в текущем контексте. Хотя и выглядит топорно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы