Как визуализировать 3D-объекты в приложении React

Внедрение 3D-рендеринга изменило взаимодействие пользователя с интернет-технологиями. Во-первых, веб-приложения стали более захватывающими, предоставляя привлекательный и интерактивный опыт через веб-браузер.

Эта технология уже активно используется в играх и в дополненной/виртуальной реальности. Он предлагает реалистичный и захватывающий способ взаимодействия с виртуальными элементами.

Узнайте, как визуализировать 3D-объекты в приложении React.

Основы 3D-моделирования и программирования

Прежде чем приступить к 3D-рендерингу, необходимо знать несколько моментов:

• Трехмерные объекты содержат отдельные точки или вершины, которые определяют их трехмерную структуру. Соединение этих точек создает грани, которые составляют форму объекта на экране.
• Современные браузеры имеют встроенную возможность рендеринга 3D с использованием таких технологий, как WebGL. Они делают это, используя мощность графического процессора вашего компьютера для быстрого рендеринга 3D-моделей и сцен.
  instagram viewer
• Любой 3D-объект, отображаемый вашим браузером, состоит из трех основных компонентов. Это сцена, камера и средство визуализации, и все они играют решающую роль. Сцена обеспечивает базовую платформу для настройки всех ваших 3D-элементов, включая источники света и камеры. Камера позволяет просматривать 3D-объект под разными углами. Наконец, средство визуализации монтирует и отображает сцену поверх HTML-элемента холста.

3D-рендеринг с помощью Three.js и React Three Fiber

Три.js — это библиотека JavaScript, которую можно использовать для визуализации 3D-объектов в веб-браузере. Используя его встроенные компоненты, вы можете легко создавать и визуализировать 3D-объекты в своем браузере наряду с другими функциями вашего приложения React.

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

Рендеринг 3D-объектов в приложении React

Выполните следующие шаги, чтобы визуализировать простую 3D-форму в браузере, а также 3D-модель, созданную в Blender. Если вы не знакомы с Blender, узнать, как начать работу в качестве новичка.

Создать React-приложение, запустите терминал, чтобы выполнить приведенную ниже команду, и установите необходимые зависимости:

npm установить три @react-three/fiber @react-three/drei

Установите пакеты Three.js, react-three-fiber и react-three-drei. Библиотека react-three-drei работает вместе с react-three-fiber для создания 3D-сцен и объектов.

Рендеринг 3D-формы

Вы можете визуализировать простую трехмерную фигуру в браузере с очень небольшим количеством кода. Открой источник/app.js файл, удалите весь шаблонный код React и добавьте следующее:

Импортировать Реагировать от"реагировать";
Импортировать {Холст} от"@реагировать-три/волокно";
Импортировать {Орбитальные элементы управления} от"@реагировать-три/дреи";
функцияКоробка() {
возвращаться (
<сетка>
<коробкаБуферГеометрияприкреплять ="геометрия" />
<сеткаLambertMaterialприкреплять="материал"цвет="ярко-розовый" />
сетка>
 )
}
экспортпо умолчаниюфункцияПриложение() {
возвращаться (
<дивclassName="Приложение">
<дивclassName="Заголовок приложения">
<Холст>
<OrbitControls />
<окружающий светинтенсивность ={0.5} />
<прожекторпозиция={[10,15,10]} угол={0.3} />
<Коробка />
Холст>
див>
див>
 );
}

Этот код делает следующее:

• Коробка компонент использует компоненты mesh, boxBufferGeometry и meshLambertMaterial из react-three-fiber для рендеринга 3D-бокса. Эти три компонента работают рука об руку, чтобы создать форму коробки.
• Компонент boxBufferGeometry создает коробку, и этот код устанавливает для свойства color компонента meshLambertMaterial ярко-розовый цвет.
• Затем он визуализирует элемент Canvas, содержащий компонент коробки, с окружающим освещением, прожектором и набором свойств компонента Orbit Controls.
• Свойство компонента окружающего света добавляет на холст мягкий свет. Компонент SpotLight добавляет сфокусированный свет из определенной позиции под углом 0,3. Наконец, компонент OrbitControls позволяет управлять камерой вокруг 3D-объекта.

Импортируйте и визуализируйте компонент app.js в файле index.js и запустите сервер разработки, чтобы просмотреть результаты в браузере по адресу http://localhost: 3000.

Рендеринг 3D-модели, созданной в Blender

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

В этом уроке вы будете визуализировать 3D-модель BMW с помощью производительности SRT, доступной на Скетчфаб.

Для начала загрузите модель со Sketchfab в формате GLTF (формат передачи GL). Этот формат упрощает визуализацию 3D-моделей в браузере. После завершения загрузки откройте папку модели и переместите файл модели в общедоступный каталог внутри вашего приложения React.

Теперь перейдите к файлу app.js и заполните его приведенным ниже кодом.

• Импортируйте следующие компоненты:

  Импортировать {useGLTF, Сцена, PresentationControls} от"@реагировать-три/дреи";

• Создайте компонент модели и добавьте следующий код:

  функцияМодель(реквизит){
  константа {сцена} = использовать GLTF("/bmw.glb");
  возвращаться<примитивныйобъект={сцена} {...реквизит} />
  }
  экспортпо умолчаниюфункцияПриложение() {
  возвращаться (
  <дивclassName="Приложение">
  <дивclassName="Заголовок приложения">
   дпр={[1,2]} 
   камера теней={{избранное: 45}}
   стиль = {{"позиция": "абсолютный"}}
   >
   скорость = {1,5} 
  Глобальный зум={0.5}
   полярный = {[-0.1, Математика.ПИ / 4]}
   >
  <Этапсреда={нулевой}>
  <Модельшкала={0.01} />
  Этап>
  ПрезентацияЭлементы управления>
  Холст>
  див>
  див>
   );
  }
  

• Хук useGLTF из библиотеки React-three-drei определяет переменную сцены и присваивает ей значение файла модели, расположенного по пути «/bmw.glb». Затем компонент возвращает объект-примитив, который закладывает сцену для 3D-модели.
• Элемент Canvas визуализирует основные компоненты, составляющие модель, с указанными свойствами, такими как соотношение пикселей устройства (DPR), тени, угол камеры и стиль.
• Затем вы указываете свойства компонента PresentationControls, такие как скорость и глобальное масштабирование. Эти свойства определяют, как вы будете управлять моделью на экране.
• Наконец, настройте компонент Stage, который монтирует модель на экране браузера.

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

Рендеринг 3D-моделей в вашем веб-приложении

Рендеринг 3D-моделей в ваших веб-приложениях может дать несколько преимуществ, таких как улучшение взаимодействия с пользователем за счет обеспечения более реалистичного и интерактивного 3D-ощущения. В результате пользователи могут лучше взаимодействовать с продуктом.

Однако рендеринг 3D-элементов может иметь свои недостатки, такие как негативное влияние на производительность приложения. Для рендеринга 3D-моделей требуется больше ресурсов, из-за чего ваше приложение может загружаться медленнее.