OrthographicCamera下立方体被多边形遮挡问题求助

算力阿峰

2026-7-30

问题解决：正交相机下立方体被多边形遮挡

问题原因

你遇到的问题核心是两个配置疏漏：

正交相机未设置合理的**近裁剪面（near）和远裁剪面（far）**参数，导致深度范围计算异常，物体前后关系渲染错误。
正交相机未指定朝向，默认视角与场景物体位置不匹配，进一步干扰了深度测试逻辑。

修复步骤

1. 完善正交相机参数

THREE.OrthographicCamera需要6个参数：left, right, top, bottom, near, far。你之前仅传入前4个，默认裁剪面范围可能无法覆盖场景内的所有物体。同时必须添加相机朝向设置，确保镜头对准场景中心：

var camera = new THREE.OrthographicCamera(-5, 5, -5, 5, 0.1, 20); // 补充near和far参数
camera.position.set(0, 10, 0);
camera.lookAt(scene.position); // 让相机看向场景中心

2. 修正材质与细节问题

立方体颜色值多写了一个0，修正为0xff0000；
显式声明材质的深度属性（默认已开启，显式声明可避免意外配置）：

// 多边形材质
new MeshBasicMaterial({ 
  color: 0x999999, 
  side: DoubleSide, 
  depthTest: true, 
  depthWrite: true 
})

// 立方体材质
new MeshBasicMaterial({ 
  color: 0xff0000, 
  depthTest: true, 
  depthWrite: true 
})

完整修正后的相机初始化代码

var scene = new THREE.Scene();

var ortho = true; // <- change this

var camera;
if (ortho) {
  camera = new THREE.OrthographicCamera(-5, 5, -5, 5, 0.1, 20);
  camera.position.set(0, 10, 0);
  camera.lookAt(scene.position); // 关键：设置相机朝向
} else {
  camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight
  );
  camera.position.set(-4, 5, 4);
  camera.lookAt(scene.position); // 统一设置朝向，保持视角一致性
}

var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xffffff));
renderer.setSize(window.innerWidth, window.innerHeight);