HelloWorldSceneAR.js

'use strict';

import React, { Component } from 'react';

import {StyleSheet} from 'react-native';

import {
  ViroARScene,
  ViroText,
  ViroConstants,
  ViroARTrackingTargets,
  ViroARImageMarker,
  ViroQuad,
  ViroNode,
} from 'react-viro';

export default class HelloWorldSceneAR extends Component {

  constructor() {
    super();

    // Set initial state here
    this.state = {
      text : "Initializing AR...",
      addImageMarker : false,
    };

    // bind 'this' to functions
    this._onInitialized = this._onInitialized.bind(this);
    this._getImageMarker = this._getImageMarker.bind(this);
    this._getQuad = this._getQuad.bind(this);
    this._foundAnchor = this._foundAnchor.bind(this);
    this._updateAnchor = this._updateAnchor.bind(this);
  }

  componentDidMount() {
    setTimeout(()=>{
      this.setState({
        addImageMarker : true,
      })
    }, 10000)
  }

  render() {
    return (
      <ViroARScene onTrackingUpdated={this._onInitialized} >
        <ViroText text={this.state.text} scale={[.5, .5, .5]} position={[0, 0, -1]} style={styles.helloWorldTextStyle} />
        {this._getImageMarker()}
        {this._getQuad()}
      </ViroARScene>
    );
  }

  _getImageMarker() {
    if (!this.state.addImageMarker) {
      return;
    }

    return (
      <ViroARImageMarker target={"mi_poster"} onAnchorFound={this._foundAnchor} onAnchorUpdated={this._updateAnchor} />
    )
  }

  _getQuad() {
    if (!this.state.foundAnchor) {
      return
    }
    return (
      <ViroNode position={this.state.foundAnchor.position} rotation={this.state.foundAnchor.rotation}>
      <ViroQuad rotation={[-90,0,0]} scale={[.7158, 1.066, 1]}/>
      </ViroNode>
    )
  }

  _foundAnchor(anchor) {
    this.setState({
      foundAnchor : anchor
    })
  }

  _updateAnchor(anchor) {
    this.setState({
      foundAnchor : anchor
    })
  }

  _onInitialized(state, reason) {
    if (state == ViroConstants.TRACKING_NORMAL) {
      this.setState({
        text : "Hello World!"
      });
    } else if (state == ViroConstants.TRACKING_NONE) {
      // Handle loss of tracking
    }
  }
}

ViroARTrackingTargets.createTargets({
  mi_poster : {
    source : {
      uri : 'https://s3-us-west-2.amazonaws.com/viro/MI_assets/mi_2.png'
    },
    //source : require('./res/mi_2.png'),
    orientation : 'Up',
    physicalWidth : 0.6858, // 27" poster
  }
})

var styles = StyleSheet.create({
  helloWorldTextStyle: {
    fontFamily: 'Arial',
    fontSize: 30,
    color: '#ffffff',
    textAlignVertical: 'center',
    textAlign: 'center',  
  },
});

module.exports = HelloWorldSceneAR;