将Three.js画布与Custombox一起使用

Question

我正在使用three.js在页面上创建360度全景。
我在页面上有几个缩略图，单击缩略图有两件事。 它将正确的纹理交换到全景画布（此方法有效），然后在custombox中使用画布创建一个custombox模态。

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

我是否误解了canvas元素的工作方式，使得它不可能出现在模式对话框中？

Answer 1

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

.render ( scene, camera, renderTarget, forceClear )

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