Vite 설정 - 3D web3 시리즈

독자 여러분,

3D-web3 시리즈의 첫 번째 글입니다.
웹에서 3D 공간(심리학 포함)을 만들고 web3 라이브러리를 사용하여 블록체인에 연결하는 방법을 배울 수 있는 곳입니다.

1 - Vite 구성 및 기본 three.js
2 -
삼 -
4 -

Vite는 비계 및 번들링 프로젝트를 위한 현대적이고 초고속 도구입니다. 거의 즉각적인 코드 컴파일과 빠른 핫 모듈 교체로 인해 빠르게 인기를 얻었습니다.

Vite는 번들링(구성 담당)을 위해 내부적으로 "Rollup.js"를 사용하고 사전 번들 종속성(Go로 작성됨)으로 esbuild를 사용합니다.

-- @Notice create-react-app uses "Webpack" internally for bundling --

"Vue.js"프레임워크를 만든 "Evan You"가 개발했습니다.

설정 - 프로젝트 디렉토리에서 콘솔을 열고 실행

npm create vite@latest my-three-react-web3-app --template react
// Follow consol instructions and select -> React -> React
// ("You're also able to use Vanilla, Vue, Svelte... and JS or TS")
cd my-three-react-web3-app
npm install
npm run dev

Check vite docs

npm i three

Three.js is an open source JavaScript library to create and display animated 3D computer graphics in a web browser using WebGL.

우리는 Threejs를 사용하여 일부 내장 객체를 가져올 것입니다(다음 기사에서 더 많이 사용할 것입니다).
npm i @react-three/fiber
개발 프로세스를 단순화하기 위해 @react-three/fiber과 함께 작업할 것입니다. 웹 및 react-native에서 threejs용 React 렌더러입니다.

The renderer is responsible for rendering React components to the DOM and native views. This means that we are able to create regular React components and let react-three-fiber handle converting those components into three.

"섬유를 사용하면 threejsset up to render를 피할 수 있습니다."

첫 번째 렌더링

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

App.js

import { Canvas } from '@react-three/fiber'
import Box from './components/Box'
import './App.css'

function App() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Box position={[-1.2, 0, 0]} />
      <Box position={[1.2, 0, 0]} />
    </Canvas>
  )
}

export default App

다음 Box 및 Sphere 구성 요소는 후크를 사용하여 코드 논리를 단순화합니다.

내부의 개체를 조작할 수 있도록 섬유에 의해 내장된 "DOM 요소"인 "메시"에 부착하려면 useRef를 사용하십시오.

useFrame은 효과 실행, 컨트롤 업데이트 등에 유용한 모든 프레임을 다시 호출합니다. 상태 및 클럭 델타를 수신합니다.

useState를 사용하여 개체를 클릭할 때 크기와 색상을 변경합니다.

Box.js

import React, { useRef, useState } from 'react'
import { useFrame } from '@react-three/fiber'

const Box = (props) => {
    // This reference will give us direct access to the mesh
    const mesh = useRef()
    // Set up state for the hovered and active state
    const [hovered, setHover] = useState(false)
    const [active, setActive] = useState(false)
    // Subscribe this component to the render-loop, rotate the mesh every frame
// Adding rotation grade per each frame
    useFrame((state, delta) => {
        mesh.current.rotation.x += 0.01
        mesh.current.rotation.y += 0.01
    })
    // Return view, these are regular three.js elements expressed in JSX
    return (
        <mesh
            {...props}
            ref={mesh}
            scale={active ? 1.5 : 1}
            onClick={(e) => {
                setActive(!active)
                setHover(!hovered)
            }}
        >
            <boxGeometry args={[1, 1, 1]} />
            <meshStandardMaterial color={hovered ? 'green' : 'blue'} />
        </mesh>
    )
}
export default Box;

Sphere.js
Box 구성 요소로 작동하며 고유한 차이점은 메쉬 요소 내부에 있습니다.

import React, { useRef, useState } from 'react'
import { useFrame } from '@react-three/fiber'

function Sphere(props) {
    // This reference gives us direct access to the THREE.Mesh object
    const ref = useRef();
    // Hold state for hovered and clicked events
    const [hovered, setHover] = useState(false);
    const [active, setActive] = useState(false);
    // Subscribe this component to the render-loop, rotate the mesh every frame
// Adding rotation grade per each frame
    useFrame((state, delta) => (ref.current.rotation.y += 0.01));
    // Return the view, these are regular Threejs elements expressed in JSX
    return (
        <mesh
            {...props}
            ref={ref}
            scale={active ? 4 : 1}
            onClick={(e) => {
                setActive(!active);
                setHover(!hovered);
            }}
        >
            <sphereBufferGeometry args={[0.7, 30, 30]} attach="geometry" />
            <meshBasicMaterial
                wireframe
                attach="material"
                color={hovered ? "yellow" : "pink"}
            />
        </mesh>
    );
}

export default Sphere;

이 앱을 개발하는 시리즈를 만들고 있으며 곧 새 게시물이 게시될 예정입니다.

SandBox 데모 @Notice 코드는 Vite 앱에서와 같이 구성 요소로 분할되지 않습니다.

3D 개체를 클릭하십시오.


시리즈는 하단의 데모 확인에서 이어집니다!

도움이 되었기를 바랍니다.