Skip to content

Commit 63384f8

Browse files
kalwaltkalwalt
committed
ar.module.js and examples
1 parent fb99dbf commit 63384f8

File tree

4 files changed

+76
-30
lines changed

4 files changed

+76
-30
lines changed

‎three.js/build/ar.module.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎three.js/examples/arjs-session.html

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
<!DOCTYPE html>
22
<meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
3-
<!-- three.js library -->
4-
<script src='../examples/vendor/three.js/build/three.js'></script>
5-
<!-- include ar.js -->
6-
<script src="../build/ar.js"></script>
3+
<!-- import ar.js three.js library -->
74

8-
<script>ARjs.Context.baseURL = '../'</script>
5+
<script type="importmap">
6+
{
7+
"imports": {
8+
"arjs": "./../build/ar.module.js",
9+
"three": "./vendor/three.js/build/three.module.min.js"
10+
}
11+
}
12+
</script>
913

1014
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
1115
<div style='position: absolute; top: 10px; width:100%; text-align: center; z-index: 1;'>
@@ -22,8 +26,12 @@
2226
/
2327
<a href='?best'>best</a>
2428
</div>
25-
<script>
29+
<script type="module">
30+
import * as THREE from 'three'
31+
import { Profile, Session, Anchor, HitTesting, Utils, SessionDebugUI, AnchorDebugUI } from 'arjs'
32+
2633
; (function () {
34+
Context.baseURL = '../'
2735
// get tracking method from location.search
2836
var trackingMethod = location.search.substring(1) ? location.search.substring(1) : 'best'
2937

@@ -55,14 +63,14 @@
5563
// Initialize the camera
5664
//////////////////////////////////////////////////////////////////////////////////
5765

58-
var camera = ARjs.Utils.createDefaultCamera(trackingMethod)
66+
var camera = Utils.createDefaultCamera(trackingMethod)
5967
scene.add(camera)
6068

6169
////////////////////////////////////////////////////////////////////////////////
6270
// Set up Arjs.Profile
6371
////////////////////////////////////////////////////////////////////////////////
6472

65-
var arProfile = new ARjs.Profile()
73+
var arProfile = new Profile()
6674
.sourceWebcam()
6775
.trackingMethod(trackingMethod)
6876
// .changeMatrixMode('modelViewMatrix')
@@ -74,7 +82,7 @@
7482
// build ARjs.Session
7583
//////////////////////////////////////////////////////////////////////////////
7684

77-
var arSession = new ARjs.Session({
85+
var arSession = new Session({
7886
scene: scene,
7987
renderer: renderer,
8088
camera: camera,
@@ -89,7 +97,7 @@
8997
// Create a ARjs.Anchor
9098
////////////////////////////////////////////////////////////////////////////////
9199

92-
var arAnchor = new ARjs.Anchor(arSession, arProfile.defaultMarkerParameters)
100+
var arAnchor = new Anchor(arSession, arProfile.defaultMarkerParameters)
93101
onRenderFcts.push(function () {
94102
arAnchor.update()
95103
})
@@ -98,7 +106,7 @@
98106
// handle Hit Tester
99107
//////////////////////////////////////////////////////////////////////////////
100108

101-
var hitTesting = new ARjs.HitTesting(arSession)
109+
var hitTesting = new HitTesting(arSession)
102110
onRenderFcts.push(function () {
103111
hitTesting.update(camera, arAnchor.object3d, arAnchor.parameters.changeMatrixMode)
104112
})
@@ -145,10 +153,10 @@
145153
}
146154

147155

148-
var sessionDebugUI = new ARjs.SessionDebugUI(arSession, null)
156+
var sessionDebugUI = new SessionDebugUI(arSession, null)
149157
document.querySelector('#arjsDebugUIContainer').appendChild(sessionDebugUI.domElement)
150158

151-
var anchorDebugUI = new ARjs.AnchorDebugUI(arAnchor)
159+
var anchorDebugUI = new AnchorDebugUI(arAnchor)
152160
document.querySelector('#arjsDebugUIContainer').appendChild(anchorDebugUI.domElement)
153161

154162
//////////////////////////////////////////////////////////////////////////////////

‎three.js/examples/test-runner.html

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
<!DOCTYPE html>
22
<meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
33
<title>AR.js Test Runner</title>
4-
<!-- three.js library -->
5-
<script src='../examples/vendor/three.js/build/three.js'></script>
6-
<!-- include ar.js and ar-threex.js -->
7-
<script src="../build/ar.js"></script>
8-
<script src="../build/ar-threex.js"></script>
9-
10-
<script>THREEx.ArToolkitContext.baseURL = '../'</script>
4+
<!-- include three.js, ar.js and ar-threex.js as modules -->
5+
6+
<script type="importmap">
7+
{
8+
"imports": {
9+
"arjs": "./../build/ar.module.js",
10+
"threex": "./../build/ar-threex.module.js",
11+
"three": "./vendor/three.js/build/three.module.min.js"
12+
}
13+
}
14+
</script>
1115

1216
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
1317
<div style='position: absolute; top: 10px; width:100%; text-align: center; z-index: 1;'>
@@ -24,7 +28,11 @@
2428
/
2529
<a href='?best'>best</a>
2630
</div>
27-
<script>
31+
<script type="module">
32+
import * as THREE from 'three'
33+
import { Profile, Session, Anchor, Context, HitTesting, Utils, SessionDebugUI, AnchorDebugUI } from 'arjs'
34+
import { ArToolkitProfile, ArToolkitSource, ArToolkitContext, ArMarkerControls } from 'threex'
35+
ArToolkitContext.baseURL = '../'
2836
// ;(function(){
2937
// get tracking method from location.search
3038
var trackingMethod = location.search.substring(1) ? location.search.substring(1) : 'best'
@@ -57,18 +65,18 @@
5765
// Initialize the camera
5866
//////////////////////////////////////////////////////////////////////////////////
5967

60-
var camera = ARjs.Utils.createDefaultCamera(trackingMethod)
68+
var camera = Utils.createDefaultCamera(trackingMethod)
6169
scene.add(camera)
6270

6371
////////////////////////////////////////////////////////////////////////////////
6472
// Set up Arjs.Profile
6573
////////////////////////////////////////////////////////////////////////////////
6674

67-
var arProfile = new ARjs.Profile().trackingMethod(trackingMethod)
75+
var arProfile = new Profile().trackingMethod(trackingMethod)
6876

6977
if (arProfile.contextParameters.trackingBackend === 'artoolkit') {
7078
// arProfile.sourceImage(THREEx.ArToolkitContext.baseURL + '../test/data/images/markers-page-ipad.jpg')
71-
arProfile.sourceImage(THREEx.ArToolkitContext.baseURL + '../test/data/images/markers-page-ipad-640x480.jpg')
79+
arProfile.sourceImage(ArToolkitContext.baseURL + '../test/data/images/markers-page-ipad-640x480.jpg')
7280
// arProfile.sourceImage('/data/images/img.jpg')
7381
// arProfile.sourceVideo(THREEx.ArToolkitContext.baseURL + '../test/data/videos/markers-page-ipad.mp4')
7482
} else console.assert(false)
@@ -82,9 +90,9 @@
8290
// build ARjs.Session
8391
//////////////////////////////////////////////////////////////////////////////
8492

85-
ARjs.AnchorDebugUI.MarkersAreaLearnerURL = ARjs.Context.baseURL + 'examples/multi-markers/examples/learner-testrunner.html'
93+
AnchorDebugUI.MarkersAreaLearnerURL = Context.baseURL + 'examples/multi-markers/examples/learner-testrunner.html'
8694

87-
var arSession = new ARjs.Session({
95+
var arSession = new Session({
8896
scene: scene,
8997
renderer: renderer,
9098
camera: camera,
@@ -100,7 +108,7 @@
100108
// Create a ARjs.Anchor
101109
////////////////////////////////////////////////////////////////////////////////
102110

103-
var arAnchor = new ARjs.Anchor(arSession, arProfile.defaultMarkerParameters)
111+
var arAnchor = new Anchor(arSession, arProfile.defaultMarkerParameters)
104112
onRenderFcts.push(function () {
105113
arAnchor.update()
106114
})
@@ -109,7 +117,7 @@
109117
// handle Hit Tester
110118
//////////////////////////////////////////////////////////////////////////////
111119

112-
var hitTesting = new ARjs.HitTesting(arSession)
120+
var hitTesting = new HitTesting(arSession)
113121
onRenderFcts.push(function () {
114122
hitTesting.update(camera, arAnchor.object3d, arAnchor.parameters.changeMatrixMode)
115123
})
@@ -156,10 +164,10 @@
156164
}
157165

158166

159-
var sessionDebugUI = new ARjs.SessionDebugUI(arSession, null)
167+
var sessionDebugUI = new SessionDebugUI(arSession, null)
160168
document.querySelector('#arjsDebugUIContainer').appendChild(sessionDebugUI.domElement)
161169

162-
var anchorDebugUI = new ARjs.AnchorDebugUI(arAnchor)
170+
var anchorDebugUI = new AnchorDebugUI(arAnchor)
163171
document.querySelector('#arjsDebugUIContainer').appendChild(anchorDebugUI.domElement)
164172

165173
//////////////////////////////////////////////////////////////////////////////////

‎webpack.config.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,35 @@ module.exports = (env, argv) => {
204204
root: 'THREE' // indicates global variable
205205
}
206206
}
207+
},
208+
{
209+
name: 'ar.js.module',
210+
devtool,
211+
experiments: {
212+
outputModule: true,
213+
},
214+
entry: './three.js/src/index-arjs.js',
215+
output: {
216+
//library: 'ARjs',
217+
library: {
218+
type: 'module',
219+
},
220+
path: path.resolve(__dirname, 'three.js/build'),
221+
filename: 'ar.module.js',
222+
//libraryTarget: 'umd',
223+
//globalObject: 'this'
224+
},
225+
resolve: {
226+
alias: {
227+
jsartoolkit: '@ar-js-org/artoolkit5-js',
228+
threexArmarkercontrols$: path.resolve(__dirname, 'three.js/src/threex/arjs-markercontrols.js')
229+
}
230+
},
231+
module,
232+
externalsType: 'module',
233+
externals: {
234+
three: 'three',
235+
}
207236
}
208237
];
209238
};

0 commit comments

Comments
 (0)