Рубрики
Без рубрики

Введение в дополненную реальность с вирусом

ВВЕДЕНИЕ Дополненная реальность (AR) – это технология, используемая для наложения компьютерного изображения … Помечено дополненной реальностью, Ar, React Native, JavaScript.

Введение

Дополненная реальность (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”