React Three Fiber添加Decal报错：Expected static flag was missing求助

1. 修复纹理传递的空值问题 #

当tattooImage为空时，useTexture返回的null直接传给Decal的map属性会触发React内部错误，同时导致Decal无法正常初始化。需通过条件渲染，仅在纹理加载完成后渲染Decal组件：

import React from 'react';
import { Decal, useGLTF, useTexture } from '@react-three/drei';

export function MaleMannequin({ tattooImage, ...props }) {
    const { nodes, materials } = useGLTF('models/male_mannequin.glb');
    // 仅当传入图片路径时加载纹理
    const tattooTexture = tattooImage ? useTexture(tattooImage) : undefined;

    return (
        <group {...props} dispose={null} scale={[0.1, 0.1, 0.1]}>
            <mesh geometry={nodes.FinalBaseMesh.geometry} material={materials['default']} rotation={[Math.PI / 2, 0, 0]}>
                {/* 纹理存在时才渲染Decal */}
                {tattooTexture && (
                    <Decal
                        position={[0, -0.2, 0.5]}
                        rotation={[0, 0, 0]}
                        scale={0.75}
                        map={tattooTexture}
                        polygonOffsetFactor={-1}
                    />
                )}
            </mesh>
        </group>
    );
}

useGLTF.preload('models/male_mannequin.glb');

2. 调整Decal的局部坐标系适配模型旋转 #

你给mesh设置了rotation={[Math.PI / 2, 0, 0]}，这会改变mesh的局部坐标系，Decal的位置、旋转参数是基于旋转后的坐标系计算的，当前参数可能导致Decal贴在模型不可见区域：

• 暂时移除mesh的rotation，调整Decal到可见位置后，再重新应用mesh旋转
• 直接调整Decal的position参数，比如尝试position={[0, 0.5, -0.2]}（X轴旋转90度后，原Y轴与Z轴方向会互换）

3. 验证模型节点的有效性 #

确认nodes.FinalBaseMesh是正确的模型节点：

• 在控制台打印nodes对象，查看模型的实际节点名称，避免引用错误节点
• 确保该节点的几何是BufferGeometry且包含正确的UV坐标（Decal依赖UV实现纹理映射）

4. 处理动态纹理的异步加载 #

如果tattooImage是动态传入的，需用Suspense处理纹理加载的延迟：

import { Suspense } from 'react';

// 父组件中使用时包裹Suspense
<Suspense fallback={<div>加载中...</div>}>
  <MaleMannequin tattooImage="/path/to/your-tattoo.png" />
</Suspense>

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