Введение
Дополненная реальность (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
{}} // allows user to drag 3D object around with finger
/>
);
},
});
const styles = StyleSheet.create({
helloWorldTextStyle: {
fontFamily: 'Arial',
fontSize: 50,
color: '#ffffff',
textAlignVertical: 'center',
textAlign: 'center',
},
});
module.exports = HelloWorldSceneAR;
Вы должны увидеть 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”