Skip to content

Commit 7a420e8

Browse files
kalwaltkalwalt
committed
other examples converted
- default, default-thinner-border and dev examples
1 parent 503ff1d commit 7a420e8

File tree

3 files changed

+71
-36
lines changed

3 files changed

+71
-36
lines changed

‎three.js/examples/default-thinner-border.html

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
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='vendor/three.js/build/three.js'></script>
3+
<!-- statsmin..js library -->
4+
55
<script src='vendor/three.js/examples/js/libs/stats.min.js'></script>
6-
<!-- ar.js -->
7-
<script src="../build/ar-threex.js"></script>
8-
<script>THREEx.ArToolkitContext.baseURL = '../'</script>
6+
7+
<!-- import three.js and ar-threex library as a module-->
8+
<script type="importmap">
9+
{
10+
"imports": {
11+
"threex": "../build/ar-threex.module.js",
12+
"three": "./vendor/three.js/build/three.module.min.js"
13+
}
14+
}
15+
</script>
916

1017
<!-- Bind window error for error handling -->
1118
<script>
@@ -18,7 +25,12 @@
1825
<a href='https://github.com/AR-js-org/AR.js/' target='_blank'>AR.js</a> - use a ar.js marker with pattRatio 0.9
1926
<br/>
2027
Contact me any time at <a href='https://twitter.com/nicolocarp' target='_blank'>@nicolocarp</a>
21-
</div><script>
28+
</div>
29+
<script type="module">
30+
import * as THREE from 'three'
31+
import { ArSmoothedControls, ArToolkitSource, ArToolkitContext, ArToolkitProfile, ArMarkerControls } from 'threex'
32+
33+
ArToolkitContext.baseURL = '../'
2234
//////////////////////////////////////////////////////////////////////////////////
2335
// Init
2436
//////////////////////////////////////////////////////////////////////////////////
@@ -54,11 +66,11 @@
5466
// handle arToolkitSource
5567
////////////////////////////////////////////////////////////////////////////////
5668

57-
var artoolkitProfile = new THREEx.ArToolkitProfile()
69+
var artoolkitProfile = new ArToolkitProfile()
5870
// artoolkitProfile.sourceWebcam()
59-
artoolkitProfile.sourceImage(THREEx.ArToolkitContext.baseURL + '../test/data/images/marker-artoolkit-pattern-pattratio-09.png')
71+
artoolkitProfile.sourceImage(ArToolkitContext.baseURL + '../test/data/images/marker-artoolkit-pattern-pattratio-09.png')
6072

61-
var arToolkitSource = new THREEx.ArToolkitSource(artoolkitProfile.sourceParameters)
73+
var arToolkitSource = new ArToolkitSource(artoolkitProfile.sourceParameters)
6274

