三个 JS Div over OrbitControl

在 Three.js 中，OrbitControl 是一个类，在场景中呈现交互式的鼠标控制。 通过轻松控制相机的位置，使得相机围绕目标旋转，以及与目标的缩放。

同时，Div 是 HTML 中的基本元素，是构成网页内容的重要组成部分。

在 Three.js 中，我们可以将 Div 元素和 OrbitControl 相结合，来实现更多的功能。

下面介绍三个 JS Div over OrbitControl：

1. 将 Three.js 场景和 DOM 相结合

<div id="canvas-container"></div>
<script src="https://threejs.org/build/three.min.js"></script>
<script>
  const scene = new THREE.Scene(); // 1. 创建场景
  const geometry = new THREE.BoxGeometry(1, 1, 1); // 2. 创建三维盒子
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 3. 创建材质
  const cube = new THREE.Mesh(geometry, material); // 4. 创建网格
  scene.add(cube); // 5. 将网格添加到场景中

  const renderer = new THREE.WebGLRenderer(); // 6. 创建渲染器
  renderer.setSize(window.innerWidth, window.innerHeight); // 7. 设置渲染器大小
  document.getElementById("canvas-container").appendChild(renderer.domElement); // 8. 将渲染器添加到指定的dom元素中

  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 9. 创建相机
  camera.position.z = 5; // 10. 设置相机的初始位置

  const animate = function () { // 11. 创建动画
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  };
  animate();
</script>

这个例子将 Three.js 场景和 DOM 结合在一起挺简单的，只需要在 DOM 中添加一个 div 元素，然后将渲染器添加到这个 div 中即可。同时，我们还需要在 Three.js 中创建场景、盒子、材质、网格、渲染器和相机，最后实现一个简单的动画。同时，如果要在此基础上使用 OrbitControl，只需要将 OrbitControl 模块引入，然后将相机作为参数传递给 OrbitControl 即可。例如：

<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
  const controls = new THREE.OrbitControls(camera, renderer.domElement); // 将相机和渲染器传递给OrbitControl
</script>

2. 在 Three.js 中显示 DOM 元素

<div id="canvas-container"></div>
<div id="overlay">
  <h1>Hello Three.js World!</h1>
  <p>This is a demo of how to overlay HTML on a Three.js scene.</p>
</div>
<script src="https://threejs.org/build/three.min.js"></script>
<script>
  const scene = new THREE.Scene(); // 创建场景
  const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建盒子
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建材质
  const cube = new THREE.Mesh(geometry, material); // 创建网格
  scene.add(cube); // 将网格添加到场景中

  const renderer = new THREE.WebGLRenderer(); // 创建渲染器
  renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器大小
  document.getElementById("canvas-container").appendChild(renderer.domElement); // 将渲染器添加到指定的dom元素中

  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 创建相机
  camera.position.z = 5; // 设置相机的初始位置

  const container = document.createElement("div"); // 创建一个div
  container.innerHTML = document.getElementById("overlay").innerHTML; // 将overlay的html内容添加到div中
  container.style.position = "absolute"; // 设置div的绝对位置
  container.style.zIndex = "10"; // 将div的层级设置为10
  container.style.width = "100%"; // 设置div的宽度为100%
  container.style.top = "0px"; // 设置div的位置向上的距离为0px
  container.style.left = "0px"; // 设置div的位置向左的距离为0px
  document.body.appendChild(container); // 将div添加到body中

  const animate = function () {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  };
  animate();
</script>

这个例子同样是将 Three.js 场景和 DOM 结合在一起，不过不同的是，这里是把 DOM 元素添加到了 Three.js 场景中。在这个例子中，我们需要创建一个 div 元素，然后将这个 div 中的内容添加到 Three.js 场景中，通过设置 div 的绝对定位、层级、宽度、顶部位置和左侧位置来控制这个 div 在屏幕中的位置。当然，与上一个例子类似，如果需要使用 OrbitControl，只需要将相机作为参数传递给 OrbitControl 即可。

3. 在 Three.js 中创建 HTML 元素

<div id="canvas-container"></div>
<script src="https://threejs.org/build/three.min.js"></script>
<script>
  const scene = new THREE.Scene(); // 创建场景
  const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建盒子
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建材质
  const cube = new THREE.Mesh(geometry, material); // 创建网格
  scene.add(cube); // 将网格添加到场景中

  const renderer = new THREE.WebGLRenderer(); // 创建渲染器
  renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器大小
  document.getElementById("canvas-container").appendChild(renderer.domElement); // 将渲染器添加到指定的dom元素中

  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 创建相机
  camera.position.z = 5; // 设置相机的初始位置

  const textureLoader = new THREE.TextureLoader(); // 创建纹理加载器
  const texture = textureLoader.load("https://threejsfundamentals.org/threejs/resources/images/wall.jpg"); // 加载纹理

  const div = document.createElement("div"); // 创建一个div
  div.style.width = "200px"; // 设置div的宽度为200px
  div.style.height = "200px"; // 设置div的高度为200px
  div.style.background = `url(${texture.image.src})`; // 设置div的背景图片
  div.style.backgroundSize = "100% 100%"; // 将背景图片填充整个div
  div.style.position = "absolute"; // 设置div的绝对位置
  div.style.zIndex = "10"; // 将div的层级设置为10
  div.innerHTML = "<h1>Hello Three.js World!</h1>"; // 添加一个H1标签
  document.body.appendChild(div); // 将div添加到body中

  const animate = function () { // 创建动画
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  };
  animate();
</script>

这个例子是在 Three.js 中创建一个 HTML 元素，并将这个元素添加到了 DOM 中。首先，我们需要在 Three.js 中加载一个纹理，并创建一个 div 元素。然后，我们将这个纹理作为背景图片添加到 div 中，并将 div 的位置设置为绝对定位、层级、宽度和高度。这样，我们就可以在 Three.js 场景中看到一个 div 元素了！

同样地，如果需要在此基础上使用 OrbitControl，只需要将相机作为参数传递给 OrbitControl 即可。

以上就是三个 JS Div over OrbitControl 的介绍，希望对您有所帮助！