отображать сцену three.js на нескольких экранах

Question

возможно ли использовать threejs для отображения одной и той же сцены в разных окнах браузера? или даже в полноэкранном режиме на нескольких экранах?

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

я не нашел примеров для этого варианта использования, и грубая первая попытка не удалась: https://codepen.io/tp_up/pen/vYBqLEq?page=1

  secondWindow = window.open();
  secondWindow.document.body.innerHTML = '<canvas id="scene"></canvas>';
  renderer = new THREE.WebGLRenderer({canvas :secondWindow.document.getElementById('scene')});

причина вопроса в том, что мы хотим знать, если веб-приложениеэто возможно на нескольких экранах, или если нам нужно создать собственное приложение для этого варианта использования. так что ответа да / нет с указанием причины будет достаточно.

Answer 1

Этот пример в официальном списке примеров показывает именно этот вариант использования. Вам просто нужно добавить несколько опций (например, параметр запроса), чтобы решить, какой вид рисовать и отображать время в базе. Этот пример также показывает, что сценарий использования предполагает, что мониторы находятся в круге вместо сетки. И этот пример показывает, что вариант использования также предполагает допущение, что мониторы имеют разные размеры.

В первом и последнем примере используется PerspectiveCamera.setViewOffset для выбора какой частиувеличенное изображение для рисования.

Из документов :

.setViewOffset ( fullWidth : Float, fullHeight : Float, x : Float, y : Float, width : Float, height : Float ) : null

fullWidth - полная ширина установки нескольких оконfullHeight - полная высота установки мультивьюх - горизонтальное смещение подкамерыу - вертикальное смещение подкамерыширина - ширина подкамерывысота - высота подкамеры

Устанавливает смещение в большем усечении. ** Это полезно для установок с несколькими окнами или с несколькими мониторами / с несколькими машинами.

Например, если у вас есть мониторы 3x2, и каждый монитор имеет разрешение 1920x1080, а мониторы расположены в виде сетки:

+---+---+---+
| A | B | C |
+---+---+---+
| D | E | F |
+---+---+---+

тогда для каждого монитора вы бы назвали его так:

var w = 1920;
var h = 1080;
var fullWidth = w * 3;
var fullHeight = h * 2;

// A
camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 0, w, h );
// B
camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 0, w, h );
// C
camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 0, w, h );
// D
camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 1, w, h );
// E
camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 1, w, h );
// F
camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 1, w, h );

Обратите внимание, что нет причин, по которым мониторы должны быть одинакового размера или в сетке.

Что касается разных окон браузера, вам нужно найти способ, чтобы они могли общаться друг с другом. Если вся анимация основана на времени, то вам просто нужно синхронизировать время (или использовать системные часы, как в time = Date.now()), чтобы синхронизировать вещи. в противном случае вы можете передавать сообщения через окна, используя postMessage.

Вот пример . Откройте несколько окон, и они должны синхронизироваться.