使用带 Custombox 的 three.js 画布答案

【问题标题】：Using a three.js canvas with Custombox使用带 Custombox 的 three.js 画布
【发布时间】：2017-05-13 02:22:06
【问题描述】：

我正在使用 three.js 在页面上创建 360 度全景图。
我在页面上有几个缩略图，单击缩略图会做两件事。它将正确的纹理交换到全景画布（这可行），然后使用自定义框中的画布创建自定义框模式。

这不起作用。我看到的是原始画布元素仍然存在于 DOM 中并且正在工作。在 custombox 中还有第二个 canvas 元素，但它看起来是空的并且没有任何功能。

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

【问题讨论】：

【解决方案1】：

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

.render ( scene, camera, renderTarget, forceClear )

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

【讨论】：

这非常有用，让我进行了几个小时的研究，以更深入地了解 CustomBox 和 three.js。