three.js 实现自由落体

要实现自由落体的效果，可以使用 Three.js 中的物理引擎 Ammo.js 来模拟重力和碰撞。下面是一个简单的示例代码，实现一个球体自由落体的动画：

// 创建场景和摄像机
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建球体和材质
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshBasicMaterial({color: 0xff0000});
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

// 创建物理引擎
const physicsWorld = new Ammo.btDiscreteDynamicsWorld(new Ammo.btDefaultCollisionConfiguration(), new Ammo.btDbvtBroadphase(), new Ammo.btSequentialImpulseConstraintSolver(), new Ammo.btDefaultCollisionConfiguration());
physicsWorld.setGravity(new Ammo.btVector3(0, -9.8, 0)); // 设置重力

// 将球体添加到物理引擎中
const mass = 1;
const localInertia = new Ammo.btVector3(0, 0, 0);
const shape = new Ammo.btSphereShape(1);
shape.calculateLocalInertia(mass, localInertia);
const transform = new Ammo.btTransform();
transform.setIdentity();
const motionState = new Ammo.btDefaultMotionState(transform);
const rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, motionState, shape, localInertia);
const body = new Ammo.btRigidBody(rbInfo);
physicsWorld.addRigidBody(body);

// 动画循环
function animate() {
  requestAnimationFrame(animate);

  // 模拟物理引擎
  physicsWorld.stepSimulation(1 / 60, 10);

  // 更新球体位置
  const transform = new Ammo.btTransform();
  body.getMotionState().getWorldTransform(transform);
  const position = transform.getOrigin();
  sphere.position.set(position.x(), position.y(), position.z());

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

上述代码中，我们使用了 `Ammo.btDiscreteDynamicsWorld` 来创建物理世界，并设置了重力。然后将球体添加到物理引擎中，并使用 `physicsWorld.stepSimulation` 模拟物理引擎的运行。在动画循环中，通过 `body.getMotionState().getWorldTransform` 获取球体的位置，并更新球体的位置。

需要注意的是，为了让物理引擎运行更加稳定，我们需要在每一帧中调用 `physicsWorld.stepSimulation` 函数进行模拟，而不是直接修改球体的位置。