如何在react-babylonjs中动态修改Blender导入模型的Albedo颜色

核心思路 #

别把材质实例存在React的state里，改用useRef持久化保存材质引用——state更新会触发组件重渲染，导致之前的材质引用失效；而ref在组件整个生命周期里都保持同一个引用，不会随重渲染变化。

具体实现步骤 #

1. 用useRef存储目标材质
   在组件里定义一个ref，专门存你要修改的材质：

   import { useRef, useEffect } from 'react';
   import { Color3 } from '@babylonjs/core';
   import { ModelViewer } from '@babylonjs/react';
   
   function ModelComponent() {
     const targetMaterialRef = useRef(null);
   
     // 模型加载完成后锁定目标材质
     const handleModelLoaded = (scene) => {
       // 按网格名称找到目标网格，替换成你的网格名
       const targetMesh = scene.getMeshByName('your-target-mesh');
       if (targetMesh) {
         targetMaterialRef.current = targetMesh.material;
         console.log('初始Albedo颜色:', targetMaterialRef.current.albedoColor);
       }
     };
   
     // 用useEffect管理定时器，避免内存泄漏
     useEffect(() => {
       if (!targetMaterialRef.current) return;
   
       const colorTimer = setInterval(() => {
         // 生成随机测试颜色，可替换成你的自定义颜色逻辑
         const newColor = new Color3(Math.random(), Math.random(), Math.random());
         // 直接修改材质的albedoColor，BabylonJS会自动更新渲染
         targetMaterialRef.current.albedoColor = newColor;
         // 如果需要在UI同步显示颜色，可把颜色值存到state里
         // setDisplayColor([newColor.r, newColor.g, newColor.b]);
       }, 1000);
   
       // 组件卸载时清理定时器
       return () => clearInterval(colorTimer);
     }, []); // 空依赖数组，仅组件挂载时执行一次
   
     return (
       <ModelViewer
         onModelLoaded={handleModelLoaded}
         modelUrl="/your-exported-model.glb"
         camera={{
           type: 'arcRotate',
           position: [0, 5, 10],
         }}
       />
     );
   }
   
   export default ModelComponent;
   

2. 关键注意点

   • 直接操作ref里的材质实例即可，BabylonJS会自动处理渲染更新，不需要通过React state触发重渲染。
   • 若要在React UI上同步显示当前Albedo颜色，可把颜色值存在state里，但修改材质本身还是直接操作ref中的实例。
   • 必须清理定时器，避免组件卸载后定时器继续运行导致内存泄漏。

为什么之前的setInterval会失效？ #

之前你可能把材质存在了state里，组件重渲染时state会重新赋值，导致定时器里拿到的材质引用已经不是当前场景中的实例了。用ref持久化引用后，不管组件怎么重渲染，ref.current始终指向同一个材质对象。

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