Импорт вашей первой 3D-модели в React
Если вы когда-либо использовали Blender или любую другую программу 3D-моделирования и хотели включить свою модель в свое приложение ReactJS, эта запись в блоге для вас. Или, если вы никогда не использовали blender или любую другую программу 3D-моделирования и хотите впервые поэкспериментировать с использованием Three.js, это для вас! Сегодня мы собираемся визуализировать красочную коробку в нашем приложении React.
Вот ссылка на репо, если вы хотите его разветвить.
Во-первых, давайте начнем с основ.
Что такое Three.js?
3D-библиотека JavaScript,
Three.js — это библиотека JavaScript с открытым исходным кодом, которая используется для отображения графики, 3D- и 2D-объектов в веб-браузере. Он использует API WebGL за кулисами. Three.js позволяет вам использовать ваш GPU (графический процессор) для рендеринга графики и 3D-объектов на холсте в веб-браузере. поскольку мы используем JavaScript, мы также можем взаимодействовать с другими элементами HTML. Three.js был выпущен Рикардо Кабельо в апреле 2010 года. — GeeksforGeeks
Давайте начнем:
Установка Three.js
В вашем терминале первая цель, которую вам нужно сделать, это запустить следующие команды:
npm install --save three npm install three @react-three/fiber npm install @react-three/drei
Создание компонента-контейнера
После установки необходимых элементов мы собираемся создать новое реагирующее приложение с:
npx create-react-app three-js-box-test
… или просто создайте новую страницу в своем приложении для реагирования и импортируйте следующее как еще один компонент.
Нам нужно создать компонент, который будет содержать фактическую коробку, которую мы будем визуализировать сегодня. Это будет выглядеть как ваш типичный компонент в React.
Создание коробки
После этого вы заметите, что единственным интересным элементом, который мы добавили, был холст. Холст — это то, что действует как контейнер для нашей 3D-модели. Теперь нам нужно добавить еще один файл с именем Box.js. В Box мы создадим фактический 3D-объект, который хотим визуализировать.
Теперь… вы не можете сказать мне, что это было нелегко! Когда ты видишь
<boxBufferGeometry attach="geometry" args={[3,3,3]} />
вы заметите, что есть атрибут под названием «args», я бы порекомендовал поиграть с ним, чтобы вы могли изменить размеры блока! От куба до прямоугольной призмы вы можете изменить длину, ширину и высоту с каждым из этих чисел. Например, попробуйте следующее:
<boxBufferGeometry attach="geometry" args={[2,3,1]} />
А meshNormalMateral добавляет разные источники света для каждой из векторных переменных, это позволяет получить очень красивое и эстетично выглядящее поле, вы также можете импортировать больше мешей и даже свои собственные текстуры. Просто взгляните на документы!
Визуализация блока
Наконец, что мы собираемся сделать, это визуализировать коробку с чистой магией и красотой Three.js.
Бум!!! Мы поняли. Вот как должен выглядеть компонент конечного контейнера.
Что вы заметите, так это три добавленных элемента. Позвольте мне объяснить их:
<ambientLight intensity={1}/>
//Light is a necessity to see the object
<directionalLight position={[-2,5,2]} intensity={1}/>
//This light changes the intensity from different axes
<OrbitControls enableZoom={false} autoRotate={true}/>
//This is what allows the box to be dynamically controlled by the user. AutoRotate is just a really cool added effect
Визуализация собственной пользовательской 3D-модели
Теперь перейдем к более подробной части, допустим, у вас уже есть собственный 3D-объект или объект для рендеринга, который вы скачали с веб-сайта, такого как Sketchfab. Скачать Лего Бэтмен по ссылке.
Во-первых, вам нужно убедиться, что это файл .glTF. После этого, если вы загрузили файл из Sketchfab, вы хотите, чтобы автоматически преобразованный файл отображался выше. Когда вы загрузите файл, разархивируйте его и проверьте содержимое. Вы должны увидеть файл scene.glTF.
.glTF — Драко .glTF
Что нам нужно сделать, так это запустить команды в терминале, чтобы преобразовать этот scene.glTF в файл Draco .glTF, который мы можем использовать. Мы собираемся использовать конвейер glTF для преобразования нашей сцены в терминале, запустив его из папки, в которой находится файл scene.glTF:
glgltf-pipeline -i model.gltf -o {your chosen model name}.gltf -d
Если в этом разрешении отказано, добавьте sudo перед приведенным выше кодом.
Когда это запустится, мы можем ожидать новый файл с именем {выбранное вами имя модели}.gltf или, в моем случае, batman.gltf.
Драко из .glTF в .js
После этого вам нужно будет преобразовать новый файл Draco .glTF в файл .js, чтобы мы могли отображать его как компонент в реакции. Для этого мы будем использовать gltfjsx, обещаю, это будет легко.
npx gltfjsx {your chosen model name}.gltf
Теперь вы заметите еще один файл в этой загруженной папке!
После этого мы сможем щелкнуть и перетащить Batman.js или {выбранное вами имя модели}.js в наш проект и визуализировать компонент так же, как мы делали с коробкой ранее.
Я полагал, что буду первым, кто это скажет. Поздравляем, вы официально импортировали свою первую 3D-модель в React. Надеюсь, вам понравился этот пост в блоге!
