camera.position.set( 0, 0, 0.01 ); //视角放到了盒子里边轨道不能设置0,需要0.01
- 相机与物体完全重合,进入物体内部 + 面剔除 你把相机放在模型中心
(0,0,0),相机钻进模型几何体内部。 Three.js 默认背面剔除(side: FrontSide),模型内侧面片不渲染,画面直接变黑 / 看不到内容,轨道看似 “不能动”。 给z=0.01微小偏移,相机挪到模型外侧,正常看到表面。 - 轨道控制器 (OrbitControls) 焦点与相机坐标重合 OrbitControls 默认看向
(0,0,0)(目标中心点)。
- 相机坐标 = 目标点
(0,0,0)→ 相机和旋转原点重合,旋转半径为 0,轨道控制器失去旋转支点,拖拽无反应。 - 偏移
0.01后产生微小半径,控制器正常旋转。
二、对应解决方案(分场景)
1. 标准写法(推荐,彻底解决,不用硬写 0.01)
规范相机位置 + 轨道控制器目标,分离相机位置和观察中心点:
// 观察目标:模型中心 (0,0,0)
const target = new THREE.Vector3(0, 0, 0);
// 相机放在外侧,远离中心点,不要贴脸
camera.position.set(0, 0, 2);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.copy(target); // 轨道围绕模型中心旋转
controls.update();
2. 就想相机贴得很近(保留近距离视角)
调低相机近裁剪面,同时微小偏移:
// 缩小近裁切面,允许极近距离渲染
camera.near = 0.001;
camera.position.set(0, 0, 0.01);
3. 模型需要内部可视(钻进模型里看)
关闭背面剔除,让模型内壁可见:
// 材质设置:双面渲染
const material = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide
});




