iT邦幫忙

2022 iThome 鐵人賽

DAY 16
0
Web 3

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

[Day 拾陸] 來開發元宇宙中藥鋪吧-4 來做扁額吧

  • 分享至 

  • xImage
  •  

來做扁額吧

import * as THREE from 'three'
import { useLayoutEffect } from 'react'
import { Canvas, applyProps } from '@react-three/fiber'
import { AccumulativeShadows, RandomizedLight, OrbitControls, Environment, useGLTF } from '@react-three/drei'
import { FlakesTexture } from 'three-stdlib'

export default function GoldenText(props) {
  const { scene, materials } = useGLTF('/元藥堂.gltf')
  // const { scene, materials } = useGLTF('https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/models/suzanne-high-poly/model.gltf')
  useLayoutEffect(() => {
    scene.traverse((obj) => obj.isMesh && (obj.receiveShadow = obj.castShadow = true))
    applyProps(materials.Golden, {
      color: 'orange',
      roughness: 0,
      normalMap: new THREE.CanvasTexture(new FlakesTexture(), THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping),
      'normalMap-repeat': [40, 40],
      normalScale: [0.05, 0.05]
    })
    applyProps(materials.TexTboxBase, {
      color: '#1C1F1E',
      roughness: 0,
      normalMap: new THREE.CanvasTexture(new FlakesTexture(), THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping),
      'normalMap-repeat': [40, 40],
      normalScale: [0.05, 0.05]
    })

    // applyProps(materials.insideBase, {
    //   color: 'FFBD33',
    //   roughness: 0,
    //   normalMap: new THREE.CanvasTexture(new FlakesTexture(), THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping),
    //   'normalMap-repeat': [40, 40],
    //   normalScale: [0.05, 0.05]
    // })
  })
  return <primitive object={scene} {...props} />
}

DEMO : https://codesandbox.io/s/jin-se-pai-bian-hou-chu-li-xgml19


上一篇
[Day 拾伍] 來開發元宇宙中藥鋪吧-3 如何與組件進行互動?
下一篇
[Day 拾柒] 來開發元宇宙中藥鋪吧-5 掌櫃的我的藥呢?
系列文
當 APP develop 遇上 web3 與 Metaverse 浪潮 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言