如何让Three.js中的汽车正确旋转（合并或不合并网格均可）

你的问题核心是没有建立汽车部件的层级关系——当前所有车身、车轮都是独立的Mesh，调用turnRight时每个部件绕自身原点旋转，自然会出现错位。用Three.js的Object3D做父容器，把所有部件挂载到父节点下，就能实现整体同步转向。

修改后的完整代码 #

export function createCar(x, y, z, color) {
  // 创建汽车根容器（无可见几何体，仅做层级控制）
  const carRoot = new THREE.Object3D();
  carRoot.position.set(x + 2.5, y, z + 1.25);
  
  let objects = [carRoot];
  const wheels = []; // 单独存储车轮引用，方便后续控制滚动

  function createWheel(x, y, z) {
    // 车轮外圈
    const outerTorus = createTorus(0.5, 0.25, "#36353a", x, y, z);
    // 车轮内圈
    const innerTorus = createTorus(0.25, 0.25, "gray", x, y, z);
    // 将车轮的两个部分存入数组
    wheels.push(outerTorus, innerTorus);
  }

  function createBody() {
    createRectangle(5.5, 3, 1, color, 0, 1, 0); // 相对根节点的局部位置
    createRectangle(2.5, 3, 1, "#e1ebe3", -0.75, 2, 0);
  }
  
  function createTorus(radius, innerRadius, color, x, y, z) {
    const geometry = new THREE.TorusGeometry(radius, innerRadius, 16, 100);
    const material = new THREE.MeshLambertMaterial({ color: color });
    const torus = new THREE.Mesh(geometry, material);
    torus.position.set(x, y, z);
    
    carRoot.add(torus); // 添加到根容器
    objects.push(torus);
    return torus;
  }

  function createRectangle(length, width, height, color, x, y, z) {
    const geometry = new THREE.BoxGeometry(length, height, width);
    const material = new THREE.MeshLambertMaterial({ color: color });
    const rect = new THREE.Mesh(geometry, material);
    rect.position.set(x, y, z);
    
    carRoot.add(rect); // 添加到根容器
    objects.push(rect);
    return rect;
  }

  function createCylinder(radius, height, color, x, y, z) {
    const geometry = new THREE.CylinderGeometry(radius, radius, height, 32);
    const material = new THREE.MeshLambertMaterial({color: color});
    const cylinder = new THREE.Mesh(geometry, material);
    cylinder.position.set(x, y, z);
    
    carRoot.add(cylinder); // 添加到根容器
    objects.push(cylinder);
    return cylinder
  }

  // 创建车轮（位置改为相对根节点的局部坐标）
  createWheel(-2.5, 0, -1.25);
  createWheel(2.5, 0, -1.25);
  createWheel(-2.5, 0, 1.25);
  createWheel(2.5, 0, 1.25);
  createBody();

  function turnRight() {
    // 旋转根容器，所有子部件同步跟随转向
    carRoot.rotation.y += 0.1;
  }

  // 可添加车轮滚动函数，比如前进时调用
  function rollWheels(speed) {
    wheels.forEach(wheel => {
      wheel.rotation.x += speed; // 绕x轴旋转实现滚动效果
    });
  }
  
  return {
    objects,
    turnRight,
    rollWheels // 暴露滚动方法
  }
}

关键改动说明 #

1. 层级结构搭建：用THREE.Object3D作为carRoot，所有车身、车轮都通过carRoot.add()挂载为子节点。父节点的旋转、移动会自动传递给所有子节点，实现同步。
2. 局部坐标调整：部件的位置改为相对carRoot的局部坐标（比如车身从x + 2.5改为0），因为carRoot已经设置了世界位置，子节点只需关注自身在汽车坐标系中的位置。
3. 车轮独立控制：用wheels数组存储所有车轮部件，方便后续单独控制滚动旋转（比如汽车前进时调用rollWheels）。
4. 转向逻辑简化：turnRight只需旋转carRoot，无需遍历所有部件，代码更简洁高效。

扩展：实现前轮摆动转向（如果需要） #

如果你的需求是**前轮单独摆动（类似真实汽车转向）**而非整体车身旋转，可以给前轮单独创建子容器：

// 创建前轮容器
const frontWheelsContainer = new THREE.Object3D();
carRoot.add(frontWheelsContainer);

// 创建前轮时挂载到frontWheelsContainer
function createFrontWheel(x, y, z) {
  const outerTorus = createTorus(0.5, 0.25, "#36353a", x, y, z);
  const innerTorus = createTorus(0.25, 0.25, "gray", x, y, z);
  frontWheelsContainer.add(outerTorus, innerTorus);
  wheels.push(outerTorus, innerTorus);
}

// 转向时旋转前轮容器
function turnRight() {
  frontWheelsContainer.rotation.y += 0.1;
}

这样前轮会绕自身的y轴摆动，同时跟随车身整体移动，更贴近真实汽车的转向逻辑。

内容的提问来源于stack exchange，提问作者Koby K