05如何使用Three.js进行3D模型的碰撞检测

在Three.js中进行3D模型的碰撞检测是一个涉及多个步骤的过程。Three.js提供了一些工具和方法来帮助我们实现基本的碰撞检测。以下是进行3D模型碰撞检测的一般步骤和示例代码。

1. 准备模型和场景

首先，需要加载或创建模型，并将其添加到场景中。

javascript

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(50, 50, 50);
const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const cube1 = new THREE.Mesh(geometry, material);
scene.add(cube1);

const sphereGeometry = new THREE.SphereGeometry(25, 32, 32);
const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);

2. 计算模型的包围盒

使用Box3来计算模型的最小外接长方体，这对于碰撞检测非常有用。

javascript

const box1 = new THREE.Box3().setFromObject(cube1);
const box2 = new THREE.Box3().setFromObject(sphere);

3. 检测包围盒是否重叠

通过比较两个包围盒的中心点和尺寸，可以判断它们是否重叠。

javascript

function isOverlap(box1, box2) {
    const center1 = box1.getCenter(new THREE.Vector3());
    const center2 = box2.getCenter(new THREE.Vector3());
    const halfExtents1 = box1.getBoundingSphere(new THREE.Sphere()).radius;
    const halfExtents2 = box2.getBoundingSphere(new THREE.Sphere()).radius;

    const maxDistance = halfExtents1 + halfExtents2;
    return center1.distanceTo(center2) < maxDistance;
}

4. 渲染和更新

在渲染循环中，更新模型的位置，并检测它们是否发生碰撞。

javascript

function animate() {
    requestAnimationFrame(animate);

    // 更新模型位置
    cube1.rotation.x += 0.01;
    cube1.rotation.y += 0.01;
    sphere.rotation.x += 0.01;
    sphere.rotation.y += 0.01;

    // 重新计算包围盒
    box1.setFromObject(cube1);
    box2.setFromObject(sphere);

    // 检测碰撞
    if (isOverlap(box1, box2)) {
        console.log('Collision detected!');
    }

    renderer.render(scene, camera);
}
animate();

5. 使用射线检测进行精确碰撞

对于更精确的碰撞检测，可以使用Raycaster来检测模型之间的碰撞。

javascript

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

function onMouseMove(event) {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

function checkCollision() {
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children);

    for (let i = 0; i < intersects.length; i++) {
        if (intersects[i].object === cube1 || intersects[i].object === sphere) {
            console.log('Collision detected!');
            break;
        }
    }
}

window.addEventListener('mousemove', onMouseMove, false);

完整示例代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js Collision Detection Example</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script type="importmap">
    {
      "imports": {
        "three": "https://threejs.org/build/three.module.js",
        "three/addons/": "https://threejs.org/examples/jsm/"
      }
    }
    </script>
    <script type="module">
      import * as THREE from 'three';

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      const geometry = new THREE.BoxGeometry(50, 50, 50);
      const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
      const cube1 = new THREE.Mesh(geometry, material);
      scene.add(cube1);

      const sphereGeometry = new THREE.SphereGeometry(25, 32, 32);
      const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
      const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
      scene.add(sphere);

      camera.position.z = 100;

      const box1 = new THREE.Box3().setFromObject(cube1);
      const box2 = new THREE.Box3().setFromObject(sphere);

      function isOverlap(box1, box2) {
          const center1 = box1.getCenter(new THREE.Vector3());
          const center2 = box2.getCenter(new THREE.Vector3());
          const halfExtents1 = box1.getBoundingSphere(new THREE.Sphere()).radius;
          const halfExtents2 = box2.getBoundingSphere(new THREE.Sphere()).radius;

          const maxDistance = halfExtents1 + halfExtents2;
          return center1.distanceTo(center2) < maxDistance;
      }

      function animate() {
          requestAnimationFrame(animate);

          cube1.rotation.x += 0.01;
          cube1.rotation.y += 0.01;
          sphere.rotation.x += 0.01;
          sphere.rotation.y += 0.01;

          box1.setFromObject(cube1);
          box2.setFromObject(sphere);

          if (isOverlap(box1, box2)) {
              console.log('Collision detected!');
          }

          renderer.render(scene, camera);
      }
      animate();
    </script>
</body>
</html>

1. 准备模型和场景 ​

2. 计算模型的包围盒 ​

3. 检测包围盒是否重叠 ​

4. 渲染和更新 ​

5. 使用射线检测进行精确碰撞 ​

完整示例代码 ​

1. 准备模型和场景

2. 计算模型的包围盒

3. 检测包围盒是否重叠

4. 渲染和更新

5. 使用射线检测进行精确碰撞

完整示例代码