Customboxでthree.jsキャンバスを使用する

Question

私はthree.jsを使ってページに360のパノラマを作成しています。
ページにいくつかのサムネイルがあり、サムネイルをクリックすると2つのことが起こります。正しいテクスチャでパノラマキャンバスにスワップし（この作品）、カスタムボックスにキャンバスでカスタムボックスモーダルを作成します。

これは機能しません。私が見ているのは、元のキャンバス要素がDOM内にまだ存在し、動作しているということです。また、カスタムボックスには2番目のキャンバス要素がありますが、空白で表示され、機能がありません。

私はキャンバス要素がどのように機能するのか誤解しているので、モーダルダイアログボックスに表示することはできません。

Answer 1

私は、CustomBoxのターゲットがキャンバスを含むdivのIDかキャンバス自体であることを示すコードは一切表示しません。この場合、CustomBoxはdiv/canvasを複製します。必要なすべての構成要素が表示されますが、インスタンス化されたときに元のdivをレンダラーに渡したため、three.jsはそのことについて認識しません。あなたが使用している呼び出し）（レンダリング次のパラメータを取ります。

.render (scene, camera, renderTarget, forceClear) 

レンダリングが三番目のパラメータとして新しいレンダーターゲットを指すことができますので、私はここから始めて、新しいキャンバスのユニークなIDを渡しますCustomBoxによって表示されます。使用可能な方法はたくさんあります：https://threejs.org/docs/#api/renderers/WebGLRenderer getRenderTargetなどです。どのキャンバスが現在描画されているのかを知ることができます。また、setRenderTarget（）も重要です。