我們該如何在元宇宙建立一個中藥鋪呢？- 如何簡化檔案與組件

首先我們看到昨天產出的檔案，部份省略

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export function Model(props) {
  const { nodes, materials } = useGLTF('/modelCupboard.gltf')
  return (
    <group {...props} dispose={null}>
    .......略
      <group position={[-2.78, 8.75, -0.17]} rotation={[0.66, 0, 0]} scale={[1, 0.21, 1]}>
        <mesh geometry={nodes.Cube003_1.geometry} material={materials['Material.008']} />
        <mesh geometry={nodes.Cube003_2.geometry} material={materials['Material.009']} />
      </group>
      <group position={[-0.84, 8.75, -0.17]} rotation={[0.66, 0, 0]} scale={[1, 0.21, 1]}>
        <mesh geometry={nodes.Cube004_1.geometry} material={materials['Material.010']} />
        <mesh geometry={nodes.Cube004_2.geometry} material={materials['Material.011']} />
      </group>
      <group position={[1.21, 8.75, -0.17]} rotation={[0.66, 0, 0]} scale={[1, 0.21, 1]}>
        <mesh geometry={nodes.Cube005_1.geometry} material={materials['Material.012']} />
        <mesh geometry={nodes.Cube005_2.geometry} material={materials['Material.013']} />
      </group>
      <group position={[3.26, 8.75, -0.17]} rotation={[0.66, 0, 0]} scale={[1, 0.21, 1]}>
        <mesh geometry={nodes.Cube006_1.geometry} material={materials['Material.014']} />
.......略
      </group>
    </group>
  )
}

其中，我們可以看到 底下四個大抽屜的 position

position={[3.26, 8.75, -0.17]}
position={[-0.84, 8.75, -0.17]} 
position={[-2.78, 8.75, -0.17]}
position={[1.21, 8.75, -0.17]}

沒錯，相信大家已經發現，既然既然在 Blender 可以用 陣列 產生抽屜，
我們就可以藉此取得 position ，再使用 JS 來建立物件！

  function 大抽屜() {
    let row = [-1.11, -0.38, 0.36, 1.09]
    return row.map((item) => <BigBox lineW={item} />)
  }

function BigBox({ lineW, ...props }) {   
    return (
      <group
        position={[lineW, 0.18, hovered ? -0.1 : -0.13]}
        scale={[0.35, 0.13, 0.45]}>
        <group position={[0, 0, -0.13]}>
          <mesh position={[-0.01, -0.13, 1.01 - 0.05]}>
            <boxGeometry args={[0.3, 1, 0.5]} />
            <meshStandardMaterial transparent opacity={0.01} color={'orange'} />
          </mesh>

          {/* <ModelCMD position={[0, 0, 3]} scale={[0.7, 1.5, 0.6]} rotation={[0, -Math.PI / 2, 0]} /> */}

          <mesh
            onPointerOver={(event) => hoverContent(true)}
            onPointerOut={(event) => hoverContent(false)}
            onClick={(event) => clickContent(!clickedContent)}
            position={[-0.01, -0.13, 0.15]}>
            <ModelCMD position={[0, 0, 0.14]} scale={[1, 0.7, 0.7]} rotation={[-Math.PI / 2 + 0.5, -Math.PI / 2, 0]} />

            <boxGeometry args={[2, 1, 0.5]} />
            <meshStandardMaterial transparent opacity={0.1} color={hoveredContent ? 'Yellow ' : getRandomColor()} />
          </mesh>
          <mesh geometry={nodes.Cube017.geometry} material={materials['Old Wooden Safe Box Wood 2.001']} />
          <mesh geometry={nodes.Cube017_1.geometry} material={materials['Old Wooden Safe Box Wood 2.001']} />
          <mesh
            geometry={nodes.Torus004.geometry}
            material={materials['Old Wooden Safe Box Wood 2.001']}
            position={[0.04, -0.21, 1.02]}
            rotation={[Math.PI / 2, 0, 0]}
            scale={[0.06, 0.05, 0.18]}
          />
          <mesh
            geometry={nodes.底座004.geometry}
            material={materials['Old Wooden Safe Box Wood 2.001']}
            position={[0.04, -0.03, 1]}
            rotation={[Math.PI / 2, 0, 0]}
            scale={[0.05, 0.01, 0.14]}
          />
        </group>
      </group>
    )
  }

接者我們回到上篇

沒錯，實際上我們只需要上面亮起來的三個部件，
利用 陣列 功能就可以複製出所有的櫃子

重新輸出一個 只有基本元件的檔案，這樣既減少了檔案大小，也讓之後可以有更多的互動性