Threejs 贴花未显示

Question

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

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

<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>
    );
};

我没有收到任何错误，只是贴花没有出现。我希望有人有一些见识。关于 threejs 的 Decal Geometry 的内容不多，更不用说 r3f 了。

Answer 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>
    );
};

Threejs 贴花未显示

Threejs Decal not showing

three.js

reactjs

react-three-fiber