#

luxiaotao1123

2024-04-23 f57db66f7c1ead69b0772132330edb30411e6373

#

 src/assets/data/shelf.js

@@ -1,18 +1,14 @@
const shelfData = [
  {
    x: 200,
    y: -1000,
    width: 200,
    height: 2000,
    tunnelNumber: 'T1',
    no: '1-1-1',
    position: [0, 0, 0],
    rotationY: Math.PI / 2,
  },
  {
    x: 200,
    y: -50,
    width: 1300,
    height: 100,
    tunnelNumber: 'T2',
  },
    no: '2-1-1',
    position: [100, 0, 0],
    rotationY: Math.PI / 2,
  }
];

export default shelfData;

 src/components/shelf.jsx

@@ -1,28 +1,27 @@
import { useState, useMemo, useRef, useEffect } from 'react';
import { useMemo } from 'react';
import { useGLTF } from '@react-three/drei';
import { MODEL_SHELF_SCALE } from '@/config/setting';
import * as Common from '../utils/common';
import * as THREE from 'three';
import { MODEL_SHELF_SCALE } from '@/config/setting'

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

    const model = useMemo(() => {
        const fbx = useGLTF('/models/shelf/row.glb');
        if (!fbx.castShadow) {
            Common.setShadow(fbx);
        }
        fbx.scale.set(MODEL_SHELF_SCALE, MODEL_SHELF_SCALE, MODEL_SHELF_SCALE);
        return fbx.clone();
    }, [])
    const { scene } = useGLTF('/models/shelf/row.glb');
    console.log(scene);

    useEffect(() => {

    }, []);
    // 在useMemo内部克隆模型，以避免影响到原始模型
    const model = useMemo(() => scene.clone(), [scene]);

    return (
        <>
            <group rotation-y={rotationY} position={position}>
                <primitive object={model} castShadow />
                {/* 在primitives内设置模型的比例和阴影属性 */}
                <primitive
                    object={model}
                    castShadow
                    receiveShadow
                    scale={[MODEL_SHELF_SCALE, MODEL_SHELF_SCALE, MODEL_SHELF_SCALE]}
                />
            </group>
        </>
    )