將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（）可能也有用給你。