javascript - 将 Three.js Canvas 与 Custombox 结合使用

Question

我正在使用 Three.js 在页面上创建 360 度全景图。
我的页面上有几个缩略图，单击缩略图会执行两件事。它将正确的纹理交换到全景 Canvas (这有效)，然后使用自定义框中的 Canvas 创建自定义框模式。

这不起作用。我看到的是原始的 canvas 元素仍然存在于 DOM 中并且正在工作。在自定义框中还有第二个 Canvas 元素，但它似乎是空的并且没有任何功能。

我是否误解了 Canvas 元素的工作原理，导致它无法出现在模式对话框中？

Answer 1

我假设，在没有提供任何代码的情况下，您的 CustomBox 目标是包含您的 Canvas 或 Canvas 本身的 div 的 ID。在这种情况下，CustomBox 将克隆您的 div/canvas。您将看到所需的所有组成部分，但 Three.js 不知道它们，因为您在实例化原始 div 时将其传递给渲染器。您使用的 render() 调用采用以下参数:

.render ( scene, camera, renderTarget, forceClear )

由于渲染可以指向新的 renderTarget 作为第三个参数，因此我将从这里开始，并传入 CustomBox 显示的新 Canvas 的唯一 ID。有很多可用的方法:https://threejs.org/docs/#api/renderers/WebGLRenderer例如 getRenderTarget，这样您就可以看到当前正在绘制哪个 Canvas ，重要的是 setRenderTarget() 这可能对您也有用。