使用 Three.js 和 Cannon.js 构建真实 3D 骰子动画

// 引入必要的库
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import * as CANNON from 'cannon-es';
 
// 设置场景、相机和渲染器
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 controls = new OrbitControls(camera, renderer.domElement);
 
// 创建 Cannon.js 物理世界
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);
world.broadphase = new CANNON.SAPBroadphase(world);
world.solver.iterations = 10;
 
// 加载3D模型
const loader = new GLTFLoader();
loader.load('path/to/dice.glb', (gltf) => {
  const dice = gltf.scene;
  scene.add(dice);
 
  // 为每个骰子面添加碰撞体
  gltf.scene.traverse((child) => {
    if (child.isMesh) {
      const shape = new CANNON.Trimesh(
        new CANNON.Vec3(0, 0, 0),
        dice.geometry.attributes.position.array,
        dice.geometry.index.array
      );
      const body = new CANNON.Body({
        mass: 1,
        shape: shape,
        material: new CANNON.Material({ friction: 0, restitution: 0.9 }),
      });
      world.addBody(body);
      child.userData.body = body;
    }
  });
 
  // 渲染循环
  animate();
});
 
function animate() {
  requestAnimationFrame(animate);
 
  // 更新物理世界
  world.step(1 / 60);
 
  // 更新3D模型位置
  scene.traverse((child) => {
    if (child.isMesh && child.userData.body) {
      child.position.copy(child.userData.body.position);
      child.quaternion.copy(child.userData.body.quaternion);
    }
  });
 
  // 渲染场景
  renderer.render(scene, camera);
}

这个代码实例展示了如何使用Three.js和Cannon.js创建一个真实的3D骰子模型，并且模拟出物理的飘落效果。代码中包含了从.glb文件加载3D模型的逻辑，并且为每个骰子面创建了CANNON.js的碰撞体。最后，通过每帧更新物理世界和3D模型的位置，实现了真实的物理动画效果。