Погружение в React и Three.js с использованием react-three-fiber

Сегодня мы узнаем, как настраивать и использовать react-three-fiber для создания и отображения 3D-моделей и анимации в приложениях React и React Native.

Это руководство предназначено для разработчиков, которые хотят узнать больше об анимации 3D-моделей в Интернете с помощью React, а также для всех, у кого были ограничения с Three.js, такие как невозможность создания холста, привязки пользовательских событий, таких как события click , и запуск цикла рендеринга, react-three-fiber . react-three-fiber поставляется с этими методами. Мы будем создавать 3D-модель, чтобы лучше понять, как создавать 3D-модели Three.js с использованием react-three-fiber .

Начало работы с react-three-fiber

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

react-three-fiber — это средство рендеринга React для Three.js в Интернете и нативное, оно повышает скорость создания 3D-моделей и анимации с помощью Three.js, некоторые примеры сайтов с 3D-моделями и анимацией. можно найти здесь. react-three-fiber сокращает время, затрачиваемое на анимацию, благодаря своим повторно используемым компонентам, событиям привязки и циклу рендеринга. Сначала давайте посмотрим, что такое Three.js.

react-three-fiber позволяет нам создавать компоненты кода threeJS , используя состояние React, хуки и реквизиты, а также включает следующие элементы:

Как использовать react-three-fiber

Чтобы использовать react-three-fiber , вы начинаете с использования следующих команд:

НПМ

 npm i three react-three-fiber

ПРЯЖА

 yarn add three react-three-fiber

Примечание . Для работы react-three-fiber вам необходимо установить three (Three.js), как мы сделали выше.

Создание модели React 3D Ludo Dice и анимационного проекта

Здесь мы собираемся построить 3D-модель игральных костей ludo, используя react-three-fiber , как показано в видео ниже.

Мы будем использовать create-react-app для инициализации нашего проекта, для этого давайте выполним команду ниже на нашем терминале.

 create-react-app react-three-fiber-ludo-model

Приведенная выше команда инициализирует проект React на нашем локальном компьютере, затем давайте cd в каталог и установим наши пакеты react-three-fiber и three .

 cd react-three-fiber-ludo-model npm i three react-three-fiber

После того, как пакеты установлены, давайте запустим наш сервер разработки с помощью команды

 npm start

Приведенная выше команда должна запустить наш сервер разработки проекта в нашем браузере. Затем давайте откроем наш проект в выбранном нами текстовом редакторе, внутри папки src нашего проекта удалим следующие файлы: App.css , App.test.js , serviceWorker.js и setupTests.js . Далее давайте удалим весь код, который ссылается на удаленные файлы в нашем App.js

Для этого проекта нам понадобится компонент Box для наших кубиков ludo и наш компонент App , предоставленный React.

Создание компонента Box

Компонент Box будет содержать форму для наших кубиков ludo, изображение кубика ludo и состояние, чтобы он всегда вращался. Во-первых, давайте импортируем все пакеты, которые нам нужны для нашего компонента Box ниже.

 import React, { useRef, useState, useMemo } from "react"; import { Canvas, useFrame } from "react-three-fiber"; import * as THREE from "three"; import five from "./assets/five.png";

В приведенном выше коде мы импортируем useRef , useState и useMemo . Мы будем использовать хук useRef для доступа к сетке игральных костей и хук useState для проверки активного состояния игральных костей. useMemo будет использоваться для возврата числа на кубике. Затем мы импортируем Canvas и useFrame из react react-three-fiber , canvas используется для отрисовки графики в браузере, а useFrame позволяет компонентам подключаться к циклу рендеринга, это позволяет одному компоненту рендерить поверх содержание другого. Затем мы импортировали пакет three , а затем импортировали статическое изображение игральных костей ludo.

Далее нам нужно написать логику для нашего компонента Box . Во-первых, мы начнем с создания функционального компонента и добавим состояние к нашему компоненту, давайте сделаем это ниже.

 const Box = (props) => { const mesh = useRef(); const [active, setActive] = useState(false); useFrame(() => { mesh.current.rotation.x = mesh.current.rotation.y += 0.01; }); const texture = useMemo(() => new THREE.TextureLoader().load(five), []); return ( <Box /> ); }

В приведенном выше коде мы создаем компонент Box с пропсами, затем мы создаем ссылку, называемую mesh , используя хук useRef , мы сделали это, чтобы каждый раз возвращать одну и ту же сетку.

Сетка — это визуальный элемент в сцене, это 3D-объект, который составляет треугольный многоугольник, он обычно строится с использованием геометрии, которая используется для определения формы модели, и материала , который определяет внешний вид модели, вы можете узнать о сетке можно здесь. Вы также можете узнать больше о useRef здесь.

После инициализации mesh нам нужно инициализировать состояние для нашего приложения с помощью хука useState , здесь мы устанавливаем для зависания и активного состояния приложения значение false.

Затем мы используем хук useFrame из react react-three-fiber для вращения меша (игра в кости), используя приведенный ниже код.

 mesh.current.rotation.x = mesh.current.rotation.y += 0.01;

