Живое отображение данных о криптовалюте в виртуальной среде в Интернете
Своеобразный «биржевой VR-центр для криптовалют».
Вы видели в предыдущих статьях, что я решительно выступаю за веб-программирование на стороне клиента. От короткого JavaScript-кода для выравнивания наборов 3D-точек в пространстве до JavaScript-библиотек для расчетов в веб-браузерах, которые я потом использовал для запуска, например, PCA online; и от приложений дополненной реальности для обучения химии, которые работают как веб-страницы до инструментов машинного обучения, которые отслеживают ваши руки в веб-браузерах и кода JavaScript для получения данных о криптовалюте в режиме реального времени.
Цель этой новой статьи — показать, как легко можно комбинировать различные технологии в сложные футуристические программы, которые запускаются прямо в веб-браузерах компьютеров, смартфонов, планшетов и даже устройств виртуальной реальности. Без установки какой-либо программы или приложения, просто получая доступ к веб-странице с помощью имеющегося у вас устройства, распространяемого только через Интернет, и с помощью одного фрагмента кода, который правильно отображается на всех устройствах.
В частности, здесь я покажу вам основы веб-приложения, которое отображает исторические данные и данные о криптовалюте в реальном времени в графическом интерфейсе, который работает на всех этих устройствах, включая высококачественные VR-гарнитуры, где опыт становится полностью захватывающим… биржевой центр только тем, что он специфичен для криптовалюты и полностью виртуален!
Посмотрите, как это веб-приложение работает слева направо на моем ноутбуке, смартфоне (до входа в режим виртуальной реальности и в режиме виртуальной реальности для картонных очков ниже) и на устройстве виртуальной реальности Oculus:
Хотите просто поиграть с ним? Откройте эту ссылку в браузере вашего устройства, каким бы оно ни было:
https://lucianoabriata.altervista.org/tests/cryptogames/cryptoVR/index.html?apikey=ВАШAPIKEYЗДЕСЬ
Короткая ссылка для быстрого ввода в VR-устройствах (если предварительно загружен API-ключ): https://bit.ly/3ckORFr
Ключевые компоненты
Хотя вы можете увидеть точный код по ссылке выше, позвольте мне дать вам обзор того, как все это работает. Два ключевых компонента этого веб-приложения: API-интерфейс cryptocompare для получения данных о криптовалюте и WebXR для обработки представлений webVR, совместимых на разных устройствах.
API криптосравнивания
Я уже представил этот API и как его вызывать в этой статье:
Здесь мы дважды вызываем API. Первый раз, чтобы получить исторические данные за последние 6 часов (getBtcDataHistoryMinute):
//look inside var response = await fetch(‘https://min-api.cryptocompare.com/data/v2/histohour?fsym=BTC&tsym=USD&limit=360&toTs=-1&api_key=' + apikey );
А затем раз в минуту для получения обновленной цены (getBtcData):
fetch(‘https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
Некоторые подробности:
1- Обратите внимание, что вызовы API являются асинхронными. Они начинаются с:
var getBtcData = async () => {
...
var getBtcDataHistoryMinute = async () => {
2- Из-за этого, а также поскольку нам нужно быть уверенным, что исторические данные отображаются первыми, нам нужно использовать вспомогательную переменную, которая указывает, были ли уже извлечены и показаны исторические данные или нет. Переменная historydone инициируется как false и становится истинной только в конце процедуры getBtcDataHistoryMinute:
var historydone=false
...
var getBtcData = async () => {
if (historydone==true) {
fetch(‘https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
...
}
var getBtcDataHistoryMinute = async () => {
var response = await fetch('https://min-api.cryptocompare.com/data/v2/histohour?fsym=BTC&tsym=USD&limit=360&toTs=-1&api_key=' + apikey );
...
historydone = true
...
}
3- Как вы видели в ссылках для проверки веб-приложений и в приведенных выше фрагментах кода, API-интерфейс cryptocompare вводится в качестве аргумента: https://cryptovr.glitch.me/?apikey=replacethiswitapikey
Веб-приложение захватывает ключ со строками, которые говорят:
const urlParams = new URLSearchParams(window.location.search); var apikey = urlParams.get(‘apikey’)
4. То, что цена BTC обновляется каждую минуту, контролируется timeOffset = 60 и elapsedTime часов Three.js.
WebXR для отображения виртуальной реальности на разных устройствах
WebXR позволяет использовать дополненную, виртуальную и смешанную реальности на разных устройствах; а наличие сети означает, что ее можно очень легко интегрировать с множеством других функций, которые может предложить сеть.
Элементы виртуальной реальности для отображения данных
Основной «экран» на самом деле представляет собой черную плоскость, а данные отображаются с использованием геометрии прямоугольника (BoxGeometry). Размеры x и z этих полей фиксированы, тогда как размер y зависит от числа, которое мы хотим отобразить, и фактически вычисляется как абсолютное значение разницы между предыдущей и текущей ценой: Math.abs(y- предыд.). Затем нам нужно разместить его в пространстве, которое мы основываем на yprev, если цена выросла, или на y, если цена выросла. Вот основная часть кода:
const geometry = new THREE.BoxGeometry( 0.005, Math.abs(y-yprev), 0.005 );
const cube = new THREE.Mesh( geometry, tmpMaterial );
plot1.add( cube );
if (yprev < y)
{
cube.position.set(x,yprev,0.005)
}else{
cube.position.set(x,y,0.005)
}
В этом фрагменте кода x увеличивается таким образом, что измеряет время, прошедшее с момента первой точки. Для исторической части диаграммы, которая отображается при загрузке, это одна точка данных в минуту за последние 6 часов (360 точек).
Цвет бара зависит от того, пошла ли цена вверх или вниз с момента последнего шага:
if (prices[i] < prices[i-1]) { //price went down, so red
var tmpMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
}else{ //price went up, so green
var tmpMaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
}
Текст в WebXR
Это было очень сложно, особенно потому, что мне нужно, чтобы текст менялся каждый раз, когда обновляется цена BTC. Я обнаружил (неэффективный, но достаточно практичный) способ сделать это — создать группу, в которую я добавляю и удаляю объекты textMesh. Например, в начале скрипта я использую это для инициализации текста (на самом деле он не отображается, потому что быстро заменяется первой ценой BTC):
var group = new THREE.Group(); scene.add(group); var textMesh; //For fonts, I got Roboto from Google Fonts and then //converted it into three.js-compatible json with https://gero3.github.io/facetype.js/ //Then just load it and use it like this: var loader = new THREE.FontLoader(); loader.load(“./Roboto_Bold.json”, function(font) { var textGeo = new THREE.TextGeometry(“BTC data here”, { font: font, size: 0.2, height: 0.01, curveSegments: 12, bevelEnabled: true, bevelThickness: 0.02, bevelSize: 0.01, bevelOffset: 0, bevelSegments: 2 }); var textMat = new THREE.MeshLambertMaterial({color: 0xFFFFFF}); textMesh = new THREE.Mesh(textGeo, textMat); textMesh.position.z = -1.4; textMesh.position.y = 0.5; textMesh.position.x = -1.9; textMesh.rotation.x = -Math.PI/8; group.add(textMesh); });
Как поясняется в комментарии, я получил шрифт в формате JSON с помощью этого инструмента: https://gero3.github.io/facetype.js/ на файлах, полученных из шрифтов Google. По какой-то странной причине конвертация не была идеальной, и, как вы видите, некоторые функции шрифтов отображаются недостаточно хорошо…
Приведенный выше код создает первый фрагмент текста и помещает его в группу. Но позже, каждый раз, когда нам нужно обновить цену BTC, мы сначала должны удалить textMesh из group, создать новую textMesh и, наконец, добавить обратно в группу:
loader.load(“./Roboto_Bold.json”, function(font) {
var textGeo = new THREE.TextGeometry(‘1 BTC = ‘ + lastprice.toString() + ‘ USD’, {
font: font,
size: 0.2,
height: 0.01,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 0.02,
bevelSize: 0.01,
bevelOffset: 0,
bevelSegments: 2
});
group.remove(textMesh);
var textMat = new THREE.MeshLambertMaterial({color: 0xFFFFFF});
textMesh = new THREE.Mesh(textGeo, textMat);
textMesh.position.z = -1.4;
textMesh.position.y = 0.5;
textMesh.position.x = -1.9;
textMesh.rotation.x = -Math.PI/8;
group.add(textMesh);
});
Конечно, весь этот код можно оптимизировать, но это основы. Кроме того, есть и другие более подходящие способы размещения текста, который будет меняться в процессе выполнения программы.
Надеюсь, вам понравится играть с виртуальной реальностью и криптовалютой. и не стесняйтесь обращаться ко мне, если вам нужна помощь или вы хотите попросить о небольших работах, адаптированных к вашим потребностям!
Я увлекаюсь природой, наукой, технологиями, программированием и самоделками. Биотехнолог и химик, в мокрой лаборатории и с компьютерами. Пишу обо всем, что входит в широкую сферу моих интересов. Проверьте мои списки для большего количества историй. Стать участником Medium, чтобы получить доступ ко всем его историям, и подписаться на получение моих новых историй по электронной почте (оригинальные партнерские ссылки платформы, за которые я получаю небольшой доход без особые расходы для вас). Пожертвуйте здесь различными способами. Свяжитесь со мной здесь.
Для консультаций по поводу небольших вакансий (по программированию, оценке биотехнологических и биоинформационных проектов, научной работе + общению, анализу и проектированию молекулярных данных, молекулярной графике, фотографии, учебным пособиям по moleculARweb, преподаванию и репетиторству по естественным наукам и т. д. .) проверьте мою страницу услуг здесь.
