点击说明这个场景的图像后，显示一个three.js场景

Question

点击一个说明Three.js场景的图像后，显示这个Three.js场景并且能够运行它。一旦人们点击的形象，我想包括three.js所现场为框架带有灰色背景（如lightbox确实与图片）

这里是低于我想什么这个例子中的：

你可以看到下面的链接，这个WebGL的一幕：

Three.js scene

正如你可以看到，这一幕填补眉毛的整个窗口呃。

如果有人可以给我一些线索来实现这一目标，那就太好了。

感谢

Answer 1

1. 包括与传统的HTML图像。
2. 包含一个带有经典html的已知id的空div。
3. 添加一个事件监听器来执行一个函数（例如init（）），当有人点击图像时。
4. 此初始化函数应该初始化的THREE.WebGLRenderer，所述THREE.Scene，渲染（）等等
5. 该函数应在空div与然后添加元素：document.getElementById("empty-div").appendChild(this.renderer.domElement);
6. 为了使它似乎像一个框架，那么你应该切换CSS类。你知道如何在CSS中制作这样的框架吗？
7. 最终，更新当用户调整窗口大小的三个场景的大小，你可以添加window.addEventListener('resize', resizeFunction, false);和resizeFunction应该使用window.innerWidth和window.innerHeight执行renderer.setSize(width, height);