Webpack Build for AR.js

aframe/src/component-anchor-nft.js

@@ -1,4 +1,9 @@
-//////////////////////////////////////////////////////////////////////////////
+import * as AFRAME from 'aframe';
+import Anchor from '../../three.js/src/new-api/arjs-anchor';
+import { AnchorDebugUI } from '../../three.js/src/new-api/arjs-debugui';
+import ArToolkitContext from '../../three.js/src/threex/arjs-context-nft';
+
+////////////////////////////////////////////////////////////////////////////////
 //		arjs-anchor
 //////////////////////////////////////////////////////////////////////////////
 AFRAME.registerComponent('arjs-anchor', {
@@ -95,11 +100,11 @@ AFRAME.registerComponent('arjs-anchor', {
 
             if (_this.data.preset === 'hiro') {
                 markerParameters.type = 'pattern'
-                markerParameters.patternUrl = THREEx.ArToolkitContext.baseURL + 'examples/marker-training/examples/pattern-files/pattern-hiro.patt'
+                markerParameters.patternUrl = ArToolkitContext.baseURL + 'examples/marker-training/examples/pattern-files/pattern-hiro.patt'
                 markerParameters.markersAreaEnabled = false
             } else if (_this.data.preset === 'kanji') {
                 markerParameters.type = 'pattern'
-                markerParameters.patternUrl = THREEx.ArToolkitContext.baseURL + 'examples/marker-training/examples/pattern-files/pattern-kanji.patt'
+                markerParameters.patternUrl = ArToolkitContext.baseURL + 'examples/marker-training/examples/pattern-files/pattern-kanji.patt'
                 markerParameters.markersAreaEnabled = false
             } else if (_this.data.preset === 'area') {
                 markerParameters.type = 'barcode'
@@ -132,7 +137,7 @@ AFRAME.registerComponent('arjs-anchor', {
             //////////////////////////////////////////////////////////////////////////////
 
             var arSession = arjsSystem._arSession
-            var arAnchor = _this._arAnchor = new ARjs.Anchor(arSession, markerParameters)
+            var arAnchor = _this._arAnchor = new Anchor(arSession, markerParameters)
 
             // it is now considered isReady
             _this.isReady = true
@@ -150,7 +155,7 @@ AFRAME.registerComponent('arjs-anchor', {
                     document.body.appendChild(containerElement)
                 }
                 // create anchorDebugUI
-                var anchorDebugUI = new ARjs.AnchorDebugUI(arAnchor)
+                var anchorDebugUI = new AnchorDebugUI(arAnchor)
                 containerElement.appendChild(anchorDebugUI.domElement)
             }
         }, 1000 / 60)

aframe/src/component-anchor.js

@@ -1,4 +1,9 @@
-//////////////////////////////////////////////////////////////////////////////
+import * as AFRAME from 'aframe';
+import Anchor from '../../three.js/src/new-api/arjs-anchor';
+import { AnchorDebugUI } from '../../three.js/src/new-api/arjs-debugui';
+import ArToolkitContext from '../../three.js/src/threex/arjs-context';
+
+// //////////////////////////////////////////////////////////////////////////////
 //		arjs-anchor
 //////////////////////////////////////////////////////////////////////////////
 AFRAME.registerComponent('arjs-anchor', {
@@ -92,11 +97,11 @@ AFRAME.registerComponent('arjs-anchor', {
 
             if (_this.data.preset === 'hiro') {
                 markerParameters.type = 'pattern'
-                markerParameters.patternUrl = THREEx.ArToolkitContext.baseURL + 'examples/marker-training/examples/pattern-files/pattern-hiro.patt'
+                markerParameters.patternUrl = ArToolkitContext.baseURL + 'examples/marker-training/examples/pattern-files/pattern-hiro.patt'
                 markerParameters.markersAreaEnabled = false
             } else if (_this.data.preset === 'kanji') {
                 markerParameters.type = 'pattern'
-                markerParameters.patternUrl = THREEx.ArToolkitContext.baseURL + 'examples/marker-training/examples/pattern-files/pattern-kanji.patt'
+                markerParameters.patternUrl = ArToolkitContext.baseURL + 'examples/marker-training/examples/pattern-files/pattern-kanji.patt'
                 markerParameters.markersAreaEnabled = false
             } else if (_this.data.preset === 'area') {
                 markerParameters.type = 'barcode'
@@ -125,7 +130,7 @@ AFRAME.registerComponent('arjs-anchor', {
             //////////////////////////////////////////////////////////////////////////////
 
             var arSession = arjsSystem._arSession
-            var arAnchor = _this._arAnchor = new ARjs.Anchor(arSession, markerParameters)
+            var arAnchor = _this._arAnchor = new Anchor(arSession, markerParameters)
 
             // it is now considered isReady
             _this.isReady = true
@@ -143,7 +148,7 @@ AFRAME.registerComponent('arjs-anchor', {
                     document.body.appendChild(containerElement)
                 }
                 // create anchorDebugUI
-                var anchorDebugUI = new ARjs.AnchorDebugUI(arAnchor)
+                var anchorDebugUI = new AnchorDebugUI(arAnchor)
                 containerElement.appendChild(anchorDebugUI.domElement)
             }
         }, 1000 / 60)

aframe/src/component-hit-testing.js

@@ -1,4 +1,7 @@
-//////////////////////////////////////////////////////////////////////////////
+import * as AFRAME from 'aframe';
+import HitTesting from '../../three.js/src/new-api/arjs-hittesting';
+
+// //////////////////////////////////////////////////////////////////////////////
 //		arjs-hit-testing
 //////////////////////////////////////////////////////////////////////////////
 AFRAME.registerComponent('arjs-hit-testing', {
@@ -40,7 +43,7 @@ AFRAME.registerComponent('arjs-hit-testing', {
 			var arSession = arjsSystem._arSession
 			var renderer = arSession.parameters.renderer
 
-			var hitTesting = _this._arHitTesting = new ARjs.HitTesting(arSession)
+			var hitTesting = _this._arHitTesting = new HitTesting(arSession)
 			hitTesting.enabled = _this.data.enabled
 
 			_this.isReady = true

aframe/src/index-nft.js

@@ -0,0 +1,10 @@
+// Components
+import './component-anchor-nft';
+import './component-hit-testing';
+
+// Location-based components
+import './location-based/gps-camera';
+import './location-based/gps-entity-place';
+
+// System
+import './system-arjs';

aframe/src/index.js

@@ -0,0 +1,10 @@
+// Components
+import './component-anchor';
+import './component-hit-testing';
+
+// Location-based components
+import './location-based/gps-camera';
+import './location-based/gps-entity-place';
+
+// System
+import './system-arjs';

aframe/src/location-based/gps-camera.js

@@ -1,3 +1,6 @@
+import * as AFRAME from 'aframe';
+import * as THREE from 'three';
+
 AFRAME.registerComponent('gps-camera', {
     _watchPositionId: null,
     originCoords: null,

aframe/src/location-based/gps-entity-place.js

@@ -1,3 +1,5 @@
+import * as AFRAME from 'aframe';
+
 AFRAME.registerComponent('gps-entity-place', {
     _cameraGps: null,
     schema: {

aframe/src/system-arjs.js

@@ -1,3 +1,8 @@
+import * as AFRAME from 'aframe';
+import Profile from '../../three.js/src/threex/arjs-profile';
+import Session from '../../three.js/src/new-api/arjs-session';
+import { SessionDebugUI } from '../../three.js/src/new-api/arjs-debugui';
+
 AFRAME.registerSystem('arjs', {
     schema: {
         trackingMethod: {
@@ -94,7 +99,7 @@ AFRAME.registerSystem('arjs', {
         //		setup arProfile
         //////////////////////////////////////////////////////////////////////////////
 
-        var arProfile = this._arProfile = new ARjs.Profile()
+        var arProfile = this._arProfile = new Profile()
             .trackingMethod(this.data.trackingMethod)
             .performance(this.data.performanceProfile)
             .defaultMarker()
@@ -142,7 +147,7 @@ AFRAME.registerSystem('arjs', {
             //////////////////////////////////////////////////////////////////////////////
             //		build ARjs.Session
             //////////////////////////////////////////////////////////////////////////////
-            var arSession = _this._arSession = new ARjs.Session({
+            var arSession = _this._arSession = new Session({
                 scene: scene,
                 renderer: renderer,
                 camera: camera,
@@ -191,7 +196,7 @@ AFRAME.registerSystem('arjs', {
                 }
 
                 // create sessionDebugUI
-                var sessionDebugUI = new ARjs.SessionDebugUI(arSession)
+                var sessionDebugUI = new SessionDebugUI(arSession)
                 containerElement.appendChild(sessionDebugUI.domElement)
             }
         })

package.json

@@ -5,7 +5,8 @@
   "main": "./aframe/build/aframe-ar.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "make build"
+    "build": "./node_modules/.bin/webpack --mode=production",
+    "build:dev": "./node_modules/.bin/webpack --mode=development"
   },
   "files": [
     "three.js/build",
@@ -47,5 +48,15 @@
   "bugs": {
     "url": "https://github.com/AR-js-org/AR.js/issues"
   },
-  "homepage": "https://github.com/AR-js-org/AR.js/"
+  "homepage": "https://github.com/AR-js-org/AR.js/",
+  "devDependencies": {
+    "webpack": "^5.1.3",
+    "webpack-cli": "^4.0.0",
+    "worker-loader": "^3.0.4"
+  },
+  "dependencies": {
+    "aframe": "^1.0.4",
+    "artoolkit5-js": "^0.0.4",
+    "three": "^0.125.0"
+  }
 }

three.js/examples/default.html

@@ -4,7 +4,7 @@
 <script src='vendor/three.js/build/three.js'></script>
 <script src='vendor/three.js/examples/js/libs/stats.min.js'></script>
 <!-- ar.js -->
-<script src="../build/ar.js"></script>
+<script src="../build/ar-threex.js"></script>
 <script>THREEx.ArToolkitContext.baseURL = '../'</script>
 
 <!-- Bind window error for error handling -->

three.js/src/index-arjs-nft.js

@@ -0,0 +1,20 @@
+import Anchor from './new-api/arjs-anchor';
+import HitTesting from './new-api/arjs-hittesting';
+import { AnchorDebugUI, SessionDebugUI } from './new-api/arjs-debugui';
+import Session from './new-api/arjs-session';
+import Utils from './new-api/arjs-utils';
+import Context from './threex/arjs-context-nft'; // nft-specific
+import Profile from './threex/arjs-profile';
+import Source from './threex/arjs-source';
+
+export {
+  Anchor,
+  HitTesting,
+  AnchorDebugUI,
+  SessionDebugUI,
+  Session,
+  Utils,
+  Context,
+  Profile,
+  Source
+};

three.js/src/index-arjs.js

@@ -0,0 +1,20 @@
+import Anchor from './new-api/arjs-anchor';
+import HitTesting from './new-api/arjs-hittesting';
+import { AnchorDebugUI, SessionDebugUI } from './new-api/arjs-debugui';
+import Session from './new-api/arjs-session';
+import Utils from './new-api/arjs-utils';
+import Context from './threex/arjs-context';
+import Profile from './threex/arjs-profile';
+import Source from './threex/arjs-source';
+
+export {
+  Anchor,
+  HitTesting,
+  AnchorDebugUI,
+  SessionDebugUI,
+  Session,
+  Utils,
+  Context,
+  Profile,
+  Source
+};

three.js/src/index-threex-nft.js

@@ -0,0 +1,19 @@
+import ArMarkerControls from './threex/arjs-markercontrols-nft'; // nft-specific
+import ArMarkerHelper from './threex/threex-armarkerhelper';
+import ArSmoothedControls from './threex/threex-arsmoothedcontrols';
+import ArToolkitContext from './threex/arjs-context-nft'; // nft-specific
+import ArToolkitProfile from './threex/arjs-profile';
+import ArToolkitSource from './threex/arjs-source';
+import ArMultiMarkerControls from './markers-area/threex-armultimarkercontrols';
+import ArMultiMakersLearning from './markers-area/threex-armultimarkerlearning'; // typo is spread over codebase
+
+export {
+  ArMarkerControls,
+  ArMarkerHelper,
+  ArSmoothedControls,
+  ArToolkitContext,
+  ArToolkitProfile,
+  ArToolkitSource,
+  ArMultiMarkerControls,
+  ArMultiMakersLearning
+};

three.js/src/index-threex.js

@@ -0,0 +1,19 @@
+import ArMarkerControls from './threex/arjs-markercontrols';
+import ArMarkerHelper from './threex/threex-armarkerhelper';
+import ArSmoothedControls from './threex/threex-arsmoothedcontrols';
+import ArToolkitContext from './threex/arjs-context';
+import ArToolkitProfile from './threex/arjs-profile';
+import ArToolkitSource from './threex/arjs-source';
+import ArMultiMarkerControls from './markers-area/threex-armultimarkercontrols';
+import ArMultiMakersLearning from './markers-area/threex-armultimarkerlearning'; // typo is spread over codebase
+
+export {
+  ArMarkerControls,
+  ArMarkerHelper,
+  ArSmoothedControls,
+  ArToolkitContext,
+  ArToolkitProfile,
+  ArToolkitSource,
+  ArMultiMarkerControls,
+  ArMultiMakersLearning
+};