如何让Three.js中x、y、z轴垂直平面相交于中心？

你的代码有两个核心问题导致平面未相交于中心且方向不符合要求：

1. 错误地将平面偏移到了坐标轴的1位置，而非场景中心原点
2. 未对平面进行旋转，使其垂直于目标坐标轴

修改后的代码如下：

public showPlaneGeometry() {
    console.log(this.hScene)
    const geometryx = new th.PlaneGeometry(1, 1);
    const geometryy = new th.PlaneGeometry(1, 1);
    const geometryz = new th.PlaneGeometry(1, 1);
    const material = new th.MeshBasicMaterial({
        color: 0xa6cfe2,
        side: th.DoubleSide,
        transparent: true,
        opacity: 0.5,
        depthWrite: false,
    });
    const planex = new th.Mesh(geometryx, material);
    const planey = new th.Mesh(geometryy, material);
    const planez = new th.Mesh(geometryz, material);

    // 垂直X轴的平面：绕Y轴旋转90度，位置保持原点
    planex.rotation.y = Math.PI / 2;
    planex.position.set(0, 0, 0);

    // 垂直Y轴的平面：绕X轴旋转90度，位置保持原点
    planey.rotation.x = Math.PI / 2;
    planey.position.set(0, 0, 0);

    // 垂直Z轴的平面无需旋转，默认垂直Z轴，位置保持原点
    planez.position.set(0, 0, 0);

    this.hScene.add(planex, planey, planez);
}

关键修改说明 #

• 位置调整：将所有平面的position设为(0,0,0)，确保它们以场景中心为交点
• 旋转调整：
  • 垂直X轴的平面需绕Y轴旋转Math.PI/2（90度），从默认的XY平面转到YZ平面，实现垂直于X轴
  • 垂直Y轴的平面需绕X轴旋转Math.PI/2，从默认的XY平面转到XZ平面，实现垂直于Y轴
  • 垂直Z轴的平面默认处于XY平面，本身就垂直于Z轴，无需额外旋转

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