このシーンを示す画像をクリックした後にthree.jsシーンを表示

Question

Three.jsシーンを示している画像をクリックしてこのThree.jsシーンをクリックして表示したいと思います。 1は、画像をクリックしたら、私は背景がグレーのフレームにThree.jsシーンを含めたい（のようなlightboxはイメージでない）ここで

は私が取得したいものの例の下にあります：

あなたは、次のリンクをこのWebGLのシーンを見ることができます

：あなたが見ることができるように

Three.js scene

、このシーンは、眉のウィンドウ全体を埋めますエル。

誰かが私にこれを達成するための手がかりを与えることができれば、それはいいだろう。

おかげ

Answer 1

1. は、古典的なHTMLを使用して画像を含めます。
2. 古典的なhtmlの既知のIDを持つ空のdivを含めます。
3. 誰かが画像をクリックしたときに関数を実行するイベントリスナーを追加します（例えばinit（）など）。それは、フレームのように見えるようにするにはdocument.getElementById("empty-div").appendChild(this.renderer.domElement);
4. ：
5. このinit関数は
6. 機能は、その後に空のdiv内の要素を追加する必要がありますなど）（レンダリング、THREE.WebGLRenderer、THREE.Sceneを初期化する必要がありCSSクラスを切り替える必要があります。 CSSでそのようなフレームを作る方法を知っていますか？
7. 最終的には、ユーザーがウィンドウのサイズを変更スリーシーンのサイズを更新するために、あなたはwindow.addEventListener('resize', resizeFunction, false);を追加することができますし、resizeFunctionが実行するwindow.innerWidthとwindow.innerHeightを使用する必要がありますrenderer.setSize(width, height);