6375
arToolkitSource.init(function onReady(){
6476
onResize()
@@ -84,7 +96,7 @@
8496
artoolkitProfile.contextParameters.patternRatio = 0.9
8597

8698
// create atToolkitContext
87-
var arToolkitContext = new THREEx.ArToolkitContext(artoolkitProfile.contextParameters)
99+
var arToolkitContext = new ArToolkitContext(artoolkitProfile.contextParameters)
88100
// initialize it
89101
arToolkitContext.init(function onCompleted(){
90102
// copy projection matrix to camera
@@ -105,17 +117,17 @@
105117

106118
var markerGroup = new THREE.Group
107119
scene.add(markerGroup)
108-
var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerGroup, {
120+
var markerControls = new ArMarkerControls(arToolkitContext, markerGroup, {
109121
type : 'pattern',
110122
// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
111-
patternUrl : THREEx.ArToolkitContext.baseURL + 'examples/marker-training/examples/pattern-files/pattern-arjs.patt',
123+
patternUrl : ArToolkitContext.baseURL + 'examples/marker-training/examples/pattern-files/pattern-arjs.patt',
112124
})
113125

114126

115127
// build a smoothedControls
116128
var smoothedGroup = new THREE.Group()
117129
scene.add(smoothedGroup)
118-
var smoothedControls = new THREEx.ArSmoothedControls(smoothedGroup)
130+
var smoothedControls = new ArSmoothedControls(smoothedGroup)
119131
onRenderFcts.push(function(delta){
120132
smoothedControls.update(markerGroup)
121133
})

‎three.js/examples/default.html

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
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='vendor/three.js/build/three.js'></script>
3+
<!-- stats.min.js library -->
4+
55
<script src='vendor/three.js/examples/js/libs/stats.min.js'></script>
6-
<!-- ar.js -->
7-
<script src="../build/ar-threex.js"></script>
8-
<script>THREEx.ArToolkitContext.baseURL = '../'</script>
6+
7+
<!-- import three.js and ar-threex library as a module-->
8+
9+
<script type="importmap">
10+
{
11+
"imports": {
12+
"threex": "../build/ar-threex.module.js",
13+
"three": "./vendor/three.js/build/three.module.min.js"
14+
}
15+
}
16+
</script>
917

1018
<!-- Bind window error for error handling -->
1119
<script>
@@ -21,7 +29,11 @@
2129
<br />
2230
Contact me any time at <a href='https://twitter.com/nicolocarp' target='_blank'>@nicolocarp</a>
2331
</div>
24-
<script>
32+
<script type="module">
33+
import * as THREE from 'three'
34+
import { ArToolkitProfile, ArToolkitSource, ArToolkitContext, ArMarkerControls } from 'threex'
35+
36+
ArToolkitContext.baseURL = '../'
2537
//////////////////////////////////////////////////////////////////////////////////
2638
// Init
2739
//////////////////////////////////////////////////////////////////////////////////
@@ -61,12 +73,12 @@
6173
// handle arToolkitSource
6274
////////////////////////////////////////////////////////////////////////////////
6375

64-
var artoolkitProfile = new THREEx.ArToolkitProfile()
76+
var artoolkitProfile = new ArToolkitProfile()
6577
artoolkitProfile.sourceWebcam()
6678
// artoolkitProfile.sourceVideo(THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4').kanjiMarker();
6779
// artoolkitProfile.sourceImage(THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg').hiroMarker()
6880

69-
var arToolkitSource = new THREEx.ArToolkitSource(artoolkitProfile.sourceParameters)
81+
var arToolkitSource = new ArToolkitSource(artoolkitProfile.sourceParameters)
7082

7183
arToolkitSource.init(() => {
7284
arToolkitSource.domElement.addEventListener('canplay', () => {
@@ -103,7 +115,7 @@
103115
console.log('initARContext()');
104116

105117
// CONTEXT
106-
arToolkitContext = new THREEx.ArToolkitContext(artoolkitProfile.contextParameters)
118+
arToolkitContext = new ArToolkitContext(artoolkitProfile.contextParameters)
107119

108120
arToolkitContext.init(() => {
109121
camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
@@ -118,9 +130,9 @@
118130

119131

120132
// MARKER
121-
arMarkerControls = new THREEx.ArMarkerControls(arToolkitContext, markerGroup, {
133+
arMarkerControls = new ArMarkerControls(arToolkitContext, markerGroup, {
122134
type: 'pattern',
123-
patternUrl: THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
135+
patternUrl: ArToolkitContext.baseURL + '../data/data/patt.hiro',
124136
})
125137

126138
console.log('ArMarkerControls', arMarkerControls);

‎three.js/examples/dev.html

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,30 @@
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='vendor/three.js/build/three.js'></script>
3+
<!--stat.min.js library -->
54
<script src='vendor/three.js/examples/js/libs/stats.min.js'></script>
6-
<!-- include threex.artoolkit -->
7-
<script src="../build/ar-threex.js"></script>
8-
<script>THREEx.ArToolkitContext.baseURL = '../'</script>
5+
6+
<!-- include threex.artoolkit and three.js -->
7+
8+
<script type="importmap">
9+
{
10+
"imports": {
11+
"threex": "../build/ar-threex.module.js",
12+
"three": "./vendor/three.js/build/three.module.min.js"
13+
}
14+
}
15+
</script>
916

1017
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
1118
<div style='position: absolute; top: 10px; width:100%; text-align: center;z-index:1' ;>
1219
<a href='https://github.com/AR-js-org/AR.js/' target='_blank'>AR.js</a> - developement playground
1320
<br />
1421
Contact me any time at <a href='https://twitter.com/nicolocarp' target='_blank'>@nicolocarp</a>
1522
</div>
16-
<script>
23+
<script type="module">
24+
import * as THREE from 'three'
25+
import { ArSmoothedControls, ArToolkitSource, ArToolkitContext, ArMarkerControls } from 'threex'
26+
27+
ArToolkitContext.baseURL = '../'
1728
//////////////////////////////////////////////////////////////////////////////////
1829
// Init
1930
//////////////////////////////////////////////////////////////////////////////////
@@ -60,7 +71,7 @@
6071
// handle arToolkitSource
6172
////////////////////////////////////////////////////////////////////////////////
6273

63-
var arToolkitSource = new THREEx.ArToolkitSource({
74+
var arToolkitSource = new ArToolkitSource({
6475
// to read from the webcam
6576
sourceType: 'webcam',
6677

@@ -111,8 +122,8 @@
111122
console.log('initARContext()');
112123

113124
// CONTEXT
114-
arToolkitContext = new THREEx.ArToolkitContext({
115-
cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
125+
arToolkitContext = new ArToolkitContext({
126+
cameraParametersUrl: ArToolkitContext.baseURL + '../data/data/camera_para.dat',
116127
// debug: true,
117128
// detectionMode: 'mono_and_matrix',
118129
detectionMode: 'mono',
@@ -138,9 +149,9 @@
138149

139150

140151
// MARKER
141-
arMarkerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
152+
arMarkerControls = new ArMarkerControls(arToolkitContext, markerRoot, {
142153
type: 'pattern',
143-
patternUrl: THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
154+
patternUrl: ArToolkitContext.baseURL + '../data/data/patt.hiro',
144155
})
145156

146157
console.log('ArMarkerControls', arMarkerControls);
@@ -180,7 +191,7 @@
180191
// build a smoothedControls
181192
var smoothedRoot = new THREE.Group()
182193
scene.add(smoothedRoot)
183-
var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot, {
194+
var smoothedControls = new ArSmoothedControls(smoothedRoot, {
184195
lerpPosition: 0.4,
185196
lerpQuaternion: 0.3,
186197
lerpScale: 1,

0 commit comments

Comments
 (0)