Three.js网格线在Chrome中部分出视即消失，Firefox无此问题

问题描述 #

使用Three.js的GridHelper类显示网格时，当相机放大且网格线部分超出视图范围，Chrome浏览器中会出现部分网格线消失的情况，但Firefox中显示正常。尝试通过设置frustumCulled = false并遍历网格子对象设置该属性禁用视锥体剔除，未解决问题。

表现对比 #

• Firefox正常显示：
  
• Chrome异常显示：
  

问题代码 #

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);

scene.background = new THREE.Color(0x333333);

camera.up.set(0, 0, 1);
camera.position.set(-10, -25, 10);
camera.lookAt(0, 0, 0);
scene.add(camera);

const grid = new THREE.GridHelper(200, 12);
grid.rotation.set(Math.PI / 2, Math.PI / 2, 0);
grid.position.set(0, 0, 0);
grid.frustumCulled = false;
grid.traverse((object) => { object.frustumCulled = false; });
grid.geometry.computeBoundingSphere();
scene.add(grid);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(400, 400);

document.getElementById('viewer').appendChild(renderer.domElement);

renderer.render(scene, camera);

原因分析 #

该问题属于浏览器WebGL实现的兼容性差异：

• Chrome的WebGL驱动对线条的裁剪逻辑较为严格，当线段的部分顶点超出视锥体范围时，可能错误地剔除整个线段；而Firefox会正确裁剪并保留可见的线段部分。
• frustumCulled属性仅控制对象整体的视锥体剔除（基于包围盒/球），当对象包围盒在视锥体内但线段局部顶点超出范围时，该设置无法干预WebGL对单个线段的裁剪行为。

解决方法 #

• 调整相机近裁剪面：将PerspectiveCamera的near参数从0.1增大到1（或其他合理值），避免近裁剪面过于靠近相机，减少顶点被错误裁剪的概率：

  const camera = new THREE.PerspectiveCamera(75, 1, 1, 1000);
  

• 启用局部裁剪逻辑：给GridHelper的材质开启局部裁剪，强制Three.js使用自身的裁剪逻辑处理线条：

  grid.material.localClippingEnabled = true;
  

• 自定义网格实现：若上述方法无效，可手动创建LineSegments构建网格，将长线段拆分为多个短线段，降低被错误剔除的概率。

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