updated a bunch of examples

AR-js-org · Oct 29, 2024 · fb99dbf · fb99dbf
1 parent 7a420e8
commit fb99dbf
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 45 deletions.
diff --git a/three.js/examples/measure-it.html b/three.js/examples/measure-it.html
@@ -1,10 +1,14 @@
 <!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>
-<!-- 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;'>
@@ -83,7 +87,11 @@
 			}
 		}
 	</style>
-	<script>
+	<script type="module">
+		import * as THREE from 'three'
+		import { ArToolkitSource, ArToolkitContext, ArMarkerControls }  from 'threex'
+
+		ArToolkitContext.baseURL = '../'
 		//////////////////////////////////////////////////////////////////////////////////
 		//		Init
 		//////////////////////////////////////////////////////////////////////////////////
@@ -124,7 +132,7 @@
 		//          handle arToolkitSource
 		////////////////////////////////////////////////////////////////////////////////
 
-		var arToolkitSource = new THREEx.ArToolkitSource({
+		var arToolkitSource = new ArToolkitSource({
 			// to read from the webcam
 			sourceType: 'webcam',
 
@@ -159,8 +167,8 @@
 		function initARContext() {
 			console.log('initARContext()');
 			// create atToolkitContext
-			arToolkitContext = new THREEx.ArToolkitContext({
-				cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
+			arToolkitContext = new ArToolkitContext({
+				cameraParametersUrl: ArToolkitContext.baseURL + '../data/data/camera_para.dat',
 				detectionMode: 'mono',
 			})
 			// initialize it
@@ -174,16 +182,16 @@
 				window.arToolkitContext = arToolkitContext;
 			})
 			// build markerControls for markerRoot1
-			markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
+			markerControls = new ArMarkerControls(arToolkitContext, markerRoot1, {
 				type: 'pattern',
-				patternUrl: THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
+				patternUrl: ArToolkitContext.baseURL + '../data/data/patt.hiro',
 				// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji',
 			})
 			// build markerControls for markerRoot2
-			markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot2, {
+			markerControls = new ArMarkerControls(arToolkitContext, markerRoot2, {
 				type: 'pattern',
 				// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
-				patternUrl: THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji',
+				patternUrl: ArToolkitContext.baseURL + '../data/data/patt.kanji',
 			})
 		}
 

diff --git a/three.js/examples/minimal_ES6.html b/three.js/examples/minimal_ES6.html
@@ -1,23 +1,32 @@
 <!DOCTYPE html>
 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 <link rel="import" href="resources/index.css">
-<!-- three.js library -->
-<script src='vendor/three.js/build/three.min.js'></script>
-<!-- ar.js -->
-<script src="../build/ar-threex.js"></script>
-<script>THREEx.ArToolkitContext.baseURL = '../'</script>
+<!-- three.js and threex library -->
+<script type="importmap">
+	{
+      "imports": {
+		"threex": "../build/ar-threex.module.js",
+        "three": "./vendor/three.js/build/three.module.min.js"
+      }
+    }
+</script>
 
 <body style='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> - three.js camera transform
 	<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 { ArToolkitSource, ArToolkitContext, ArMarkerControls }  from 'threex'
+
+	ArToolkitContext.baseURL = '../'
 	//////////////////////////////////////////////////////////////////////////////////
 	//		Init
 	//////////////////////////////////////////////////////////////////////////////////
 
     const cameraParam = "../../data/data/camera_para.dat"
-    var arToolkitSource, arToolkitContext;
+    var arToolkitSource, arToolkitContext, arMarkerControls;
 
 	// init renderer
 	var renderer	= new THREE.WebGLRenderer({
@@ -49,7 +58,7 @@
 	//          handle arToolkitSource
 	////////////////////////////////////////////////////////////////////////////////
 
-	arToolkitSource = new THREEx.ArToolkitSource({
+	arToolkitSource = new ArToolkitSource({
 		// to read from the webcam
 		sourceType : 'webcam',
         sourceWidth: window.innerWidth > window.innerHeight ? 640 : 480,
@@ -77,7 +86,7 @@
         console.log('initARContext()');
 
         // CONTEXT
-        arToolkitContext = new THREEx.ArToolkitContext({
+        arToolkitContext = new ArToolkitContext({
             cameraParametersUrl: cameraParam,
             detectionMode: 'mono_and_matrix',
             matrixCodeType: '3x3',
@@ -98,7 +107,7 @@
         });
 
         // MARKER
-        arMarkerControls = new THREEx.ArMarkerControls(arToolkitContext, camera, {
+        arMarkerControls = new ArMarkerControls(arToolkitContext, camera, {
            type: 'barcode',
            barcodeValue: 0,
            smooth: true,

diff --git a/three.js/examples/mobile-performance.html b/three.js/examples/mobile-performance.html
@@ -1,19 +1,29 @@
 <!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.min.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>
+<!-- three.js and threex library -->
+<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> - three.js mobile performance
 		<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
 		//////////////////////////////////////////////////////////////////////////////////
@@ -53,7 +63,7 @@
 		//          handle arToolkitSource
 		////////////////////////////////////////////////////////////////////////////////
 
-		var arToolkitSource = new THREEx.ArToolkitSource({
+		var arToolkitSource = new ArToolkitSource({
 			// to read from the webcam
 			sourceType: 'webcam',
 
@@ -91,8 +101,8 @@
 		function initARContext() {
 			console.log('initARContext()');
 
-			arToolkitContext = new THREEx.ArToolkitContext({
-				cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
+			arToolkitContext = new ArToolkitContext({
+				cameraParametersUrl: ArToolkitContext.baseURL + '../data/data/camera_para.dat',
 				detectionMode: 'mono',
 				maxDetectionRate: 30,
 				canvasWidth: 80 * 3,
@@ -108,9 +118,9 @@
 				console.log('arToolkitContext', arToolkitContext);
 				window.arToolkitContext = arToolkitContext;
 			})
-			artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
+			artoolkitMarker = new ArMarkerControls(arToolkitContext, markerRoot, {
 				type: 'pattern',
-				patternUrl: THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro'
+				patternUrl: ArToolkitContext.baseURL + '../data/data/patt.hiro'
 				// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji'
 			})
 		}
@@ -156,7 +166,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,

diff --git a/three.js/examples/profile.html b/three.js/examples/profile.html
@@ -1,11 +1,16 @@
 <!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.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 three.js and threex.artoolkit -->
+<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' ;>
@@ -25,7 +30,11 @@
 			</select>
 		</label>
 	</div>
-	<script>
+	<script type="module">
+		import * as THREE from 'three'
+		import { ArToolkitProfile, ArToolkitSource, ArToolkitContext, ArMarkerControls }  from 'threex'
+
+		ArToolkitContext.baseURL = '../'
 		//////////////////////////////////////////////////////////////////////////////////
 		//		Init
 		//////////////////////////////////////////////////////////////////////////////////
@@ -88,7 +97,7 @@
 		////////////////////////////////////////////////////////////////////////////////
 
 
-		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()
@@ -105,7 +114,7 @@
 		//		handle arToolkitSource
 		//////////////////////////////////////////////////////////////////////////////
 
-		var arToolkitSource = new THREEx.ArToolkitSource(artoolkitProfile.sourceParameters)
+		var arToolkitSource = new ArToolkitSource(artoolkitProfile.sourceParameters)
 
 		arToolkitSource.init(function onReady() {
 			initARContext()
@@ -130,7 +139,7 @@
 		function initARContext() {
 			console.log('initARContext()');
 			// create atToolkitContext
-			arToolkitContext = new THREEx.ArToolkitContext(artoolkitProfile.contextParameters)
+			arToolkitContext = new ArToolkitContext(artoolkitProfile.contextParameters)
 			// initialize it
 			arToolkitContext.init(function onCompleted() {
 				// copy projection matrix to camera
@@ -141,7 +150,7 @@
 				console.log('arToolkitContext', arToolkitContext);
 				window.arToolkitContext = arToolkitContext;
 			})
-			artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, artoolkitProfile.defaultMarkerParameters)
+			artoolkitMarker = new ArMarkerControls(arToolkitContext, markerRoot, artoolkitProfile.defaultMarkerParameters)
 		}
 
 		function getSourceOrientation() {