Демонстрация кода three.js в рабочей среде Create React App

В последней статье мы объяснили, что такое three.js и как это работает в React. Напомним основные понятия.

  • Three.js — это 3D-библиотека JavaScript, которая отображает 3D-контент на веб-странице. Он направлен на создание простой в использовании, легкой, кросс-браузерной, универсальной 3D-библиотеки.
  • API Three хорошо работает в рабочей среде Create React App.
  • react-three-fiber (@react-three/fiber) — это средство визуализации React для three.js. Это позволяет нам писать three.js с использованием JSX, что более декларативно. Оболочка React также обрабатывает множество вещей за сценой, например, изменение размера холста и удаление несмонтированных объектов.

Мы нарисовали анимированный куб, вращающийся на черном фоне. В этой статье мы пойдем еще дальше и нарисуем вращающуюся ферму на фоне леса, как показано на заголовке.

Файлы 3D-моделей в формате glTF

Трехмерные модели имеют множество форматов файлов, таких как glTF (формат передачи графического языка), FBX (FilmBoX),и OBJ (или .OBJ). Среди них glTF является самым популярным.

glTF, обычно относящийся к glTF 2.0, хранит информацию о 3D-модели в формате JSON. Это открытый стандартный формат файла для 3D-сцен и моделей, который поддерживает геометрию 3D-моделей, внешний вид, иерархию графа сцены и анимацию. Он имеет два расширения файлов: .gltf (формат файла JSON/ASCII) и .glb (формат двоичного файла).

Создание модели .gltf — это отдельная тема. Здесь мы работаем с существующим файлом .gltf, используя three.js.

https://sketchfab.com/3d-models — магазин для покупки 3D-моделей, где есть несколько бесплатных моделей. Это ссылка для получения бесплатной фермы:

Скачав zip-файл, разархивируем его в папку public в рабочей среде Create React App, которую мы собрали из последней статьи.

В папке free_farm есть ряд ресурсов:

  • license.txt: Это файл лицензии.
  • scene.bin: Это двоичный файл, который содержит данные геометрии и анимации, а также другие данные на основе буфера.
  • scene.gltf: это полное описание сцены, содержащееся в файле glTF в формате JSON, которое включает иерархию узлов, материалы, камеры, а также информацию дескриптора для сеток, анимации и других конструкций.

  • textures: это папка для файлов изображений, в частности, 12 файлов png в бесплатной ферме.

Отображение 3D-модели

Вот src/App.js, который отображает 3D-модель, free_farm:

В строках 5–8 определяется компонент FreeFarm. Он вызывает хук useLoader из @react-three/fiber. free_farm в папке public загружается в константу, gltf (строка 6).

Примитивы Three обычно представляют собой 3D-формы, которые генерируются во время выполнения с набором параметров. В строке 7 создается элемент primitive с gltf.scene. Пропсы (args) могут включать непримитивные значения, такие как геометрия, материал, положение, масштаб и т. д.

Поскольку загрузка может занять некоторое время, Suspense используется для отображения пустого экрана (null) в качестве запасного варианта (строка 13). После загрузки 3D-модели FreeFarm (строка 14) будет отображаться на Canvas (строки 12–16), что отображает компоненты three.

Выполняем npm start, видим в браузере свободную ферму:

О, это голая 3D-модель!

Добавьте ambientLight (строка 3 в приведенном ниже коде), который представляет собой свет, который просто повсюду (он не светит нигде конкретно, а просто освещает всю сцену).

При свете мы видим цвет и детали:

Измените ambientLight на pointLight (строка 3 в приведенном ниже коде), что означает свет в определенной точке, похожий на лампу. Цвет pointLight установлен на yellow, и он помещен на [10, 10, 10].

Вы видите разницу?

Да, он показывает тени и больше деталей.

Давайте переместим свободную ферму в позицию [1, 1, 1] и масштабируем ее до 0,2 (строка 4 в приведенном ниже коде).

Меньшая свободная ферма перемещается в верхнюю правую четверть точки обзора. Но, это не сталкивается с нами.

Давайте немного повернем его (строка 4 в коде ниже).

Теперь перед нами свободная ферма.

Воспользуйтесь помощью @react-three/drei

@react-three/drei — это набор полезных помощников для рендеринга react-three-fiber. Это упрощает использование многих типов объектов, таких как камеры, элементы управления, изображения, формы, 3D-модели, среды и т. д.

Настроим @react-three/drei:

% npm i @react-three/drei

@react-three/drei становится частью dependencies в package.json вместе с @react-three/fiber и three.

С помощью мы можем нанести глазурь на торт.

Добавить статус прогресса для загрузки

Мы показали пустой экран (null) в качестве запасного варианта во время загрузки 3D-модели. Это может быть не очень хорошим пользовательским интерфейсом, позволяющим пользователям некоторое время смотреть на пустой экран.

useProgress — это хук, который показывает статус выполнения.

Мы добавляем загрузочный резервный пользовательский интерфейс в src/App.js:

В строках 6–9 определяется пользовательский интерфейс загрузки Loader. Он показывает статус загрузки с помощью хука useProgress (строка 7), который определяется следующим образом:

Html (строка 8) — это элемент @react-three/drei, который используется для отображения текста прогресса в центре сцены.

В строке 19 резервный пользовательский интерфейс определяется как <Loader />.

Перед полной загрузкой 3D-модели статус выполнения постоянно обновляется. Вот один из снимков:

Используйте мышь для управления движением

Элементы управления орбитой позволяют камере двигаться по орбите вокруг цели. Добавьте одну строку кода в Canvas (строка 5 в коде ниже).

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

Настройте фон окружения

Пока что мы перенесли бесплатную ферму на белый фон. Как насчет лесного фона?

Это еще один код строки элемента Environment (строка 6 в коде ниже).

Разве управление орбитой не выглядит круче на фоне леса?

Поддерживаемые типы предустановок: sunset, dawn, night, warehouse, forest, apartment, studio, city, park и lobby.

Настройте анимацию с вращением и положением

Элементы управления орбитой перемещают камеру вокруг цели, и сама цель тоже может двигаться.

useFrame — это хук, который вызывается для каждого кадра.

  • Параметр state включает информацию о всех трех состояниях, включая gl (WebGL), camera, clock, scene и т. д.
  • Параметр delta представляет собой дельту часов в секундах. Он используется для настройки анимации по времени.
  • renderPriority — это расширенный параметр для полного отключения автоматического рендеринга.

Мы вызываем useFrame, чтобы оживить бесплатную ферму.

В строке 12 определяется farmRef для элемента primitive (строка 21). useFrame (строки 13–19) управляет свободным вращением фермы (строки 15–16) и изменением положения (строка 13).

С изменениями свободная ферма перемещается сама по себе. Кроме того, мы можем использовать мышь для перемещения камеры.

Заключение

Шаг за шагом мы показали вращающуюся ферму на фоне леса, как показано на изображении заголовка. Всего мы использовали 33 строки кода, не считая 4 пустых строк.

Разве это не круто?

Спасибо за прочтение. Я надеюсь, что это было полезно. Если вам интересно, вы можете прочитать о текстурах в three.js или ознакомиться с другими моими статьями на Medium.