display three.js scene across multiple screens

问题

is it possible to use threejs to display the same scene in different browser windows? or even in Fullscreen across multiple displays?

i know it is possible to render the same scene from multiple views into one window, so the breaking point is if it is possible to pass the render context to another browser window.

i have not found any examples for this use case and a rough first try fails: 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')});

the reason for the question is that we want to know if a web app that renders to multiple screens is feasible or if we have to make a native application for that use case. so a yes / no answer with a reason would be enough.

回答1:

This example in the official list of examples shows exactly that use case. You just need to add some options (like a query parameter) to decide which view to draw and base display off the time. This example also shows that use case assuming the monitors are in a circle instead of a grid. And this example shows that use case as well assuming the monitors are of different sizes.

The first and the last example use PerspectiveCamera.setViewOffset to choose which portion of a larger image to draw.

From the docs:

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

fullWidth — full width of multiview setup
fullHeight — full height of multiview setup
x — horizontal offset of subcamera
y — vertical offset of subcamera
width — width of subcamera
height — height of subcamera

Sets an offset in a larger frustum. **This is useful for multi-window or multi-monitor/multi-machine setups.

For example, if you have 3x2 monitors and each monitor is 1920x1080 and the monitors are in grid like this:
+---+---+---+
| A | B | C |
+---+---+---+
| D | E | F |
+---+---+---+
then for each monitor you would call it like this:
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 );
Note there is no reason monitors have to be the same size or in a grid.

As for different browser windows you'll need to come up with a way for them to communicate with each other. If all the animation is based on the time then you just need to keep the time in sync (or use the system clock as in time = Date.now()) to keep things in sync. otherwise you can pass messages across windows using postMessage.

Here's an example. Open multiple windows and they should stay in sync.

来源：https://stackoverflow.com/questions/58170126/display-three-js-scene-across-multiple-screens

标签

three.js