DAY 30 [Day 貳拾玖] 來開發元宇宙中藥鋪吧18 - 後續發展 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 30

Web 3

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

DAY 30 [Day 貳拾玖] 來開發元宇宙中藥鋪吧18 - 後續發展

14th鐵人賽

DaYuan

2022-10-14 22:25:52

521 瀏覽

分享至

18 天過去，我們的元宇宙中藥鋪依然在裝修中，後需預計推出，
中藥 NFT 系統來完善藥材藥帖藥包藥舖的世界觀

網路上常見的 3D 展場是如和處理物件的？

使用一個 BOX 把物件包起來，替換期中的物件

import React, { createContext, useContext, Suspense, useEffect, useRef, useState } from 'react'
import { Canvas } from '@react-three/fiber'
import { OrbitControls, TransformControls, useCursor, Text, Html } from '@react-three/drei'
import { Popconfirm } from 'antd'
import 'antd/dist/antd.css'

import { useTargetStore } from '../store/Store'

export function OBJBox({ children, ...props }) {
  const setTarget = useTargetStore((state) => state.setTarget)
  const [hovered, setHovered] = useState(false)
  useCursor(hovered)

  const [position, setPosition] = useState([3, 3, 60])
  const [rotation, setRotation] = useState([0, 0, 0])
  const [scale, setScale] = useState([1, 1, 1])
  const [select, setSelect] = useState(false)
  // 相似於 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用瀏覽器 API 更新文件標題
    // document.title = `You clicked ${count} times`;
    if (props.position) {
      setPosition(props.position)
    }
    if (props.rotation) {
      setRotation(props.rotation)
    }
    if (props.scale) {
      setScale(props.scale)
    }
    // console.log(props.position)
  }, [props])

  return (
    <group {...props} position={position} rotation={rotation} scale={scale}>
      <mesh
        visible={hovered}
        // position={[0, 0, 0]}
        // rotate={props.rotate}

        onClick={(e) => {
          e.stopPropagation() //It functions just like the dom does, except there is raycasting involved. In order to prevent a mouse event from "propagating" downward, you must "stopPropagation()".
          // e.stopImmediatePropagation()
          // console.log('滑鼠右鍵', e.delta)
          // console.log('滑鼠右鍵', e)

          if (e.button === 2) {
            //如果button=1（滑鼠左鍵），button=2（滑鼠右鍵），button=0（滑鼠中間鍵）
          }
          setTarget(e.object.parent)
          // console.log(e.object.parent)
          // setTarget(e.object)
          // console.log(e.object)
          setSelect(!select)
        }}

        onContextMenu={(e) => console.log('context menu')}
        onDoubleClick={(e) => console.log('double click')}
        onWheel={(e) => console.log('wheel spins')}
        onPointerUp={(e) => console.log('up')}
        onPointerDown={(e) => console.log('down')}

        onPointerEnter={(e) => console.log('enter')} // see note 1
        onPointerLeave={(e) => console.log('leave')} // see note 1
        
        onPointerOver={(e) => {
          // Only the mesh closest to the camera will be processed
          e.stopPropagation()
          // You may optionally capture the target
          e.target.setPointerCapture(e.pointerId)
          setHovered(true)
        }}
        onPointerOut={(e) => {
          e.stopPropagation()
          // Optionally release capture
          e.target.releasePointerCapture(e.pointerId)
          setHovered(false)
        }}
        scale={10}>
        <boxGeometry />
        {/* <meshPhongMaterial color="blue" opacity={0.1} transparent /> */}
        <meshStandardMaterial transparent={true} opacity={0.5} color="orange" />

        {hovered && (
          <Html distanceFactor={0.25} position={[-0.5, 1, 0.5]}>
            <div className="tooltip">helloworld</div>
          </Html>
        )}
        {/* {select && (
          <Html distanceFactor={0.25} position={[-0.65, 1.7, 0.5]}>
            <div className="tooltip">
              Setting
              <br />
              OK NO
            </div>
          </Html>
        )} */}
      </mesh>
      {children}
    </group>
  )
}

//TODO不傳透

export function GUCBox(props) {
  const setTarget = useTargetStore((state) => state.setTarget)
  const [hovered, setHovered] = useState(false)
  useCursor(hovered)

  const [position, setPosition] = useState([3, 3, 60])
  const [rotation, setRotation] = useState([0, 0, 0])
  const [scale, setScale] = useState([1, 1, 1])
  const [select, setSelect] = useState(false)

  // 相似於 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用瀏覽器 API 更新文件標題
    // document.title = `You clicked ${count} times`;
    if (props.position) {
      setPosition(props.position)
    }
    if (props.rotation) {
      setRotation(props.rotation)
    }
    if (props.scale) {
      setScale(props.scale)
    }
    console.log(props.position)
  }, [props])

  return (
    <group {...props} position={position} rotation={rotation} scale={scale}>
      <mesh
        // position={[0, 0, 0]}
        // rotate={props.rotate}
        scale={5}
        onClick={(e) => {
          setTarget(e.object)
          setSelect(true)
        }}
        onDoubleClick={setSelect(false)}
        onPointerOver={() => setHovered(true)}
        onPointerOut={() => setHovered(false)}>
        <boxGeometry />
        <meshStandardMaterial color="orange" />
      </mesh>
    </group>
  )
}

function Dodecahedron({ time, ...props }) {
  return (
    <mesh {...props}>
      <dodecahedronGeometry />
      <meshStandardMaterial roughness={0.75} emissive="#404057" />
      <Html distanceFactor={10}>
        <div class="content">
          hello <br />
          world
        </div>
      </Html>
    </mesh>
  )
}