React Three Fiber网格局部消失问题修复及条件材质应用方法

你遇到的局部消失问题，核心原因大概率是材质的面剔除（Culling）设置与模型法线不匹配，或是自定义材质覆盖了原模型的背面剔除逻辑。以下是针对性的条件式材质应用方案：

1. 基于视角动态调整材质剔除规则 #

通过检测相机与模型的相对方向，实时切换材质的side属性，避免视角变化时的面剔除错误：

import { useFrame, useThree } from '@react-three/fiber'
import { useRef } from 'react'
import * as THREE from 'three'

function AdaptiveMaterialModel({ model }) {
  const meshRef = useRef()
  const { camera } = useThree()

  useFrame(() => {
    if (!meshRef.current) return
    // 计算相机指向模型的反向向量
    const viewDir = new THREE.Vector3()
    camera.getWorldDirection(viewDir).negate()
    // 通过法线与视角方向的点积判断朝向
    const dotProduct = meshRef.current.geometry.attributes.normal.array[0] * viewDir.x +
                       meshRef.current.geometry.attributes.normal.array[1] * viewDir.y +
                       meshRef.current.geometry.attributes.normal.array[2] * viewDir.z
    // 动态设置材质渲染面
    meshRef.current.material.side = dotProduct > 0 ? THREE.FrontSide : THREE.DoubleSide
  })

  return <primitive object={model.scene} ref={meshRef} />
}

2. 基于触发条件的材质替换逻辑 #

仅在特定条件下应用自定义材质，其余场景保留原模型材质的剔除规则：

function ConditionalMaterialModel({ model, shouldApplyCustomMat }) {
  return (
    <primitive
      object={model.scene}
      traverse={(obj) => {
        if (obj.isMesh) {
          if (shouldApplyCustomMat) {
            // 继承原材质的side属性，避免破坏原有剔除逻辑
            obj.material = new THREE.MeshStandardMaterial({
              color: '#2ecc71',
              side: obj.material.side || THREE.FrontSide,
              roughness: 0.5
            })
          }
          // 条件不满足时自动恢复原材质
          else if (obj.userData.originalMaterial) {
            obj.material = obj.userData.originalMaterial
          } else {
            obj.userData.originalMaterial = obj.material
          }
        }
      }}
    />
  )
}

3. 结合模型法线的根源修复+条件适配 #

先从模型层面修正法线问题，再通过条件逻辑强化适配：

• 在Blender中进入编辑模式，选中所有面执行Mesh > Normals > Recalculate Outside，确保法线统一朝外
• 导出GLTF时勾选Export Normals选项，保留法线数据
• 在RTF中仅当法线检测异常时启用双面渲染：

function NormalAwareModel({ model }) {
  return (
    <primitive
      object={model.scene}
      traverse={(obj) => {
        if (obj.isMesh) {
          // 检测模型是否存在法线翻转的面
          const hasFlippedNormals = obj.geometry.attributes.normal.array.some((val, idx) => {
            return idx % 3 === 0 && val < 0 // 简化判断，可根据模型调整
          })
          obj.material.side = hasFlippedNormals ? THREE.DoubleSide : THREE.FrontSide
        }
      }}
    />
  )
}

4. 深度冲突场景的条件处理 #

若消失区域是重叠面导致的深度冲突，可通过动态调整多边形偏移解决：

function DepthFixModel({ model }) {
  const { camera } = useThree()
  return (
    <primitive
      object={model.scene}
      traverse={(obj) => {
        if (obj.isMesh) {
          obj.userData.originalOffset = { ...obj.material }
          obj.onBeforeRender = () => {
            // 仅在近距离视角启用偏移，避免远距离渲染模糊
            const distance = obj.position.distanceTo(camera.position)
            if (distance < 3) {
              obj.material.polygonOffset = true
              obj.material.polygonOffsetFactor = -0.1
              obj.material.polygonOffsetUnits = 1
            } else {
              obj.material.polygonOffset = obj.userData.originalOffset.polygonOffset
            }
          }
        }
      }}
    />
  )
}

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