Three.js问题：解决因相机角度导致的点模型裁剪问题

在使用Three.js结合React渲染带线框和顶点标记点的Waveform .obj模型时，渲染成功但点模型会随相机角度变化出现裁剪现象——底部点完整显示为球形，其余点被裁剪。已尝试设置depthTest: false及调整renderOrder，但问题仍存在；关闭depthTest会导致点模型失去遮挡效果，并非理想方案。

实现代码如下：

export const Scene: React.FC<{}> = ({}) => {
    const mountRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (!mountRef.current) return;

        // Scene setup
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(
            // ...
        );

        const renderer = new THREE.WebGLRenderer();
        mountRef.current.appendChild(renderer.domElement);

        // Load OBJ model
        const loader = new OBJLoader();
        loader.load("/FaceGeometry.obj", (object) => {
            object.traverse((child) => {
                child.renderOrder = -1;
                if (child instanceof THREE.Mesh) {
                    child.material = new THREE.MeshPhongMaterial({
                        color: 0x555555,
                        specular: 0x111111,
                        shininess: 100,
                        side: THREE.DoubleSide,
                    });

                    // Lines Material
                    const lineMaterial = new THREE.LineBasicMaterial({
                        color: 0x888888,
                        linewidth: 1, // Note: linewidth might not be supported by all platforms
                    });
                    const wireframe = new THREE.WireframeGeometry(
                        child.geometry
                    );
                    const lineSegments = new THREE.LineSegments(
                        wireframe,
                        lineMaterial
                    );
                    scene.add(lineSegments);

                    // Points Material
                    const textureLoader = new THREE.TextureLoader();
                    const sphereTexture =
                        textureLoader.load("/spherical.png");

                    const pointsMaterial = new THREE.PointsMaterial({
                        color: 0xff00ff,
                        map: sphereTexture,
                        size: 0.001,
                        transparent: true,
                        depthWrite: false, // Avoid depth write for better visual appearance
                        polygonOffset: true, // Enable polygon offset
                        polygonOffsetFactor: -1,
                        polygonOffsetUnits: -1,
                    });

                    // Points Geometry and Object
                    const pointsGeometry = child.geometry;

                    // Since we're using BufferGeometry, no need to convert the vertices
                    const points = new THREE.Points(
                        pointsGeometry,
                        pointsMaterial
                    );
                    points.renderOrder = 1;
                    scene.add(points);
                }
            });
            scene.add(object);
        });

        // Animation loop
        const animate = function () {
            requestAnimationFrame(animate);
            // Any animations or updates go here
            renderer.render(scene, camera);
        };

        animate();
    }, []);

    return <div ref={mountRef}></div>;
};

• 调整深度参数与渲染顺序
  保留depthTest: true以维持遮挡效果，将points.renderOrder设为更高值（比如2），确保mesh和线框的renderOrder低于点；同时移除polygonOffset相关设置，该参数对当前裁剪问题无效。

• 优化相机裁剪平面
  裁剪问题大概率是相机near值过大导致近距离顶点被裁。调整PerspectiveCamera的near为更小值（比如0.001），同时确保far覆盖模型最大范围：

  const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.001, // 调小近裁剪平面
      1000
  );
  

• 固定点大小衰减
  默认sizeAttenuation: true会让点大小随相机距离变化，可能在特定角度产生裁剪错觉。尝试关闭该属性固定点大小：

  const pointsMaterial = new THREE.PointsMaterial({
      // ... 其他参数
      sizeAttenuation: false,
  });
  

• 确保模型在视锥体内
  通过计算模型边界调整相机位置，避免部分顶点超出视锥体：

  const box = new THREE.Box3().setFromObject(object);
  const center = box.getCenter(new THREE.Vector3());
  const size = box.getSize(new THREE.Vector3());
  camera.position.set(center.x, center.y, center.z + size.z * 1.5);
  camera.lookAt(center);
  

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