the-ar v2.1.0

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

TheArStyle

Style for TheAr

Props

License

This software is released under the MIT License.

Links

• THE Labo