没有显示贴花

Question

我试图在我的网格上创建一个贴花使用three.js和反应-三纤维。我相信我正确地设置了网格和材料，但由于某种原因，贴花没有出现在画布上。

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

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

我没有得到任何错误，贴花只是没有出现。我希望有人有一些见解。没有太多关于贴花几何体与3J在那里，甚至更具体的r3f。

Answer 1

在指定几何图形之前，您正在使用它。这是因为对useffect的回调是在调用deap之后执行的。

建议的修复方法：使用usemohook。

例如。

js prettyprint-override">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>
    );
};