WebGL 多画布three.js 示例

Posted 2023-03-23

【中文标题】WebGL 多画布three.js 示例

【英文标题】：WebGL Multiple Canvas three.js example

【发布时间】：2013-10-02 20:19:12

【问题描述】：

所以我正在开发一个项目，该项目使用多个不同的相机将场景渲染到不同的画布上。基本上我正在做这个例子：

http://threejs.org/examples/webgl_multiple_canvases_grid.html

我发现这样做的问题是，不同场景的剪裁平面在边缘做了奇怪的事情。如示例所示，使用大对象时它很好，但使用较小的对象时，有些会被剪裁在边缘。我已经做了一个例子来说明这个问题。

http://tinyurl.com/pjstjjd

我想知道是否有办法解决这个问题。我打算尝试和探索的几种不同方法如下：

尝试稍微重叠渲染器，以使剪切平面更宽。 看看有没有办法关闭剪辑 哭着睡觉。

我是否缺少一些简单的东西，或者我必须深入挖掘。

非常感谢您抽出宝贵时间！ 艾萨克

【问题讨论】：

小请求，请勿使用 tinyurl 链接。该网站的用户没有任何好处（点击就是点击），如果混淆了链接的实际结束位置

通常 100% 同意！这个问题是它指向的链接很长（比如 1595 个字符对于评论来说太长了），所以有一些用处。是否有其他方式可以考虑共享链接（网站的实际代码编码在 url 中，因此不需要服务器端代码）

您可以使用 Link syntax [Title](Url) （或者更好的是，使用编辑器中的按钮将 url 移动到帖子的末尾），以便在悬停时可见但不会混乱问题？我承认我没有意识到链接这么长

啊！精彩的。这两个都是我不知道的技术！！！

【参考方案1】：

问题是您要创建 4 个App 对象，并且在每个对象中创建不同的随机球体。所以你的 4 个视图在不同的地方有不同的球体集。如果您希望视图匹配，则必须将对象放在每个应用程序中的相同位置。

我在您的示例中的第 129 行粘贴了这段代码

var randomSeed_ = 0;
var RANDOM_RANGE_ = Math.pow(2, 32);

Math.random = function() 
  return (randomSeed_ =
          (134775813 * randomSeed_ + 1) %
           RANDOM_RANGE_) / RANDOM_RANGE_;
;

这是一个随机函数，它为每个应用返回相同的值，因为 randomSeed_ 在每个应用中从 0 开始。

了解您最终想要实现的目标会有所帮助。您链接到的 Three.JS 示例旨在展示如何在网格中的 4 台不同机器上的多个监视器上传播渲染。

This one shows if the monitors are different sizes and not in a grid。 This one shows if the monitors are in a circle or semi circle。例如谷歌的Liquid Galaxy。

This one shows multiple views in a single canvas 虽然在撰写此答案时它看起来需要一些更新。

This one shows drawing using one large canvas and place holder elements for where to draw

【讨论】：

好吧废话....我会制作一个新版本，看看效果如何！感谢您的及时回复