如何遍历gltf文件材质、网格、动画并导入three js渲染

我是Three.js（以及React Three Fiber）的新手，暂时无法准确表述自身的开发需求。我确认想要实现的功能是可行的：公开glTF查看器站点中，任意拖拽上传的glTF文件都可以被正确渲染。我的具体需求为：编写循环遍历逻辑，处理带或不带动画的glTF模型，遍历其所有组成部分（即节点），最终将模型正确渲染到网页中。目前我只能逐一对模型的每个组成部分手动添加<mesh>标签，操作十分繁琐，我确信存在更简便的实现方案。我已经找到了上述glTF查看器的开源源码，但由于我对threejs相关库的熟悉度不足，希望能得到相关实现思路指导，或是同类问题的参考解答方向。

你完全不需要手动逐个给模型节点写<mesh>标签，这是新手最容易踩的误区：glTF加载器解析完文件后，返回的结果本身就是已经组装好所有层级、网格、材质、动画绑定关系的完整3D对象，直接挂载到场景就能正常渲染。

原生Three.js实现 #

• 基础渲染逻辑非常简单，加载完成后直接把解析出的scene对象加入场景即可：

import * as THREE from 'three'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'

const loader = new GLTFLoader()
// 如果模型用了DRACO、Meshopt压缩，记得给loader注册对应解码器
loader.load(
  'your-model-path.glb',
  (gltf) => {
    const model = gltf.scene
    // 这一步就完成了所有节点的挂载，不需要手动遍历加mesh
    scene.add(model)

    // 处理动画：有动画的模型直接初始化动画混合器即可
    if (gltf.animations.length) {
      const mixer = new THREE.AnimationMixer(model)
      gltf.animations.forEach(clip => mixer.clipAction(clip).play())
      // 别忘了在requestAnimationFrame渲染循环里传入帧间隔调用mixer.update(delta)
    }
  }
)

• 如果需要遍历节点做自定义处理（比如开关阴影、替换材质、加交互标记），调用Three.js Object3D自带的traverse方法就能递归遍历所有子节点：

model.traverse((node) => {
  // 判断节点类型做对应处理
  if (node.isMesh) {
    node.castShadow = true
    node.receiveShadow = true
  }
})

React Three Fiber（R3F）实现 #

直接用官方生态库@react-three/drei提供的现成钩子即可，不需要自己写加载、遍历、动画初始化的逻辑：

import { useRef, useEffect } from 'react'
import { useGLTF, useAnimations } from '@react-three/drei'

export default function GLTFModel({ modelUrl }) {
  const modelRef = useRef()
  // 自动处理模型加载、解析
  const { scene, animations } = useGLTF(modelUrl)
  // 自动处理动画混合器初始化、帧循环更新
  const { actions } = useAnimations(animations, modelRef)

  useEffect(() => {
    // 挂载后自动播放所有动画
    Object.values(actions).forEach(action => action.play())
  }, [actions])

  // primitive组件直接把解析好的3D对象挂载到R3F场景，不需要手写所有mesh标签
  return <primitive ref={modelRef} object={scene} />
}

// 可选：预加载模型提升首屏体验
useGLTF.preload('your-model-path.glb')

如果要做节点自定义修改，同样在拿到scene对象后调用traverse方法处理即可，逻辑和原生Three.js完全一致。

注意事项 #

• 不要手动拆分glTF返回的节点结构逐个写标签，glTF格式本身存储了模型完整的父子层级、变换矩阵、材质参数、蒙皮绑定、动画关联关系，手动拆分很容易出现动画失效、材质错乱、位置偏移的问题。
• 如果模型加载后显示异常，优先检查跨域配置、压缩模型对应的解码器是否配置正确，和遍历逻辑无关。
• 参考开源glTF查看器源码时，只需要重点关注加载完成后的scene挂载、动画mixer更新两部分逻辑即可，不需要复刻它的环境贴图、后期处理、UI交互等非核心功能。

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