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';
|
import Box from './box';
|
import * as Common from '../utils/common';
|
|
const Shelf = (props) => {
|
const { no, position = [0, 300, 0], rotationY = 0 } = props;
|
const state = useStore();
|
|
// const { nodes, materials } = useMemo(() => {
|
// return useGLTF('/models/shelf/row.glb');
|
// }, [])
|
|
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);
|
return fbx.clone();
|
}, [])
|
|
useEffect(() => {
|
state.shelfList[no] = position;
|
}, [props]);
|
|
return (
|
<>
|
<group rotation-y={rotationY} position={position}>
|
{/* <primitive
|
castShadow
|
receiveShadow
|
object={nodes.物件_1001}
|
material={materials['材质_1.002']}
|
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>
|
</>
|
)
|
}
|
|
export default Shelf;
|