Настройка Vite — 3D web3 serie

Привет, читатель,

Это первый пост из серии 3D-web3.
В нем мы узнаем о создании 3D-пространства (включая физику) в нашей сети и подключении к блокчейну с помощью библиотек web3.

1 — Конфиг Vite и базовый three.js
2 — Three.js (fiber & drei) — серия web3
3 — Физика пушки
4 — Web3

Vite — это современный, молниеносный инструмент для создания и объединения проектов. Он быстро стал популярным благодаря практически мгновенной компиляции кода и быстрой горячей замене модулей.

Vite использует «Rollup.js» для внутренней комплектации (отвечает за конфигурацию) и esbuild как зависимость перед комплектацией (который написан на Go).

— @Notice create-react-app использует «Webpack» для сборки.

Он был разработан «Evan You», который также создал фреймворк «Vue.js».

Настройка — откройте консоль в директории ваших проектов и запустите

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

Войти в полноэкранный режим Выйти из полноэкранного режима

Ознакомьтесь с документацией vite

npm i three

Three.js — это библиотека JavaScript с открытым исходным кодом для создания и отображения анимированной трехмерной компьютерной графики в веб-браузере с помощью WebGL.

Мы будем использовать Threejs только для того, чтобы взять некоторые встроенные объекты (более подробно мы будем использовать его в следующих статьях).

npm i @react-three/fiber

Чтобы упростить процесс разработки, мы будем работать с @react-three/fiber. Это рендерер React для Threejs в веб и react-native.

Рендерер отвечает за рендеринг компонентов React в DOM и нативные представления. Это означает, что мы можем создавать обычные компоненты React и позволить react-three-fiber заниматься преобразованием этих компонентов в threejs.

«Fiber позволяет обойтись без настройки threejs для рендеринга любого 3D-объекта».

Первый рендеринг

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 будут использоваться Hooks для упрощения логики кода.

useRef для привязки к «mesh», который является встроенным «DOM-элементом» fiber, что позволяет манипулировать объектом внутри.

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 @Заметьте, код не разделен на компоненты, как в нашем приложении Vite App

Нажмите на 3D объекты

Серия следует за 3D web — Three.js (fiber & drei) — web3 serie Проверьте демо в самом низу!

Надеюсь, это было полезно.