如何使用ReactJS动态渲染并编辑3D模型

你当前硬编码写法的核心问题是把模型路径、部件名称、纹理映射关系全部写死在组件里，要支持任意模型加载、任意元素编辑，只要把「模型加载-部件收集-材质绑定-状态同步」这几个环节改成动态逻辑即可，不需要提前预知模型内部结构。

核心实现逻辑 #

• 放弃单模型专属组件，写通用动态加载组件：不需要为每个产品单独写组件，做一个接收模型地址作为入参的通用组件，加载GLB后自动遍历内部所有网格节点，自动收集可编辑部件清单，不需要提前写死mesh名称。
• 材质配置与组件解耦：把所有部件的材质参数（颜色、金属度、粗糙度、各类贴图路径）存在全局响应式状态里，材质属性直接绑定状态值，用户在UI端修改参数时直接更新状态，3D场景会自动重渲染。
• 纹理按配置动态加载：不需要提前手动枚举所有纹理路径，根据当前加载模型的部件配置，动态拉取对应纹理即可；也可以直接复用GLB文件内嵌的纹理作为默认值。

参考代码 #

通用动态模型组件 #

import { useRef, useState, useEffect } from 'react'
import { useGLTF, useTexture } from '@react-three/drei'
import * as THREE from 'three'

// 简易全局配置状态，也可以替换为zustand、React Context等方案
const configStore = (() => {
  let state = {
    parts: {}, // 存储所有部件的材质配置
    partList: [], // 所有可编辑部件清单
    selectedPartId: null // 当前选中的可编辑部件
  }
  const listeners = new Set()
  const setState = (patch) => {
    state = { ...state, ...patch }
    listeners.forEach(listener => listener(state))
  }
  return {
    get: () => state,
    set: setState,
    subscribe: (listener) => {
      listeners.add(listener)
      return () => listeners.delete(listener)
    }
  }
})()

const DynamicProduct = ({ modelUrl, partTextureMap = {} }) => {
  const groupRef = useRef()
  const { scene } = useGLTF(modelUrl)
  const [renderTrigger, setRenderTrigger] = useState(0)

  // 模型加载完成后遍历所有网格，初始化部件清单
  useEffect(() => {
    if (!scene) return
    const collectedParts = []
    scene.traverse((node) => {
      if (!node.isMesh) return
      const partId = node.name || node.uuid
      collectedParts.push({
        id: partId,
        name: node.name || '未命名部件',
        originMesh: node
      })
      // 初始化部件默认材质配置，优先用GLB自带材质参数
      if (!configStore.get().parts[partId]) {
        const originMat = Array.isArray(node.material) ? node.material[0] : node.material
        configStore.set({
          parts: {
            ...configStore.get().parts,
            [partId]: {
              color: `#${originMat?.color?.getHexString?.() || 'ffffff'}`,
              metalness: originMat?.metalness ?? 0.5,
              roughness: originMat?.roughness ?? 0.5,
              maps: partTextureMap[partId] || {}
            }
          }
        })
      }
    })
    configStore.set({ partList: collectedParts })
    setRenderTrigger(prev => prev + 1)
  }, [scene, partTextureMap])

  // 批量加载当前配置用到的所有纹理
  const currentConfig = configStore.get()
  const allTextureUrls = Object.values(currentConfig.parts)
    .flatMap(partConf => Object.values(partConf.maps))
    .filter(Boolean)
  const loadedTextures = useTexture(allTextureUrls)
  const textureRef = Object.fromEntries(allTextureUrls.map((url, idx) => [url, loadedTextures[idx]]))

  // 订阅配置变更触发重渲染
  useEffect(() => {
    return configStore.subscribe(() => setRenderTrigger(prev => prev + 1))
  }, [])

  return (
    <group ref={groupRef} dispose={null}>
      {/* 遍历所有部件动态渲染，无需写死mesh名称 */}
      {currentConfig.partList.map(part => {
        const partConf = currentConfig.parts[part.id]
        if (!partConf) return null
        const { maps, color, metalness, roughness } = partConf
        return (
          <mesh
            key={part.id}
            geometry={part.originMesh.geometry}
            position={part.originMesh.position}
            rotation={part.originMesh.rotation}
            scale={part.originMesh.scale}
            onClick={() => configStore.set({ selectedPartId: part.id })}
          >
            <meshStandardMaterial
              color={color}
              metalness={metalness}
              roughness={roughness}
              map={maps.baseColor ? textureRef[maps.baseColor] : null}
              normalMap={maps.normal ? textureRef[maps.normal] : null}
              roughnessMap={maps.roughness ? textureRef[maps.roughness] : null}
              metalnessMap={maps.metalness ? textureRef[maps.metalness] : null}
              emissiveMap={maps.emissive ? textureRef[maps.emissive] : null}
              displacementMap={maps.height ? textureRef[maps.height] : null}
            />
          </mesh>
        )
      })}
    </group>
  )
}

export default DynamicProduct

组件调用方式 #

不需要再为每个产品写单独组件，加载任意产品时只要传入对应模型地址和纹理映射配置即可：

// 加载你之前的Franklin椅子示例
<DynamicProduct
  modelUrl="/wes/franklin/franklin.glb"
  partTextureMap={{
    Back_Seat002: {
      baseColor: '/wes/franklin/textures/Franklin_back_BaseColor.png',
      emissive: '/wes/franklin/textures/Franklin_back_Emissive.png',
      height: '/wes/franklin/textures/Franklin_back_Height.png',
      metalness: '/wes/franklin/textures/Franklin_back_Metallic.png',
      normal: '/wes/franklin/textures/Franklin_back_Normal.png',
      roughness: '/wes/franklin/textures/Franklin_back_Roughness.png',
    },
    // 其余部件按相同格式补充纹理映射即可
  }}
/>

后续扩展方向 #

• 编辑面板：从configStore读取selectedPartId对应部件的配置，绑定表单控件，修改时调用configStore.set更新对应参数即可实时生效
• 自定义上传纹理：用户上传本地图片后，将图片生成的blob地址存入对应部件的maps配置，会自动加载替换
• 多产品切换：切换产品时清空configStore里的旧parts、partList数据，传入新的modelUrl和纹理配置即可，无需修改组件代码
• 配置持久化：把configStore里的parts配置序列化为JSON存储，下次加载时直接传入即可还原用户的编辑结果

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