Мы просто позволим этому одному скользить ...
Purple Nugget # 2: Керлинг Ёжик
Вдохновленный спортивными смайликами XKCD. Теперь вы можете завивать своих ежиков в 3D! (При создании этой демонстрации не использовались настоящие ежи)
Готовая демонстрация и код
Вы можете посмотреть демо здесь и получить код здесь. Эта демонстрация будет работать только на устройстве, имеющем как соединение Bluetooth, так и браузер, поддерживающий веб-соединение Bluetooth. Вы можете включить Web Bluetooth в интернет-браузере Samsung с помощью флажка.
Самородок цель
Этот фиолетовый самородок сочетает в себе WebVR и Web Bluetooth и показывает, как мы можем взаимодействовать с объектами в нашей виртуальной среде из внешнего мира.
Ингредиенты
- Текстовый редактор (VS Code, Sublime Text, глюк,…)
- Способ обслуживания вашего самородка по HTTPS (я использую глюк)
- Устройство с подключением Bluetooth (например, мобильный телефон, планшет)
- Контроллер Daydream (или контроллер с поддержкой Bluetooth по вашему выбору).
- Браузер с включенным веб-Bluetooth (в Samsung Internet 6+ он находится под флагом или Chrome)
Метод
Web Bluetooth позволяет нам подключаться, отправлять и получать данные с периферийных устройств с поддержкой Bluetooth прямо из нашего браузера. Это означает, что нашим пользователям не нужно загружать отдельное приложение, чтобы подключиться к устройству. WebVR позволяет отображать трехмерную среду в браузере, создавая увлекательный и захватывающий опыт.
Их сочетание дает нам возможность взаимодействовать с трехмерным объектом, перемещая объект в реальном мире.
Мы можем разделить работу на четыре части. Создание сцены, стилизация сцены, написание правил физики и управление сценой.
WebVR - Создание сцены
Мы можем использовать A-Frame, фреймворк JavaScript для создания опыта виртуальной реальности в Интернете, чтобы помочь нам настроить сцену. В документации A-Frame есть код для начала, или вы можете переделать стартер A-Frame на Glitch.
Наш каток состоит из длинной плоской коробки с четырьмя длинными узкими коробками с каждой стороны. Вы можете удалить формы, указанные в стартовом элементе A-frame, и заменить их ими.
<a-box color="aaa" width="20" depth="60" height="1" position="0 -0.6 -21"></a-box> <a-box color="#aaa" width="0.25" height="0.2" depth="50" position="-3 0 -21"></a-box> <a-box color="#aaa" width="0.25" height="0.2" depth="50" position="3 0 -21"></a-box> <a-box color="#aaa" width="6" height="0.2" depth="0.25" position="0 0 4.13"></a-box> <a-box color="#aaa" width="6" height="0.2" depth="0.25" position="0 0 -46"></a-box>
Вы можете использовать инструменты проверки A-Frame, которые помогут вам изменить положение и размер полей, нажав Ctrl + Alt + i.
Дальше нам нужен наш ёжик! Я использовал эту модель от Sketchfab.
Загрузите выбранную вами модель ежа и разместите ее там же, где вы будете размещать свою сцену. Мы можем добавить 3D-модель объекта в нашу сцену A-Frame с помощью элемента ‹a-entity› и добавления актива.
<a-assets> <a-asset-item id="hedgy-obj" src="https://example.com/hedgy.obj"> </a-asset> <a-assets> <a-entity id="hedgehog" obj-model="obj: #hedgy-obj;"></a-entity>
WebVR - стилизация сцены
На данный момент это выглядит немного скучновато. Добавляем к ней цвет и текстуры банок с помощью материалов. Это файлы изображений, которые добавляются как активы, а затем могут быть переданы в наши блоки или объекты с атрибутом material. Вы можете создавать свои собственные текстуры для своей сцены или использовать те, которые представлены в примере вверху. Я сделал это изображение и установил его в качестве материала для пола катка.
Добавьте изображение в качестве ресурса в раздел ресурсов, а затем передайте его в коробку на полу катка.
<a-assets> <a-asset-item id="hedgy-obj" src="https://example.com/hedgy.obj"> </a-asset> <img id="rink-skin" src="https://example.com/rink.png"/> <a-assets> ... <a-box id="rink" material="src: #rink-skin;" width="20" depth="60" height="1" position="0 -0.6 -21" static-body></a-box>
Вы можете создать синий градиент для элемента a-sky и проделать то же самое.
Настройте физику
На катках низкое трение, мы хотим, чтобы наш ежик скользил, мы также хотим, чтобы он в конце концов замедлялся и отскакивал, если ударялся о стену катка (хорошо, так что это не то, как настоящий керлинг, позвольте мне взять маленькая поэтическая лицензия).
Во-первых, мы собираемся включить библиотеку компонентов набора событий A-Frame.
<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
Это позволяет вам прослушивать события, а затем редактировать свойства ваших компонентов A-Frame.
Мы хотим придать нашему ежу новые свойства, в первую очередь скорость (скорость в одном направлении). Мы можем зарегистрировать новый компонент, называемый скоростью
AFRAME.registerComponent('velocity', {
schema: {type: 'vec3'},
init: function() {
console.log('Velocity');
},
decelerate: function() {
this.data.x *= deceleration;
this.data.y *= deceleration;
this.data.z *= deceleration;
},
tick: function() {
var x = this.data.x;
var y = this.data.y;
var z = this.data.z;
this.el.object3D.position.add({x, y, z});
this.decelerate();
}
});
Мы устанавливаем переменную замедления, которая будет зависеть от того, насколько скользкой мы хотим, чтобы наш каток был. Я установил свой на 0,99, что давало реалистично выглядящий слайд. На каждом тике мы обновляем значения положения элемента, к которому мы применяем эту скорость, что означает, что он будет перемещаться внутри сцены.
Далее нам нужно настроить обнаружение столкновений для стен катка: если ежик ударяется о стену, мы хотим, чтобы он отскочил обратно на каток. Сначала нам нужно определить, какие компоненты А-образной рамы являются стенами. Это делается путем присвоения каждому из них класса стены в HTML. Затем этот класс используется как селектор в JS коллизии. Я использовал библиотеку reset-on-collision Ричарда Кеннарда, но вместо того, чтобы сбрасывать положение элемента, мы собираемся изменить его скорость при столкновении.
Интернет через Bluetooth - управление сценой
Для этой демонстрации я использовал контроллер Daydream, потому что эта библиотека от MrDoob делает подключение контроллера к вашему браузеру очень доступным.
Включите библиотеку в свой HTML
<script src="daydreamcontroller.js"></script>
Мы можем проверить, поддерживает ли браузер пользователя Web Bluetooth, выполнив проверку if ('bluetooth' in navigator). В этом случае я добавил в свой HTML-код абсолютно позиционированный оверлей с кнопкой «Подключить», для которого установлено значение display: none, если браузер не поддерживает Bluetooth. Если браузер поддерживает Bluetooth, мы можем начать с ним работать! При нажатии кнопки «Подключиться» мы создадим новый экземпляр DaydreamController и подключимся к контроллеру. Библиотека DaydreamController.js использует navigator.bluetooth.requestDevice(), в котором появится всплывающее диалоговое окно с вопросом, к которому пользователь хочет подключиться, и позволит ему выбрать контроллер Daydream.
Библиотека также дает нам доступ к углу, под которым удерживается контроллер, а также к его текущему ускорению в направлениях X, Y и Z. Мы можем использовать эти значения, чтобы изменить направление и скорость, с которой мы выпускаем нашего ежа.
Мы также можем узнать, когда нажимаются кнопки на контроллере, поэтому мы можем установить атрибут скорости на ежике и отправить его в путь.
Чтобы следовать за нашим ежом по трассе, нам нужно применить скорость и к камере. Это можно сделать с помощью элемента A-Frame <a-animation>, который можно добавить внутри компонентов A-Frame, чтобы заставить их двигаться. Вам понадобится по одному для каждого атрибута, который вы хотите изменить. Вы присваиваете ему атрибуты to, duration и ease вместе с необязательным delay для создания желаемого движения. Вы можете вызвать анимацию с помощью element.emit('startAnimation'). Затем анимацию камеры можно запустить одновременно с заданием скорости ежу нажатием кнопки.
Вы можете увидеть полный пример настройки WebBluetooth в этом примере.
Дополнительно
Я хотел, чтобы мой ежик слегка покрутился, пока он скользит по катку. Я сделал это с помощью анимации атрибута вращения.
Надеюсь, вам понравится делать свой собственный керлинг ежика или другую игру с помощью веб-Bluetooth и WebVR! Доступно множество библиотек с открытым исходным кодом для подключения к вашему браузеру множества различных устройств: дрон, управляемые лампочки, принтер, комплекты разработки и некоторые менее безопасные для рабочих устройств. Также существует множество сайтов с бесплатными 3D-моделями, доступными для скачивания. Это должно дать вам много очков, чтобы начать смешивать физический и цифровой миры!
Если вам понравился этот самородок, почему бы не попробовать Purple Nugget # 1 - Controlling SVG with the Gamepad API.
