Это второй пост из серии об использовании Ready Player Me в React. Если вы не читали эту статью, в ней подробно рассказывается, как интегрировать создателя Ready Player Me в ваше приложение React. Хотя в этом нет необходимости, этот пост основан на предыдущем посте с использованием того же примера проекта.
Установка Три.js
Three.js — это легкая 3D-библиотека, которая позволяет выполнять расширенный рендеринг в Интернете. Этот инструмент позволит нам взаимодействовать с нашей 3D-моделью.
В ваш package.json добавьте Three.js, запустив
npm install three
Пакет.json
"dependencies": {
...
"three": "^0.139.2",
...
},
Создание нашего компонента
AvatarView.js будет содержать нашу логику рендеринга. Нам понадобится ссылка DOM из визуализированного div, чтобы средство визуализации Three.js знало, где рисовать.
Создание средства визуализации
Импортируйте Three.js и переопределите componentDidMount в AvatarView.
Затем мы можем создать новый WebGLRenderer, настроить его в соответствии с нашим окном и некоторыми другими настройками освещения.
После этого добавьте его на наш основной вид.
Камера, элементы управления и сцена
Добавление камеры и сцены позволит нам просмотреть нашу модель.
Мы будем загружать 3D-файл, чтобы предоставить как фоновую текстуру сцены, так и освещение.
Мы также добавим OrbitControls из примера Three.js, чтобы лучше проверить наш Ready Player Me.
Добавьте функцию загрузчика, чтобы помочь нам добавить файл в нашу среду.
Теперь, когда у нас есть сцена и камера, мы можем создать цикл рендеринга.
Загрузка модели
Используйте встроенный загрузчик Three.js GLTF, чтобы добавить Ready Player Me в сцену, используя URL-адрес, возвращенный из iFrame, который мы создали в Части 1.
Дополнительный код изменяет положение и масштаб, чтобы модель лучше помещалась на экране.
Вспомогательная функция:
Вызовите функцию в componentDidMount
И перегрузите componentDidUpdate и добавьте некоторую логику, чтобы скрыть средство визуализации, когда iFrame открыт…
Добавление AvatarView в App.js
Настройте свой аватар и загрузите его в свой мир Three.js!
Следующий…
В следующем уроке мы рассмотрим использование AvatarWebKit Hallway для изменения форм наложения Ready Player Me, используя только вашу видеокамеру. Не нужен iPhone или специальное оборудование!
Полный исходный код примера проекта можно найти здесь.
Если у вас есть другие вопросы, вы также можете связаться с нами в Discord.
Подпишитесь на нашу рассылку новостей, чтобы получать больше обновлений о том, что мы делаем дальше!
