Three.js中如何将Cube网格准确定位至(0,0,0)坐标？

你的立方体已经处于(0,0,0)坐标，显示效果不符合预期的核心原因是相机设置或光源缺失，而非立方体位置问题。

核心修复点 #

• 相机必须对准场景中心：初始化相机后，调用camera.lookAt(0, 0, 0)，确保镜头朝向立方体所在的(0,0,0)位置。
• 调整相机位置：如果相机离中心过近或过远，立方体可能不在视野内，比如给透视相机设置合理位置camera.position.set(3, 3, 3)。
• 添加光源：MeshPhongMaterial依赖光源才能呈现颜色，无光源时立方体可能显示为黑色，容易误判位置。

完整可运行代码示例 #

// 假设已初始化scene和renderer
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 设置相机位置，确保能看到中心立方体
camera.position.set(3, 3, 3);
// 让相机对准(0,0,0)
camera.lookAt(0, 0, 0);

// 你的立方体代码（位置设置无需修改）
const cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1));
cube.position.x = 0;
cube.position.z = 0;
cube.position.y = 0;
cube.material = new THREE.MeshPhongMaterial({ color: 'green' });
this.scene.add(cube);

// 添加点光源，让Phong材质正常显色
const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(5, 5, 5);
this.scene.add(pointLight);

说明 #

你写的立方体位置代码完全正确，cube.position.x/y/z = 0已经将立方体定位在(0,0,0)，问题出在相机视角未对准中心，或是缺少光源导致立方体显示异常。

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