Здесь мы вращаем текущую позицию меша каждые 0,01 секунды, это сделано для того, чтобы придать вращению хорошую анимацию.

 const texture = useMemo(() => new THREE.TextureLoader().load(five), []);

В приведенном выше коде мы создаем константу с именем texture и передаем хук useMemo в качестве функции для загрузки нового броска кубиков, здесь useMemo для запоминания изображения кубика и его номера. Вы можете узнать о useMemo здесь.

Затем мы хотим отобразить компонент Box в браузере и добавить наши события, мы делаем это ниже.

 const Box = (props) => { return ( <mesh {...props} ref={mesh} scale={active ? [2, 2, 2] : [1.5, 1.5, 1.5]} onClick={(e) => setActive(!active)} > <boxBufferGeometry args={[1, 1, 1]} /> <meshBasicMaterial attach="material" transparent side={THREE.DoubleSide}> <primitive attach="map" object={texture} /> </meshBasicMaterial> </mesh> ); }

В приведенном выше коде мы возвращаем наш компонент Box и оборачиваем его в mesh , передаем все свойства компонента Box с помощью оператора распространения, а затем ссылаемся на меш с помощью хука useRef . Затем мы используем свойство scale из Three.js, чтобы установить размер поля для игральных костей, когда он активен, равным 2 и 1,5, когда он не активен. И последнее, но не менее важное: мы добавили событие onClick для установки active state , если оно не установлено по умолчанию.

 <boxBufferGeometry args={[1, 1, 1]} />

Чтобы отобразить поле для игральных костей, мы отрендерили компонент boxBufferGeometry из Three.js, boxBufferGeometry помогает нам рисовать линии и точки, такие как блоки, мы использовали аргумент args для передачи конструкторов, таких как размер геометрии блока.

 <meshBasicMaterial attach="material" transparent side={THREE.DoubleSide}>

meshBasicMaterial из Three.js используется для рисования геометрии в простой форме. Здесь мы передали атрибут attach и передали реквизиты THREE.DoubleSide в атрибут side . THREE.DoubleSide определяет стороны или пространства, которые должны отображаться с помощью react-three-fiber .

 <primitive attach="map" object={texture} />

primitive компонент от Three.js используется для рисования 3D-графиков. Мы прикрепили свойство карты, чтобы сохранить первоначальную форму игральных костей. Далее мы собираемся визуализировать наш компонент Box в файле App.js и завершить нашу трехмерную коробку для игральных костей. Ваш компонент должен выглядеть примерно так, как показано на рисунке ниже.

Рендеринг 3D Ludo Dice Box

В этом разделе мы собираемся визуализировать наш компонент Box в нашем App.js и завершить наш 3D ludo box, для этого сначала давайте создадим компонент App и обернем его тегом Canvas , это для визуализации наших 3D-моделей, давайте сделаем это ниже.

 const App = () => { return ( <Canvas> </Canvas> ); } export default App;

Далее добавим свет в коробки, react-three-fiber предоставляет нам три компонента для освещения наших моделей, они следующие

• ambientLight
  Это используется для одинакового освещения всех объектов в сцене или модели, оно принимает реквизиты, такие как интенсивность света, это будет освещать тело игральных костей.
• spotLight
  Этот свет излучается с одного направления, и он увеличивается по мере увеличения размера объекта, это будет освещать точки игральных костей.
• pointLight
  Это работает аналогично свету лампочки, свет излучается из одной точки во все стороны, это будет необходимо для активного состояния нашего приложения.

Давайте реализуем вышеизложенное в нашем приложении ниже.

 const App = () => { return ( <Canvas> <ambientLight intensity={0.5} /> <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} /> <pointLight position={[-10, -10, -10]} /> </Canvas> ); } export default App;

В приведенном выше коде мы импортировали компонент ambientLight из react react-three-fiber и добавили к нему интенсивность 0,5, затем мы добавили положение и угол к нашим компонентам spotLight и pointLight . Последним шагом в нашем приложении является визуализация нашего компонента коробки и добавление позиции в коробки игральных костей ludo, мы сделаем это в коде ниже.

 <Box position={[-1.2, 0, 0]} /> <Box position={[2.5, 0, 0]} />

Когда вы закончите, ваши игральные кости ludo 3D должны выглядеть примерно так, как показано на рисунке ниже:

Рабочая демоверсия доступна на CodeSandbox.

Заключение

react-three-fiber упростил создание 3D-моделей и анимаций для приложений React и React Native. Создавая нашу 3D-игру для игры в кости, мы узнали об основах Three.js, а также о его компонентах и ​​преимуществах react-three-fiber , а также о том, как его использовать.

Вы можете пойти дальше, создавая 3D-модели и анимацию в своих приложениях React и Native, самостоятельно используя react-three-fiber . Буду рад увидеть, какие новинки вы придумаете!

Вы можете прочитать больше о Three.js и react-three-fiber в ссылках ниже.

Связанные ресурсы

• Документация Three.js
• Основы Three.js
• Репозиторий React-Three-fiber GitHub от Poimandres
• документация по реакции на три волокна
• Официальная документация React Hooks (useState, useMemo и т. д.)