Сегодня уже существует несколько библиотек для создания сцен во Vue с помощью Three.js:
- vue-gl
- vue-threejs
Эти библиотеки хороши для создания простых сцен, поскольку они позволяют нам легко создавать базовый 3D-контент, иногда даже с физикой.
Однако для более сложных сцен нам нужно больше контроля над некоторыми аспектами:
- Лучшее и простое управление вашими активами и сценами
- Создание контента с чистым THREE.js
Vue-threejs-composer позволяет нам это делать.
Функции
Эта библиотека не будет включать в себя базовую геометрию, материалы и более сложные вещи.
Он будет реализовывать только базу, из которой вы можете легко расширяться, а также реализовывать некоторые встроенные функции, чтобы избавить пользователя от общих проблем, возникающих в обычных проектах THREE.js:
- Встроенный менеджер ресурсов и сцены
- Помощники для загрузки и создания 3D-моделей.
- Создавайте собственный контент и компоненты с помощью чистого кода THREE.js.
Теперь давайте рассмотрим несколько примеров.
Примечание. Следующие примеры представляют собой лишь отрывки, демонстрирующие, как могут выглядеть компоненты. Вы можете посмотреть полные примеры на github.
Декларативная композиция сцены
Как и в перечисленных выше библиотеках, эта библиотека предоставляет некоторые базовые компоненты, которые вы можете использовать в качестве основы для создания своих компонентов.
Организуйте свои активы
Пакеты активов позволят вам лучше организовать свои активы. Затем сцены загрузят заданные пакеты и дождутся всех ресурсов, требующих предварительной загрузки. Это позволит вам сосредоточиться на более важных аспектах вашего приложения.
Примечание. Свойства dependencies и assets набора ресурсов и компонентов сцены могут быть либо строкой, в которой несколько записей могут быть разделены запятыми, либо массивом строк с именами пакетов ресурсов для нагрузка.
Модели
Как часто загрузка 3D-моделей вызывает затруднения? Эта библиотека также включает простой способ загрузки этого типа ресурса соответствующими материалами.
Примечание. По умолчанию эта библиотека не включает никаких пакетов для обработки загрузки модели. Вам нужно будет установить загрузчик, который вы хотите использовать, и зарегистрировать соответствующие расширения в классе Loader:
Создание пользовательского контента
Для большинства компонентов требуется либо фабричная функция, либо их можно расширить, чтобы пользователь мог легко интегрировать свой код THREE.js в компоненты.
Заключительные заметки
Эта библиотека была опубликована совсем недавно, и поэтому в ней, вероятно, все еще будут кое-какие ошибки.
Есть также множество аспектов, которые могут и будут улучшены в будущем, поэтому не стесняйтесь сообщать о любых ошибках или оставлять мне отзывы о библиотеке.
