adding example variations

stemkoski · Oct 22, 2023 · 882f725 · 882f725
1 parent 08f31e5
commit 882f725
Show file tree

Hide file tree

Showing 3 changed files with 736 additions and 0 deletions.
diff --git a/hole-plane-2.html b/hole-plane-2.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<head>
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+	<title>Hello, world!</title>
+	<!-- include three.js library -->
+	<script src='js/three.js'></script>
+	<!-- include jsartookit -->
+	<script src="jsartoolkit5/artoolkit.min.js"></script>
+	<script src="jsartoolkit5/artoolkit.api.js"></script>
+	<!-- include threex.artoolkit -->
+	<script src="threex/threex-artoolkitsource.js"></script>
+	<script src="threex/threex-artoolkitcontext.js"></script>
+	<script src="threex/threex-arbasecontrols.js"></script>
+	<script src="threex/threex-armarkercontrols.js"></script>
+</head>
+
+<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
+
+<!-- 
+  Example created by Lee Stemkoski: https://github.com/stemkoski
+  Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
+-->
+
+<script>
+
+var scene, camera, renderer, clock, deltaTime, totalTime;
+
+var arToolkitSource, arToolkitContext;
+
+var markerRoot1;
+
+var mesh1;
+
+initialize();
+animate();
+
+function initialize()
+{
+	scene = new THREE.Scene();
+
+	let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.0 );
+	scene.add( ambientLight );
+
+	camera = new THREE.Camera();
+	scene.add(camera);
+
+	renderer = new THREE.WebGLRenderer({
+		antialias : true,
+		alpha: true
+	});
+	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
+	renderer.setSize( 640, 480 );
+	renderer.domElement.style.position = 'absolute'
+	renderer.domElement.style.top = '0px'
+	renderer.domElement.style.left = '0px'
+	document.body.appendChild( renderer.domElement );
+
+	clock = new THREE.Clock();
+	deltaTime = 0;
+	totalTime = 0;
+
+	////////////////////////////////////////////////////////////
+	// setup arToolkitSource
+	////////////////////////////////////////////////////////////
+
+	arToolkitSource = new THREEx.ArToolkitSource({
+		sourceType : 'webcam',
+	});
+
+	function onResize()
+	{
+		arToolkitSource.onResize()	
+		arToolkitSource.copySizeTo(renderer.domElement)	
+		if ( arToolkitContext.arController !== null )
+		{
+			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
+		}	
+	}
+
+	arToolkitSource.init(function onReady(){
+		onResize()
+	});
+
+	// handle resize event
+	window.addEventListener('resize', function(){
+		onResize()
+	});
+
+	////////////////////////////////////////////////////////////
+	// setup arToolkitContext
+	////////////////////////////////////////////////////////////	
+
+	// create atToolkitContext
+	arToolkitContext = new THREEx.ArToolkitContext({
+		cameraParametersUrl: 'data/camera_para.dat',
+		detectionMode: 'mono'
+	});
+
+	// copy projection matrix to camera when initialization complete
+	arToolkitContext.init( function onCompleted(){
+		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
+	});
+
+	////////////////////////////////////////////////////////////
+	// setup markerRoots
+	////////////////////////////////////////////////////////////
+
+	// build markerControls
+	markerRoot1 = new THREE.Group();
+	markerRoot1.name = 'marker1';
+	scene.add(markerRoot1);
+	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
+		type : 'pattern',
+		patternUrl : "data/letterA.patt",
+	})
+
+	// the inside of the hole
+	let geometry1	= new THREE.CubeGeometry(2,2,2);
+	let loader = new THREE.TextureLoader();
+	let texture = loader.load( 'images/tiles.jpg', render );
+	let material1	= new THREE.MeshBasicMaterial({
+		transparent : true,
+		map: texture,
+		color: 0xFF0000,
+		side: THREE.BackSide
+	}); 
+
+	mesh1 = new THREE.Mesh( geometry1, material1 );
+	mesh1.position.y = -1;
+
+	markerRoot1.add( mesh1 );
+
+	// the invisibility cloak (plane with a hole)
+	/*
+	let geometry0 = new THREE.PlaneGeometry(18,18, 9,9);
+	geometry0.faces.splice(80, 2); // make hole by removing top two triangles
+	geometry0.faceVertexUvs[0].splice(80, 2);
+	*/
+
+	// the border
+	let geometry0 = new THREE.PlaneGeometry(4,4, 4,4);
+	geometry0.faces.splice(10, 4); // make hole by removing top two triangles
+	geometry0.faceVertexUvs[0].splice(10, 4);
+
+	geometry0.faces.splice(14, 4); // make hole by removing top two triangles
+	geometry0.faceVertexUvs[0].splice(14, 4);
+
+
+	let material0 = new THREE.MeshBasicMaterial({
+		map: loader.load( 'images/color-grid.png' ), // for testing placement
+		colorWrite: true,
+		wireframe: false
+	});
+
+	let mesh0 = new THREE.Mesh( geometry0, material0 );
+
+	mesh0.rotation.x = -Math.PI/2;
+	markerRoot1.add(mesh0);	
+
+	// the blocker
+	let geometry11 = new THREE.PlaneGeometry(8,8, 4,4);
+	geometry11.faces.splice(10, 4); // make hole by removing top two triangles
+	geometry11.faceVertexUvs[0].splice(10, 4);
+
+	geometry11.faces.splice(14, 4); // make hole by removing top two triangles
+	geometry11.faceVertexUvs[0].splice(14, 4);
+
+
+	let material11 = new THREE.MeshBasicMaterial({
+		map: loader.load( 'images/color-grid.png' ), // for testing placement
+		colorWrite: false,
+		wireframe: false
+	});
+
+	let mesh11 = new THREE.Mesh( geometry11, material11 );
+
+	mesh11.rotation.x = -Math.PI/2;
+	markerRoot1.add(mesh11);	
+
+}
+
+
+function update()
+{
+	// update artoolkit on every frame
+	if ( arToolkitSource.ready !== false )
+		arToolkitContext.update( arToolkitSource.domElement );
+}
+
+
+function render()
+{
+	renderer.render( scene, camera );
+}
+
+
+function animate()
+{
+	requestAnimationFrame(animate);
+	deltaTime = clock.getDelta();
+	totalTime += deltaTime;
+	update();
+	render();
+}
+
+</script>
+
+</body>
+</html>