单击说明此场景的图像后显示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. 这个init函数应该初始化THREE.WebGLRenderer，THREE.Scene，render（）等。
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); }