How to use THREE.js (and THREEx and AR.js) CDN in my react component?

user_3037960 0
Viewed 1552

I thought react is less pain than Angular for such projects, and you could still mix "plain" javascript into your project. So I have in my react project in index.html this script tags: I try to integrate this example of AR.js into my react component.

<script src='libs/three/example/vendor/three.js/build/three.js'></script>
<!-- jsartookit -->
<script src="libs/three/vendor/jsartoolkit5/build/artoolkit.min.js"></script>
<script src='libs/three/vendor/jsartoolkit5/js/artoolkit.api.js'></script>
<!-- include threex.artoolkit -->
<script src="libs/three/src/threex/threex-artoolkitsource.js"></script>
<script src="libs/three/src/threex/threex-artoolkitcontext.js"></script>
<script src="libs/three//src/threex/threex-arbasecontrols.js"></script>
<script src="libs/three/src/threex/threex-armarkercontrols.js"></script>
<script>THREEx.ArToolkitContext.baseURL = '../'</script>

Now I want in my ARcomponent.js make use of this THREE and THREEx:

import React, { Component } from 'react'

export class ARcomponent  extends Component {
  componentDidMount() {
    // init renderer
      var renderer  = new THREE.WebGLRenderer({
        antialias   : true,
        alpha: true
      });
     //...
    }
    
render() {
    return (
        <div className="canvas">

        </div>
    )
  }
}
export default ARcomponent

but I get the error message that THREE and THREEx are undefined..

Line 200:20: 'THREE' is not defined no-undef

How can I use Three.js with AR.js (NOT with fiber! not with Aframe!) in my react project? Yes I tried npm install three - but where do I get THREEx and AR.js as npm packages?

Even when I get those errors and my app breaks - when I check on the F12 console THREE and THREEx are loaded.. maybe I need somehow wait a bit longer in my component with using THREE and THREEx?

ar.js three.js reactjs javascript
1 Answers

AR.js in a React environment

AR.js not provide a npm package with ES6 standard yet but there is a PR #116 on the way to add this feature. In the meantime folow this instructions if you want to test:

import AR.js with npm

You need to manually write the import (in package.json) in this way:

"@ar-js-org/ar.js": "https://github.com/AR-js-org/AR.js.git#<GIT_COMMIT_HASH>"

where the <GIT_COMMIT_HASH> is the latest git commit hash (take it from the latest commit in the ES6 branch!)

Example code

I will not post the whole code, but consider that Ar.js is based on Three.js and the preferable way to load it, is in the ComponentDidMount:

    import React from 'react'
    import { ArToolkitProfile, ArToolkitSource, ArToolkitContext, ArMarkerControls} from 'arjs/three.js/build/ar-threex.js';
    import * as THREE from 'three';
    
    export default class ThreexComp extends React.Component {
    
        componentDidMount() {
        // your AR.js code here!
        }
        render() {
            return (
            <div 
                style={{ width: "800px", height: "800px" }}
                ref={mount => { this.mount = mount}}
            />
            )
        }     
    }

You can take a look at this my testing example here: and you can also take in consideration this issue

Final considerations

Importing Ar.js as a npm package, with the ES6 standard, it will be the best way to import into React and similar frameworks. But it is still in devlopment,and could be some bugs. Anyway we think to merge in the dev branch soon and publish a first beta package.

user_47883810
Related