the-ar

AR of the-component

Installation

$ npm install the-ar --save

Usage

'use strict'

import React from 'react'

import { TheAr, TheArStyle } from 'the-ar'

class ExampleComponent extends React.PureComponent {
  render () {
    const s = this
    return (
      <div>
        <script src={TheAr.THREE_JS_URL}></script>
        <script src={TheAr.AR_JS_URL}></script>
        <TheArStyle/>
        <TheAr onReady={(context) => s.handleReady(context)}
               onDraw={(context) => s.handleDraw(context)}
        />
      </div>

    )
  }

  handleReady ({ THREE, scene, renderer }) {
    const s = this
    s.drawHandlers = []
    {

      const geometry = new THREE.CubeGeometry(1, 1, 1)
      const material = new THREE.MeshNormalMaterial({
        transparent: true,
        opacity: 0.5,
        side: THREE.DoubleSide
      })
      const mesh = new THREE.Mesh(geometry, material)
      mesh.position.y = geometry.parameters.height / 2
      scene.add(mesh)
    }
    {
      const geometry = new THREE.TorusKnotGeometry(0.3, 0.1, 64, 16)
      const material = new THREE.MeshNormalMaterial()
      const mesh = new THREE.Mesh(geometry, material)
      mesh.position.y = 0.5
      scene.add(mesh)
      s.drawHandlers.push((delta) => {
        mesh.rotation.x += Math.PI * delta
      })
    }
  }

  handleDraw ({ scene, renderer, delta }) {
    const s = this
    for (let handler of s.drawHandlers) {
      handler(delta)
    }
  }

}

export default ExampleComponent

Components

TheAr

AR of the-component

Props

| Name | Type | Description | Default | | --- | --- | ---- | ---- | | cameraParametersUrl | string | Camera parameter url | 'https://jeromeetienne.github.io/AR.js/data/data/camera_para.dat' | | markerPatternUrl | string | Pattern of marker | 'https://jeromeetienne.github.io/AR.js/data/data/patt.hiro' | | width | number | Display width | 640 | | height | number | Display height | 480 | | onReady | func | Callback for draw ready | | | `onDraw` | func | Handle draw ar | | | sourceType | enum | Type of ar source | 'webcam' | | sourceUrl | string | Source URL for image/video source type | null | | canvasRef | func | Ref to canvas element | null | | videoRef | func | Ref to video element | null |

TheArStyle

Style for TheAr

Props

| Name | Type | Description | Default | | --- | --- | ---- | ---- | | options | object | Style options | {} |

License

This software is released under the MIT License.

Links

• THE Labo