threejs 弹窗 示例

three.js是一个基于WebGL的JavaScript库，用于创建和展示3D图形和动画。虽然three.js并不直接提供弹窗的功能，但我们可以使用HTML和CSS来创建一个弹窗，并在弹窗中集成three.js。

下面是一个示例，展示了如何在three.js中创建一个弹窗：

首先，在HTML中创建一个包含three.js场景的div容器，如下所示：

<div id="popup-container">
  <div id="popup-content">
    <!-- 在这里放置three.js场景 -->
  </div>
</div>

接下来，在CSS中设置弹窗的样式，使其位于屏幕中央并具有固定的宽度和高度：

#popup-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

#popup-content {
  width: 500px;
  height: 300px;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

然后，在JavaScript中使用three.js创建场景，并将其添加到弹窗中：

const popupContainer = document.getElementById("popup-content");

// 创建scene、camera和renderer等three.js基本组件
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, popupContainer.offsetWidth / popupContainer.offsetHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(popupContainer.offsetWidth, popupContainer.offsetHeight);
popupContainer.appendChild(renderer.domElement);

// 添加其他three.js对象或逻辑
// ...

// 渲染场景
function animate() {
  requestAnimationFrame(animate);
  // 更新场景内容
  // ...
  renderer.render(scene, camera);
}
animate();

最后，我们可以在需要弹出该弹窗的地方使用JavaScript来控制其显示与隐藏：

const popupContainer = document.getElementById("popup-container");

// 弹出弹窗
popupContainer.style.display = "flex";

// 关闭弹窗
popupContainer.style.display = "none";

总结起来，通过结合HTML、CSS和JavaScript，我们可以在three.js中创建并控制一个弹窗。使用上述示例，您可以根据自己的需求进行定制和扩展。