other examples converted

- default, default-thinner-border and dev examples
AR-js-org · Oct 28, 2024 · 7a420e8 · 7a420e8
1 parent 503ff1d
commit 7a420e8
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 36 deletions.
diff --git a/three.js/examples/default-thinner-border.html b/three.js/examples/default-thinner-border.html
@@ -1,11 +1,18 @@
 <!DOCTYPE html>
 <meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
-<!-- three.js library -->
-<script src='vendor/three.js/build/three.js'></script>
+<!-- statsmin..js library -->
+
 <script src='vendor/three.js/examples/js/libs/stats.min.js'></script>
-<!-- ar.js -->
-<script src="../build/ar-threex.js"></script>
-<script>THREEx.ArToolkitContext.baseURL = '../'</script>
+
+<!-- import three.js and ar-threex library as a module-->
+<script type="importmap">
+	{
+      "imports": {
+		"threex": "../build/ar-threex.module.js",
+        "three": "./vendor/three.js/build/three.module.min.js"
+      }
+    }
+</script>
 
 <!-- Bind window error for error handling -->
 <script>
@@ -18,7 +25,12 @@
 	<a href='https://github.com/AR-js-org/AR.js/' target='_blank'>AR.js</a> - use a ar.js marker with pattRatio 0.9
 	<br/>
 	Contact me any time at <a href='https://twitter.com/nicolocarp' target='_blank'>@nicolocarp</a>
-</div><script>
+</div>
+<script type="module">
+	import * as THREE from 'three'
+	import { ArSmoothedControls, ArToolkitSource, ArToolkitContext, ArToolkitProfile, ArMarkerControls }  from 'threex'
+
+	ArToolkitContext.baseURL = '../'
 	//////////////////////////////////////////////////////////////////////////////////
 	//		Init
 	//////////////////////////////////////////////////////////////////////////////////
@@ -54,11 +66,11 @@
 	//          handle arToolkitSource
 	////////////////////////////////////////////////////////////////////////////////
 
-	var artoolkitProfile = new THREEx.ArToolkitProfile()
+	var artoolkitProfile = new ArToolkitProfile()
 	// artoolkitProfile.sourceWebcam()
-	artoolkitProfile.sourceImage(THREEx.ArToolkitContext.baseURL + '../test/data/images/marker-artoolkit-pattern-pattratio-09.png')
+	artoolkitProfile.sourceImage(ArToolkitContext.baseURL + '../test/data/images/marker-artoolkit-pattern-pattratio-09.png')
 
