iT邦幫忙

2022 iThome 鐵人賽

DAY 13
0
Web 3

當 APP develop 遇上 web3 與 Metaverse 浪潮 系列 第 13

[Day 拾參] 如何導入 3D 模型 - 3 實戰 & 來開發元宇宙中藥鋪吧-1

  • 分享至 

  • xImage
  •  

我們該如何在元宇宙建立一個中藥鋪呢?

首先讓我們來發行中藥NFT

第一步,上 sketchfab 尋找素材
第二步,你會發現找不到中藥櫃
第三步,下載並打開 Blender
第四步,按照教學開始製作你獨一無二的的中藥櫃NFT

理想的中藥櫃

中藥櫃完成圖

誒???抽屜怎麼少這麼多??

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

接者將檔案按照上ㄧ篇的流程

gltf-pipeline -i WH.gltf -o modelDigital_watch.gltf -d

Total: 398.655ms


npx gltfjsx modelDigital_watch.gltf
group removed (empty)
 Done:  ModelDigital_watch.js

這樣就可以得到我們想要的 GLTF 資產轉換為聲明性和可重用的react-three-fiber JSX 組件。

/*
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.58, 0.43, -0.34]} rotation={[0, -0.08, 0]} scale={0.78}>
        <mesh geometry={nodes.Plane002_1.geometry} material={materials['sach 1.001']} />
        <mesh geometry={nodes.Plane002_2.geometry} material={materials['sach.001']} />
        <mesh geometry={nodes.Plane002_3.geometry} material={materials['Material.030']} />
      </group>
      <group position={[-0.01, -6.61, -0.4]} scale={[1, 1, 0.65]}>
        <mesh geometry={nodes.Cube014.geometry} material={materials['Old Wooden Safe Box Wood 2.001']} />
        <mesh geometry={nodes.Cube014_1.geometry} material={materials['PAPER.007']} />
      </group>
      <mesh geometry={nodes['6b2dba255684d53f0ae3226a50287668'].geometry} material={materials['6b2dba255684d53f0ae3226a50287668']} position={[-1.54, -1.72, -1.74]} rotation={[Math.PI / 2, 0, 0]} scale={3.95} />
      <mesh geometry={nodes.Structure_Mprops_0002.geometry} material={materials.Mprops} position={[-0.37, 1.54, -0.26]} rotation={[0, 0.29, 0]} scale={0.09} />
      <mesh geometry={nodes.Cube002.geometry} material={materials['Material.015']} position={[-4.15, -4.17, -0.41]} rotation={[0, 0.07, 0]} scale={[1, 1, 0.7]} />
      <mesh geometry={nodes.antique_ceramic_vase_01.geometry} material={materials.OOG} position={[-4.24, -3.88, 0.04]} scale={7.82} />
      <mesh geometry={nodes.Structure_MfurnituresLeft_0002.geometry} material={materials.MfurnituresLeft} position={[-1.31, -3.71, -0.04]} scale={0.06} />
      <mesh geometry={nodes.Structure_Mprops_0001.geometry} material={materials.Mprops} position={[-2.02, 1.85, -0.3]} rotation={[0, 1.48, 0]} scale={0.09} />
      <mesh geometry={nodes.Structure_Mprops_0003.geometry} material={materials.Mprops} position={[-4.61, 2.15, -0.6]} rotation={[0, -0.44, 0]} scale={0.09} />
      <group position={[4.07, 0.22, -0.11]} rotation={[0, -0.08, 0]} scale={0.78}>
        <mesh geometry={nodes.Plane001_1.geometry} material={materials['sach.001']} />
        <mesh geometry={nodes.Plane001_2.geometry} material={materials['Material.030']} />
      </group>
      <group position={[1.71, -4.14, -0.02]} rotation={[0, -0.08, 0]} scale={0.98}>
        <mesh geometry={nodes.Plane003_1.geometry} material={materials['sach 1.001']} />
        <mesh geometry={nodes.Plane003_2.geometry} material={materials['sach.001']} />
        <mesh geometry={nodes.Plane003_3.geometry} material={materials['Material.030']} />
        <mesh geometry={nodes.Plane003_4.geometry} material={materials['sach 1.002']} />
        <mesh geometry={nodes.Plane003_5.geometry} material={materials['sach.002']} />
      </group>
      <group position={[-4.71, 8.4, 0]} scale={[1, 0.21, 1]}>
        <mesh geometry={nodes.Cube_1.geometry} material={materials['Material.002']} />
        <mesh geometry={nodes.Cube_2.geometry} material={materials['Material.001']} />
      </group>
      <group position={[-4.71, 8.8, 0]} rotation={[0, -0.15, 0]} scale={[1, 0.21, 1]}>
        <mesh geometry={nodes.Cube001_1.geometry} material={materials['Material.003']} />
        <mesh geometry={nodes.Cube001_2.geometry} material={materials['Material.004']} />
      </group>
      <group position={[-4.71, 9.22, -0.17]} scale={[1, 0.21, 1]}>
        <mesh geometry={nodes.Cube002_1.geometry} material={materials['Material.006']} />
        <mesh geometry={nodes.Cube002_2.geometry} material={materials['Material.007']} />
      </group>
      <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']} />
        <mesh geometry={nodes.Cube006_2.geometry} material={materials['Material.016']} />
      </group>
    </group>
  )
}

useGLTF.preload('/modelCupboard.gltf')

是不是有很多看起來很像的元件呢....XD

明天會說明如何簡化檔案與組件,並添加互動性


上一篇
[Day 拾貳] 如何導入 3D 模型 - 1 格式轉換
下一篇
[Day 拾肆] 來開發元宇宙中藥鋪吧-2 如何簡化檔案與組件
系列文
當 APP develop 遇上 web3 與 Metaverse 浪潮 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言