文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用ReactJS动态地呈现和编辑三维模型？

问如何使用ReactJS动态地呈现和编辑三维模型？
EN

Stack Overflow用户

提问于 2022-06-03 13:40:39

回答 1查看 208关注 0票数 0

我是新的Three.js，我正在建立一个三维产品配置使用反应-三纤维。我遵循了一些教程，能够实时呈现和编辑纹理/颜色，但仍然无法找到一种方法来动态加载任何3D对象并在执行过程中对其进行编辑。现在一切都是硬编码的。任何代码或任何人都可以指出我的正确方向，我如何使它的动态，以便它可以处理任何产品和用户可以修改任何元素的3D对象从网站。现在我就是这样做的。

const Franklin = () => {
    const group = useRef();
    const { nodes, materials } = useGLTF('/wes/franklin/franklin.glb');
    const [
        backMap,
        backEmissiveMap,
        backDisplacementMap,
        backMetalnessMap,
        backNormalMap,
        backRoughnessMap,
    ] = useLoader(TextureLoader, [
        '/wes/franklin/textures/Franklin_back_BaseColor.png',
        '/wes/franklin/textures/Franklin_back_Emissive.png',
        '/wes/franklin/textures/Franklin_back_Height.png',
        '/wes/franklin/textures/Franklin_back_Metallic.png',
        '/wes/franklin/textures/Franklin_back_Normal.png',
        '/wes/franklin/textures/Franklin_back_Roughness.png',
    ]);

    const [
        frameMap,
        frameEmissiveMap,
        frameDisplacementMap,
        frameMetalnessMap,
        frameNormalMap,
        frameRoughnessMap,
    ] = useLoader(TextureLoader, [
        '/wes/franklin/textures/Franklin_frame_BaseColor.png',
        '/wes/franklin/textures/Franklin_frame_Emissive.png',
        '/wes/franklin/textures/Franklin_frame_Height.png',
        '/wes/franklin/textures/Franklin_frame_Metallic.png',
        '/wes/franklin/textures/Franklin_frame_Normal.png',
        '/wes/franklin/textures/Franklin_frame_Roughness.png',
    ]);
    const [
        capMap,
        capEmissiveMap,
        capDisplacementMap,
        capMetalnessMap,
        capNormalMap,
        capRoughnessMap,
    ] = useLoader(TextureLoader, [
        '/wes/franklin/textures/Franklin_cap_BaseColor.png',
        '/wes/franklin/textures/Franklin_cap_Emissive.png',
        '/wes/franklin/textures/Franklin_cap_Height.png',
        '/wes/franklin/textures/Franklin_cap_Metallic.png',
        '/wes/franklin/textures/Franklin_cap_Normal.png',
        '/wes/franklin/textures/Franklin_cap_Roughness.png',
    ]);
    const [
        seatMap,
        seatEmissiveMap,
        seatDisplacementMap,
        seatMetalnessMap,
        seatNormalMap,
        seatRoughnessMap,
    ] = useLoader(TextureLoader, [
        '/wes/franklin/textures/Franklin_seat_BaseColor.png',
        '/wes/franklin/textures/Franklin_seat_Emissive.png',
        '/wes/franklin/textures/Franklin_seat_Height.png',
        '/wes/franklin/textures/Franklin_seat_Metallic.png',
        '/wes/franklin/textures/Franklin_seat_Normal.png',
        '/wes/franklin/textures/Franklin_seat_Roughness.png',
    ]);

    return (
        <group ref={group} dispose={null}>
            <mesh
                geometry={nodes.Bottom_Bars001.geometry}
                material={nodes.Bottom_Bars001.material}
            >
                <meshStandardMaterial
                    map={frameMap}
                    emissiveMap={frameEmissiveMap}
                    displacementMap={frameDisplacementMap}
                    metalnessMap={frameMetalnessMap}
                    normalMap={frameNormalMap}
                    roughnessMap={frameRoughnessMap}
                />
            </mesh>
            <mesh
                geometry={nodes.Back_Seat002.geometry}
                material={nodes.Back_Seat002.material}
            >
                <meshStandardMaterial
                    map={backMap}
                    emissiveMap={backEmissiveMap}
                    displacementMap={backDisplacementMap}
                    metalnessMap={backMetalnessMap}
                    normalMap={backNormalMap}
                    roughnessMap={backRoughnessMap}
                />
            </mesh>
            <mesh geometry={nodes.Base001.geometry} material={nodes.Base001.material}>
                <meshStandardMaterial
                    map={frameMap}
                    emissiveMap={frameEmissiveMap}
                    displacementMap={frameDisplacementMap}
                    metalnessMap={frameMetalnessMap}
                    normalMap={frameNormalMap}
                    roughnessMap={frameRoughnessMap}
                />
            </mesh>
            <mesh geometry={nodes.Seat001.geometry} material={nodes.Seat001.material}>
                <meshStandardMaterial
                    map={seatMap}
                    emissiveMap={seatEmissiveMap}
                    displacementMap={seatDisplacementMap}
                    metalnessMap={seatMetalnessMap}
                    normalMap={seatNormalMap}
                    roughnessMap={seatRoughnessMap}
                />
            </mesh>
            <mesh geometry={nodes.Caps003.geometry} material={nodes.Caps003.material}>
                <meshStandardMaterial
                    map={capMap}
                    emissiveMap={capEmissiveMap}
                    displacementMap={capDisplacementMap}
                    metalnessMap={capMetalnessMap}
                    normalMap={capNormalMap}
                    roughnessMap={capRoughnessMap}
                />
            </mesh>
        </group>
    );
};

reactjs

three.js

webgl

react-three-fiber

react-three-drei

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-12-02 04:58:50

我是这样做的，从GLTFLoader获取场景并遍历它，将纹理应用到特定的节点，最后将这个场景作为对象传递给原语。取自纯three.js方法。

scene.traverse((node) => {
    if (node.isMesh) {
        const checkItem = selectedItems.find((itm) =>
            node.name.includes(itm.value)
        );

        if (checkItem) {
            const fabric = items.filter(
                (item) => item.name.value === checkItem.value
            );
            var tempMaterial = new MeshStandardMaterial({
                ...node.material,
                map: loadTexture(fabric[0].texture),
            });
            node.material = tempMaterial;
        }
    }
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72490498

复制

相似问题

问如何使用ReactJS动态地呈现和编辑三维模型？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用ReactJS动态地呈现和编辑三维模型？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用ReactJS动态地呈现和编辑三维模型？
EN