Threejs贴花未显示答案

【问题标题】：Threejs Decal not showingThreejs贴花未显示
【发布时间】：2021-06-11 22:31:34
【问题描述】：

我正在尝试使用 three.js 和 react-three-fiber 在我的网格上创建贴花。我相信我正确设置了网格和材质，但由于某种原因，贴花没有出现在画布上。

这是包含模型、背板和贴花的父组件。

<Canvas camera={{ position: [0, 0, 2], fov: 70 }}>
    <Lights />
    <Suspense fallback={null}>
        <Model flipped={flipped} returnMesh={setMesh} />
        <Decal mesh={mesh} />
        <Back />
    </Suspense>
</Canvas>

这是我从 .glb 文件创建 T 恤网格的组件的一部分。网格被传回给父级，然后传给 Decal 组件。

let geometry, material, mesh;

// GEOMETRY
geometry = useGLTF("/tshirt.glb").nodes.tshirt.geometry;

useEffect(() => {
    material = new THREE.MeshStandardMaterial({ color: "orange" });
    mesh = new THREE.Mesh(geometry, material);
}, []);

这就是我尝试设置贴花网格的方式：

extend({ DecalGeometry });

const Decal = ({ mesh }) => {
    let decalGeometry;

    useEffect(() => {
        if (mesh) {
            decalGeometry = new DecalGeometry(
                mesh,
                new THREE.Vector3(0, 0, 0),
                new THREE.Euler(0, 0, -1, "XYZ"),
                new THREE.Vector3(0.5, 0.5, 0.5)
            );
        }
    }, [mesh]);

    return (
        <mesh geometry={decalGeometry}>
            <meshStandardMaterial attach="material" color="red" />
        </mesh>
    );
};

我没有收到任何错误，贴花只是没有出现。我希望有人有一些见识。关于 Decal Geometry 的内容并不多，而且还没有很多关于 r3f 的具体情况。

【问题讨论】：

我不确定你的意思。这是我的另一个问题，但即使它们涉及同一个项目，它们也没有太多共同点。
我明白了。不幸的是，我还没有回答这两个问题。据我了解，它们是完全不同的。一个是关于没有显示的网格，另一个是关于没有更新的网格的旋转矩阵。

标签： reactjs three.js react-three-fiber

【解决方案1】：

在分配之前，您正在使用decalGeometry。这是因为给useEffect 的回调是在调用Decal 之后执行的。

建议修复：使用useMemo 挂钩。

例如

extend({ DecalGeometry });

const Decal = ({ mesh }) => {
    const decalGeometry = useMemo(() => {
        return new DecalGeometry(
            mesh,
            new THREE.Vector3(0, 0, 0),
            new THREE.Euler(0, 0, -1, "XYZ"),
            new THREE.Vector3(0.5, 0.5, 0.5)
        );
    }, [mesh]);

    return (
        <mesh geometry={decalGeometry}>
            <meshStandardMaterial attach="material" color="red" />
        </mesh>
    );
};

【讨论】：