#

luxiaotao1123

2024-08-20 9d71e24e7982f6915e5f832512925bee9b245f35

 src/components/shelf.jsx

@@ -1,59 +1,59 @@
import { useMemo } from 'react';
import { useGLTF } from '@react-three/drei';
import { useMemo, useState, useEffect } from 'react';
import { useGLTF, useFBX } from '@react-three/drei';
import * as THREE from 'three';
import { MODEL_SHELF_SCALE } from '@/config/setting'
import { useStore } from '@/store';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const generateScene = async () => {
    const loader = new GLTFLoader();
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath('/draco/');
    loader.setDRACOLoader(dracoLoader);

    return await new Promise((resolve, reject) => {
        loader.load('/models/shelf/row.glb', function (mesh) {
            console.log(mesh);
            resolve(mesh.scene)
        })
    })
}
import Box from './box';
import * as Common from '../utils/common';

const Shelf = (props) => {
    const { position = [0, 300, 0], rotationY = 0 } = props;
    const { no, position = [0, 300, 0], rotationY = 0 } = props;
    const state = useStore();

    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath('draco/');
    useGLTF.setDecoderPath('/draco/');
    // const { scene } = useGLTF('/models/shelf/row.glb', '/draco/');
    // const { nodes, materials } = useMemo(() => {
    //     return useGLTF('/models/shelf/row.glb');
    // }, [])

    const { nodes, materials } = useGLTF('/models/shelf/row.glb');
    console.log(nodes);
    const model = useMemo(() => {
        const fbx = useFBX('/models/shelf/row.fbx');
        if (!fbx.castShadow) {
            Common.setShadow(fbx);
        }
        // Common.setColor(fbx, 0x778ca3);
        fbx.scale.set(MODEL_SHELF_SCALE.x, MODEL_SHELF_SCALE.y, MODEL_SHELF_SCALE.z);
        fbx.traverse((child) => {
            if (child.isMesh) {
                child.material.transparent = true;
                child.material.opacity = 0.8;
            }
        })
        return fbx.clone();
    }, [])


    const { nodes: nodes1, materials1, animations } = useGLTF('/models/shelf/Horse.glb');
    useEffect(() => {
        state.shelfList[no] = position;
    }, [props]);

    return (
        <>
            <group rotation-y={rotationY} position={position}>
                <primitive object={generateScene()} />
                <mesh
                {/* <primitive
                    castShadow
                    receiveShadow
                    geometry={nodes.物件_1001.geometry}
                    object={nodes.物件_1001}
                    material={materials['材质_1.002']}
                    position={[0, 2, 0.3]}
                    rotation={[Math.PI / 2, 0, Math.PI / 2]}
                    scale={70}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes1.mesh_0.geometry}
                    material={nodes1.mesh_0.material}
                    morphTargetDictionary={nodes1.mesh_0.morphTargetDictionary}
                    morphTargetInfluences={nodes1.mesh_0.morphTargetInfluences}
                />
                    position={[0, 99, 0]}
                    scale={50000}
                /> */}

                <primitive object={model} castShadow position={[0, 1, 0]} />
                {/* <mesh position={[0, 100, 0]}>
                    <boxGeometry args={[150, 200, 30]} />
                    <meshStandardMaterial color={'orange'} transparent={true} opacity={.5} />
                </mesh> */}
                {/* <Box rotationY={0} position={[0, 0, 0]} /> */}
            </group>
        </>
    )