Введение
Дополненная реальность (Ar) – это технология, используемая для наложенного для наложения компьютерных изображений на представлении пользователя на реальном мире, обеспечивая составное представление. Это может быть доступно на простом экране телефона (подумайте Pokemon Go ) или с помощью смартфона на основе виртуальной реальности наушники .
Так как Экспо AR компонент устарел , Виро-медиа взяли в себя взимание одного из самых быстрых, простых способов получить дополненную реальность вверх и работать на вашем iOS или Android-устройстве. Их Документация впечатляюще подробно и полезен.
Настраивать
Если вы в OSX:
brew install node brew install watchman
Если вы в Linux:
apt-get install node apt-get install watchman
Для всех распределений:
npm install -g react-native-cli npm install -g react-viro-cli react-viro init ViroSample --verbose cd ViroSample npm start
Теперь в файле/js/helloworldscenear.js измените строку 38, так что «Hello World!» это сообщение вашего выбора:
_onInitialized(state, reason) { if (state == ViroConstants.TRACKING_NORMAL) { this.setState({ text : "Happy Birthday" // was "Hello World" }); } else if (state == ViroConstants.TRACKING_NONE) { // Handle loss of tracking } }
Тогда получи IOS VIRO Media App или Android ViRo Media App приложение Откройте приложение VIRO Media и нажмите значок в левом верхнем углу, а затем нажмите «Enter Testbed». Прокрутите вверх в своем терминале, чтобы найти URL-адрес Ngrok, введите это в текстовое поле и нажмите GO. Вы должны увидеть ваше сообщение, отображаемое на сцене!
3D объекты
Теперь, когда вы видели сообщение, отображаемое на вашем телефоне, Скачать этот файл , расстегните его и поместите его в свой/вирозам/JS/папку.
Теперь замените содержимое вашего helloworldscenear.js с этим кодом из Документы :
'use strict'; import React, { Component } from 'react'; import {StyleSheet} from 'react-native'; import { ViroARScene, ViroText, ViroMaterials, ViroBox, Viro3DObject, ViroAmbientLight, ViroSpotLight, ViroARPlaneSelector, ViroNode, ViroAnimations, } from 'react-viro'; const createReactClass = require('create-react-class'); const HelloWorldSceneAR = createReactClass({ getInitialState() { return { text : "Initializing AR..." }; }, render: function() { return ({this.setState({text : "Happy Birthday"})}}> // Again, change this text to your desired message ); }, }); const styles = StyleSheet.create({ helloWorldTextStyle: { fontFamily: 'Arial', fontSize: 50, color: '#ffffff', textAlignVertical: 'center', textAlign: 'center', }, }); module.exports = HelloWorldSceneAR;{}} // allows user to drag 3D object around with finger />
Вы должны увидеть 3D смайлик под вашим сообщением, как так:
Выявление самолета
Теперь на линии 38, добавьте
и перезагрузка. Сохранить и перезагрузить тестовую кровать. Вы должны увидеть обнаруженные несколько плоскостей, когда вы перемещаете устройство на разные плоские поверхности:
Теперь замените jsx
с участием
{}} />
Сохранить и загрузить еще одну тестовую кровать. Теперь, когда вы нажимаете на самолет с пальцем, все самолеты должны исчезнуть, и на плоскости постучал 3D-объект.
Теперь заменить
{}} />
с участием
{}} >
Сохранить и загрузить еще одну тестовую кровать. Обратите внимание, как перетаскивание 3D-объекта вокруг перемещается вдоль обнаруженных мест/поверхностей.
Частицы
Теперь давайте добавим частицы Действительно
Во-первых, Скачать частицы res.zip file , расстегивайте его и добавьте расстегнутое содержимое на ваш /Вирозам/js/res/res/
.
Теперь замените код в helloworldscenear.js следующим образом:
'use strict'; import React, { Component } from 'react'; import {StyleSheet} from 'react-native'; import PropTypes from 'prop-types'; import { ViroSceneNavigator, ViroARScene, ViroNode, ViroAmbientLight, ViroDirectionalLight, ViroText, ViroAnimations, ViroParticleEmitter, Viro3DObject, } from 'react-viro'; 'use strict'; const createReactClass = require('create-react-class'); const MainScene = createReactClass({ getInitialState() { return { }; }, render: function() { return (); }, }); module.exports = MainScene; {}}>
Сохранить, запустить NPM начать
OnCemore, повторно откройте новую тестовую кровать, а вуаля! Вы увидите торт на день рождения с анимированным пламенем в верхней части свечи.
Теперь давайте добавим анимированный дым на объект. Еще раз замените код в helloworldscenear.js следующим образом:
'use strict'; import React, { Component } from 'react'; import {StyleSheet} from 'react-native'; import PropTypes from 'prop-types'; import { ViroSceneNavigator, ViroARScene, ViroNode, ViroAmbientLight, ViroDirectionalLight, ViroText, ViroAnimations, ViroParticleEmitter, Viro3DObject, } from 'react-viro'; 'use strict'; const createReactClass = require('create-react-class'); const MainScene = createReactClass({ getInitialState() { return { }; }, render: function() { return (); }, }); module.exports = MainScene; {}}>
Настройка параметров
Сохранить, запустить NPM начать
, и вы должны увидеть злой смайлик с дымом, выходящим из ушей, периодически.
Теперь давайте свяжемся с несколькими настройками. В строке 88, если мы изменим масштаб
Параметр от его начального значения [.4, .2, .2]
к [.8, .4, .4]
мы можем добиться большего количества дыма, выходящего из правой стороны, чем слева:
Если мы изменим Продолжительность
Параметр на линии 89, используя значение 2200
вместо 1100
, дым на правой стороне будет выделен для удвоения продолжительности левой стороны, поэтому теперь они оба излучаются одновременно, вправо длится вдвое длиннее, а слева, а левая снова начинается так же, как правильные остановки Отказ Затем, когда левая остановка, справа начинается. Таким образом, они чередуются между излучаемыми одновременно и началом очередного выброса, поскольку другая сторона прекращается.
Теперь, на линии 104, изменить ЭмиссионныеratePersecond: [200200],
к ЭмиссионныеratePersecond: [800800],
и на линии 105, изменить MaxParticles: 200,
к MaxParticles: 800,
Отказ Теперь дым, выходящий из правой стороны, значительно толще и наполнен, чем у слева: в четыре раза больше частиц!
Теперь, на линии 97, давайте изменим Источник: Требуется ("./res/packly_smoke.png"),
к Источник: требуется ("./res/pactesces_flame.png"),
Отказ Теперь вы увидите частицы, более напоминающие огонь, выходящие из правой стороны, в то время как левая сторона остается дымкой.
Если вы хотите изменить левую сторону, просто измените параметры в пределах <Виропартиченчеватель>
Теги выше, между строками 43-84.
Заключение
Viroreact – это просто простой способ настроить AR на вашем смартфоне. Сегодня мы проходили через первоначальную настройку, отображающее текст, отображающие 3D-объекты, отображающие частицы, а также изменяя способ ведения частиц. Для дальнейшей настройки я рекомендую играть с файлами изображения в /res
Папка с фоторедактором, таким как Adobe Photoshop. Для добавления творческого вдохновения попробуйте добавить Порталы к вашему проекту AR Отказ
Оригинал: “https://dev.to/peterklingelhofer/an-introduction-to-augmented-reality-with-viro-1nf4”