0

好吧，我认为three.js 处理渲染的方式是将每个元素转换为图像，然后在上下文中绘制它。我在哪里可以得到更多的信息。如果我是对的，有没有办法获得该图像并对其进行操作？

任何信息将不胜感激。

4

1 回答 1

1

Three.js 内部描述了场景在 3D 空间中的样子，包括所有顶点和材质等。渲染过程采用该 3D 表示并将其投影到 2D 空间中。Three.js 有几个渲染器，包括WebGLRenderer（最常见的）、CanvasRenderer和CSS3DRenderer。他们都使用不同的方法来绘制二维投影：

  • WebGLRenderer 使用映射到OpenGL图形命令的 JavaScript API。客户端的 GPU 尽可能多地占用 3D 表示的一部分，并或多或少地执行 2D 投影本身。在渲染每个几何图形时，会将其绘制到缓冲区上。完整的缓冲区是一个帧，它是 3D 空间的完整 2D 投影，显示在您的<canvas>.
  • CanvasRenderer 使用 JavaScript API 进行 2D 绘图。它在内部进行 2D 投影（速度较慢），但在其他方面与高级 WebGLRenderer 类似。
  • CSS3DRenderer 使用 DOM 元素和 CSS3D 变换来表示 3D 场景。这大致意味着浏览器获取普通的 2D DOM 元素并将它们转换为 3D 空间以匹配 Three.js 的 3D 内部表示，然后将它们投影回 2D 页面。

（所有这些都被高度简化了。）

重要的是要理解框架渲染的 WebGL 和 Canvas 表示是您在屏幕上看到的结果图片，但它不是<img>. 通常，您的浏览器每秒会渲染 60 帧。您可以通过将图像转储<canvas>到图像中来提取帧。通常，您需要停止动画循环以执行此操作，否则您可能无法捕获所需的帧。以这种方式捕获帧很慢，并且鉴于您的浏览器每秒渲染如此多的帧，因此捕获每一帧的方法并不容易。

此外，Chrome 具有内置的画布检查工具，可让您仔细查看浏览器绘制的每一帧。

当 Three.js 渲染帧时，您不能轻易截取缓冲区，但您可以像往常一样直接在画布上绘制。renderer.context是 Three.js 绘制的图形上下文，其中renderer是您在设置 Three.js 场景时创建的 Renderer 实例。（图形上下文基本上是组装构成帧的缓冲区的助手。）

于 2013-07-21T02:22:23.667 回答