-	var arToolkitSource = new THREEx.ArToolkitSource(artoolkitProfile.sourceParameters)
+	var arToolkitSource = new ArToolkitSource(artoolkitProfile.sourceParameters)
 
 	arToolkitSource.init(function onReady(){
 		onResize()
@@ -84,7 +96,7 @@
 	artoolkitProfile.contextParameters.patternRatio = 0.9
 
 	// create atToolkitContext
-	var arToolkitContext = new THREEx.ArToolkitContext(artoolkitProfile.contextParameters)
+	var arToolkitContext = new ArToolkitContext(artoolkitProfile.contextParameters)
 	// initialize it
 	arToolkitContext.init(function onCompleted(){
 		// copy projection matrix to camera
@@ -105,17 +117,17 @@
 
 	var markerGroup = new THREE.Group
 	scene.add(markerGroup)
-	var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerGroup, {
+	var markerControls = new ArMarkerControls(arToolkitContext, markerGroup, {
 		type : 'pattern',
 		// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
-		patternUrl : THREEx.ArToolkitContext.baseURL + 'examples/marker-training/examples/pattern-files/pattern-arjs.patt',
+		patternUrl : ArToolkitContext.baseURL + 'examples/marker-training/examples/pattern-files/pattern-arjs.patt',
 	})
 
 
 	// build a smoothedControls
 	var smoothedGroup = new THREE.Group()
 	scene.add(smoothedGroup)
-	var smoothedControls = new THREEx.ArSmoothedControls(smoothedGroup)
+	var smoothedControls = new ArSmoothedControls(smoothedGroup)
 	onRenderFcts.push(function(delta){
 		smoothedControls.update(markerGroup)
 	})

diff --git a/three.js/examples/default.html b/three.js/examples/default.html
@@ -1,11 +1,19 @@
 <!DOCTYPE html>
 <meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
-<!-- three.js library -->
-<script src='vendor/three.js/build/three.js'></script>
+<!-- stats.min.js library -->
+
 <script src='vendor/three.js/examples/js/libs/stats.min.js'></script>
-<!-- ar.js -->
-<script src="../build/ar-threex.js"></script>
-<script>THREEx.ArToolkitContext.baseURL = '../'</script>
+
+<!-- import three.js and ar-threex library as a module-->
+
+<script type="importmap">
+	{
+      "imports": {
+		"threex": "../build/ar-threex.module.js",
+        "three": "./vendor/three.js/build/three.module.min.js"
+      }
+    }
+</script>
 
 <!-- Bind window error for error handling -->
 <script>
@@ -21,7 +29,11 @@
 		<br />
 		Contact me any time at <a href='https://twitter.com/nicolocarp' target='_blank'>@nicolocarp</a>
 	</div>
-	<script>
+	<script type="module">
+		import * as THREE from 'three'
+		import { ArToolkitProfile, ArToolkitSource, ArToolkitContext, ArMarkerControls }  from 'threex'
+
+		ArToolkitContext.baseURL = '../'
 		//////////////////////////////////////////////////////////////////////////////////
 		//		Init
 		//////////////////////////////////////////////////////////////////////////////////
@@ -61,12 +73,12 @@
 		//          handle arToolkitSource
 		////////////////////////////////////////////////////////////////////////////////
 
-		var artoolkitProfile = new THREEx.ArToolkitProfile()
+		var artoolkitProfile = new ArToolkitProfile()
 		artoolkitProfile.sourceWebcam()
 		// artoolkitProfile.sourceVideo(THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4').kanjiMarker();
 		// artoolkitProfile.sourceImage(THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg').hiroMarker()
 
-		var arToolkitSource = new THREEx.ArToolkitSource(artoolkitProfile.sourceParameters)
+		var arToolkitSource = new ArToolkitSource(artoolkitProfile.sourceParameters)
 
 		arToolkitSource.init(() => {
 			arToolkitSource.domElement.addEventListener('canplay', () => {
@@ -103,7 +115,7 @@
 			console.log('initARContext()');
 
 			// CONTEXT
-			arToolkitContext = new THREEx.ArToolkitContext(artoolkitProfile.contextParameters)
+			arToolkitContext = new ArToolkitContext(artoolkitProfile.contextParameters)
 
 			arToolkitContext.init(() => {
 				camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
@@ -118,9 +130,9 @@
 
 
 			// MARKER
-			arMarkerControls = new THREEx.ArMarkerControls(arToolkitContext, markerGroup, {
+			arMarkerControls = new ArMarkerControls(arToolkitContext, markerGroup, {
 				type: 'pattern',
-				patternUrl: THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
+				patternUrl: ArToolkitContext.baseURL + '../data/data/patt.hiro',
 			})
 
 			console.log('ArMarkerControls', arMarkerControls);

diff --git a/three.js/examples/dev.html b/three.js/examples/dev.html
@@ -1,19 +1,30 @@
 <!DOCTYPE html>
 <meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
-<!-- three.js library -->
-<script src='vendor/three.js/build/three.js'></script>
+<!--stat.min.js library -->
 <script src='vendor/three.js/examples/js/libs/stats.min.js'></script>
-<!-- include threex.artoolkit -->
-<script src="../build/ar-threex.js"></script>
-<script>THREEx.ArToolkitContext.baseURL = '../'</script>
+
+<!-- include threex.artoolkit  and three.js -->
+
+<script type="importmap">
+	{
+      "imports": {
+		"threex": "../build/ar-threex.module.js",
+        "three": "./vendor/three.js/build/three.module.min.js"
+      }
+    }
+</script>
 
 <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 	<div style='position: absolute; top: 10px; width:100%; text-align: center;z-index:1' ;>
 		<a href='https://github.com/AR-js-org/AR.js/' target='_blank'>AR.js</a> - developement playground
 		<br />
 		Contact me any time at <a href='https://twitter.com/nicolocarp' target='_blank'>@nicolocarp</a>
 	</div>
-	<script>
+	<script type="module">
+		import * as THREE from 'three'
+		import { ArSmoothedControls, ArToolkitSource, ArToolkitContext, ArMarkerControls }  from 'threex'
+
+		ArToolkitContext.baseURL = '../'
 		//////////////////////////////////////////////////////////////////////////////////
 		//		Init
 		//////////////////////////////////////////////////////////////////////////////////
@@ -60,7 +71,7 @@
 		//          handle arToolkitSource
 		////////////////////////////////////////////////////////////////////////////////
 
-		var arToolkitSource = new THREEx.ArToolkitSource({
+		var arToolkitSource = new ArToolkitSource({
 			// to read from the webcam
 			sourceType: 'webcam',
 
@@ -111,8 +122,8 @@
 			console.log('initARContext()');
 
 			// CONTEXT
-			arToolkitContext = new THREEx.ArToolkitContext({
-				cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
+			arToolkitContext = new ArToolkitContext({
+				cameraParametersUrl: ArToolkitContext.baseURL + '../data/data/camera_para.dat',
 				// debug: true,
 				// detectionMode: 'mono_and_matrix',
 				detectionMode: 'mono',
@@ -138,9 +149,9 @@
 
 
 			// MARKER
-			arMarkerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
+			arMarkerControls = new ArMarkerControls(arToolkitContext, markerRoot, {
 				type: 'pattern',
-				patternUrl: THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
+				patternUrl: ArToolkitContext.baseURL + '../data/data/patt.hiro',
 			})
 
 			console.log('ArMarkerControls', arMarkerControls);
@@ -180,7 +191,7 @@
 		// build a smoothedControls
 		var smoothedRoot = new THREE.Group()
 		scene.add(smoothedRoot)
-		var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot, {
+		var smoothedControls = new ArSmoothedControls(smoothedRoot, {
 			lerpPosition: 0.4,
 			lerpQuaternion: 0.3,
 			lerpScale: 1,