跨多个屏幕显示三个.js 场景 [英] display three.js scene across multiple screens

问题描述

是否可以使用threejs在不同的浏览器窗口中显示相同的场景?甚至在多个显示器上全屏显示?

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.

我没有找到这个用例的任何例子，粗略的第一次尝试失败了:https://codepen.io/tp_up/pen/vYBqLEq?page=1

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')});

提出这个问题的原因是我们想知道呈现到多个屏幕的 Web 应用程序是否可行，或者我们是否必须为该用例制作本机应用程序.所以有理由的是/否答案就足够了.

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.

推荐答案

这个例子官方示例列表恰好显示了该用例.您只需要添加一些选项(如查询参数)来决定绘制哪个视图并根据时间显示基本显示.此示例还展示了假设监视器位于圆形而不是网格中的用例.而这个示例 展示了该用例以及假设显示器具有不同尺寸的情况.

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.

第一个和最后一个示例使用 PerspectiveCamera.setViewOffset 选择要绘制较大图像的哪个部分.

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

来自文档:

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

fullWidth — 多视图设置的全宽
fullHeight — 多视图设置的全高
x — 子摄像机的水平偏移
y — 子相机的垂直偏移
width — 子相机的宽度
height - 子摄像机的高度

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.

例如，如果您有 3x2 台显示器，并且每台显示器都是 1920x1080，并且显示器在网格中如下所示:

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.

对于不同的浏览器窗口，您需要想出一种方法让它们相互通信.如果所有动画都基于时间，那么您只需要保持时间同步(或使用系统时钟，如 time = Date.now())以保持同步.否则，您可以使用 postMessage 跨窗口传递消息.

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.

这篇关于跨多个屏幕显示三个.js 场景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！