From 882f72562582e48b1413ef725c40b7a120708dbc Mon Sep 17 00:00:00 2001
From: Lee Stemkoski <stemkoski@gmail.com>
Date: Sun, 22 Oct 2023 09:45:35 -0400
Subject: [PATCH] adding example variations

---
 hole-plane-2.html     | 209 ++++++++++++++++++++++++++++++++
 parabolic-path-2.html | 252 ++++++++++++++++++++++++++++++++++++++
 parabolic-path-3.html | 275 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 736 insertions(+)
 create mode 100644 hole-plane-2.html
 create mode 100644 parabolic-path-2.html
 create mode 100644 parabolic-path-3.html
diff --git a/hole-plane-2.html b/hole-plane-2.html
new file mode 100644
index 00000000..5bca8643
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/parabolic-path-2.html b/parabolic-path-2.html
new file mode 100644
index 00000000..ce107e66
--- /dev/null
+++ b/parabolic-path-2.html
@@ -0,0 +1,252 @@
+<!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 material1, mesh1;
+
+var ballMeshArray = [];
+
+initialize();
+animate();
+
+
+
+function initialize()
+{
+	scene = new THREE.Scene();
+				
+	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
+	markerRootA = new THREE.Group();
+	scene.add(markerRootA);
+	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRootA, {
+		type: 'pattern', patternUrl: "data/letterA.patt",
+	});
+	
+	markerRootB = new THREE.Group();
+	scene.add(markerRootB);
+	let markerControls2 = new THREEx.ArMarkerControls(arToolkitContext, markerRootB, {
+		type: 'pattern', patternUrl: "data/letterB.patt",
+	});
+
+	////////////////////////////////////////////////////////////
+	// setup scene
+	////////////////////////////////////////////////////////////
+	
+	renderer.shadowMap.enabled = true;
+	renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+	
+	let loader = new THREE.TextureLoader();
+		
+	sceneGroup = new THREE.Group();
+	markerRootA.add(sceneGroup);
+	
+	let floorGeometry = new THREE.PlaneGeometry( 20,20 );
+	let floorMaterial = new THREE.ShadowMaterial();
+	floorMaterial.opacity = 0.3;
+	let floorMesh = new THREE.Mesh( floorGeometry, floorMaterial );
+	floorMesh.rotation.x = -Math.PI/2;
+	floorMesh.receiveShadow = true;
+	sceneGroup.add( floorMesh );
+	
+	// ballMeshArray
+	var colors = [0xFF0000, 0xFF8800, 0xFFFF00, 0x00CC00, 0x0000FF, 0x8800FF];
+	for (let i = 0; i < 6; i++)
+	{
+		let ballMesh = new THREE.Mesh(
+			new THREE.SphereGeometry(0.25, 32, 32),
+			new THREE.MeshLambertMaterial({ 
+				map: loader.load("images/basketball-gray.png"), 
+				color: colors[i]
+			})
+		);
+		ballMesh.castShadow = true;
+		scene.add( ballMesh );
+
+		ballMeshArray.push(ballMesh);
+	}
+
+	let light = new THREE.PointLight( 0xffffff, 1, 100 );
+	light.position.set( 0,4,0 ); // default; light shining from top
+	light.castShadow = true;
+	sceneGroup.add( light );
+	
+	let lightSphere = new THREE.Mesh(
+		new THREE.SphereGeometry(0.1),
+		new THREE.MeshBasicMaterial({
+			color: 0xffffff,
+			transparent: true,
+			opacity: 0.8
+		})
+	);
+	lightSphere.position.copy( light.position );
+	sceneGroup.add( lightSphere );
+	
+	let ambientLight = new THREE.AmbientLight( 0x666666 );
+	sceneGroup.add( ambientLight );
+	// let helper = new THREE.CameraHelper( light.shadow.camera );
+	// sceneGroup.add( helper );
+	
+	// default normal of a plane is 0,0,1. Apply mesh rotation to it.
+	let clipPlane = new THREE.Plane().setFromNormalAndCoplanarPoint(
+		new THREE.Vector3(0,1,0), new THREE.Vector3(0,0,0) );
+	renderer.clippingPlanes = [clipPlane];
+}
+
+function update()
+{
+	// update artoolkit on every frame
+	if ( arToolkitSource.ready !== false )
+		arToolkitContext.update( arToolkitSource.domElement );
+
+	if ( markerRootA.visible && markerRootB.visible )
+	{
+		// align clipping plane to scene.
+		renderer.clippingPlanes[0].setFromNormalAndCoplanarPoint(
+			new THREE.Vector3(0,1,0).applyQuaternion(sceneGroup.getWorldQuaternion()),
+			sceneGroup.getWorldPosition()
+		);
+		
+		for (let i = 0; i < 6; i++)
+		{	
+			console.log(i)
+			console.log(totalTime)
+			let p = parabolicPath( 
+				markerRootA.getWorldPosition(), 
+				markerRootB.getWorldPosition(), 
+				(totalTime -  i*Math.PI/3 ) % 6.283    );
+			console.log(p);
+
+			let ballMesh = ballMeshArray[i];	
+			ballMesh.position.copy( p );
+			ballMesh.rotation.z += 0.1
+		}
+	}
+}
+
+// create a function p() that passes through the points (0,p0), (1,p1), (2,p2) 
+//  and evaluate that function at time t.
+function parabolaEvaluate(p0, p1, p2, t)
+{
+	return ( 0.5*(p0 - 2*p1 + p2) )*t*t + ( -0.5*(3*p0 - 4*p1 + p2) )*t + ( p0 );
+}
+
+function parabolicPath( pointStart, pointEnd, time )
+{
+	let pointMiddle = new THREE.Vector3().addVectors( pointStart, pointEnd ).multiplyScalar(0.5).add( new THREE.Vector3(0,2,0) );
+	return new THREE.Vector3(
+		parabolaEvaluate( pointStart.x, pointMiddle.x, pointEnd.x, time ),
+		parabolaEvaluate( pointStart.y, pointMiddle.y, pointEnd.y, time ),
+		parabolaEvaluate( pointStart.z, pointMiddle.z, pointEnd.z, time )
+	);	
+}
+
+function render()
+{
+	renderer.render( scene, camera );
+}
+
+function animate()
+{
+	requestAnimationFrame(animate);
+	deltaTime = clock.getDelta();
+	totalTime += deltaTime;
+	update();
+	render();
+}
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/parabolic-path-3.html b/parabolic-path-3.html
new file mode 100644
index 00000000..b5985264
--- /dev/null
+++ b/parabolic-path-3.html
@@ -0,0 +1,275 @@
+<!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 material1, mesh1;
+
+var ballMeshArray = [];
+
+initialize();
+animate();
+
+
+
+function initialize()
+{
+	scene = new THREE.Scene();
+				
+	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
+	markerRootA = new THREE.Group();
+	scene.add(markerRootA);
+	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRootA, {
+		type: 'pattern', patternUrl: "data/letterA.patt",
+	});
+	
+	markerRootB = new THREE.Group();
+	scene.add(markerRootB);
+	let markerControls2 = new THREEx.ArMarkerControls(arToolkitContext, markerRootB, {
+		type: 'pattern', patternUrl: "data/letterB.patt",
+	});
+
+	////////////////////////////////////////////////////////////
+	// setup scene
+	////////////////////////////////////////////////////////////
+	
+	renderer.shadowMap.enabled = true;
+	renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+	
+	let loader = new THREE.TextureLoader();
+		
+	sceneGroup = new THREE.Group();
+	markerRootA.add(sceneGroup);
+	
+	let floorGeometry = new THREE.PlaneGeometry( 20,20 );
+	let floorMaterial = new THREE.ShadowMaterial();
+	floorMaterial.opacity = 0.3;
+	let floorMesh = new THREE.Mesh( floorGeometry, floorMaterial );
+	floorMesh.rotation.x = -Math.PI/2;
+	floorMesh.receiveShadow = true;
+	sceneGroup.add( floorMesh );
+	
+	// ballMeshArray
+	var colors = [0xFF0000, 0xFF8800, 0xFFFF00, 0x00CC00, 0x0000FF, 0x8800FF];
+	for (let i = 0; i < 6; i++)
+	{
+		let ballMesh = new THREE.Mesh(
+			new THREE.SphereGeometry(0.25, 32, 32),
+			new THREE.MeshLambertMaterial({ 
+				map: loader.load("images/basketball-gray.png"), 
+				color: colors[i]
+			})
+		);
+		ballMesh.castShadow = true;
+		scene.add( ballMesh );
+
+		ballMeshArray.push(ballMesh);
+	}
+
+	let light = new THREE.PointLight( 0xffffff, 1, 100 );
+	light.position.set( 0,4,0 ); // default; light shining from top
+	light.castShadow = true;
+	sceneGroup.add( light );
+	
+	let lightSphere = new THREE.Mesh(
+		new THREE.SphereGeometry(0.1),
+		new THREE.MeshBasicMaterial({
+			color: 0xffffff,
+			transparent: true,
+			opacity: 0.8
+		})
+	);
+	lightSphere.position.copy( light.position );
+	sceneGroup.add( lightSphere );
+	
+	let ambientLight = new THREE.AmbientLight( 0x666666 );
+	sceneGroup.add( ambientLight );
+	// let helper = new THREE.CameraHelper( light.shadow.camera );
+	// sceneGroup.add( helper );
+	
+	
+	// default normal of a plane is 0,0,1. Apply mesh rotation to it.
+	let clipPlane = new THREE.Plane().setFromNormalAndCoplanarPoint(
+		new THREE.Vector3(0,1,0), new THREE.Vector3(0,0,0) );
+	renderer.clippingPlanes = [clipPlane];
+	
+
+	let geometry0 = new THREE.PlaneGeometry(2,2, 4,4);
+	geometry0.faces.splice(10, 4); // make hole by removing triangles
+	geometry0.faceVertexUvs[0].splice(10, 4);
+	
+	geometry0.faces.splice(14, 4); // make hole by removing triangles
+	geometry0.faceVertexUvs[0].splice(14, 4);
+	
+
+	let material0 = new THREE.MeshBasicMaterial({
+		map: loader.load( 'images/color-grid.png' ),
+	});
+	
+	let mesh0 = new THREE.Mesh( geometry0, material0 );
+	
+	mesh0.rotation.x = -Math.PI/2;
+	mesh0.position.y = 0.04;
+	markerRootA.add(mesh0);	
+
+	let mesh1 = mesh0.clone();
+	mesh0.position.y = 0.05;
+	markerRootB.add(mesh1);
+
+}
+
+function update()
+{
+	// update artoolkit on every frame
+	if ( arToolkitSource.ready !== false )
+		arToolkitContext.update( arToolkitSource.domElement );
+
+	if ( markerRootA.visible && markerRootB.visible )
+	{
+		
+		// align clipping plane to scene.
+		renderer.clippingPlanes[0].setFromNormalAndCoplanarPoint(
+			new THREE.Vector3(0,1,0).applyQuaternion(sceneGroup.getWorldQuaternion()),
+			sceneGroup.getWorldPosition()
+		);
+		
+		for (let i = 0; i < 6; i++)
+		{	
+			let p = parabolicPath( 
+				markerRootA.getWorldPosition(), 
+				markerRootB.getWorldPosition(), 
+				(totalTime -  i*Math.PI/3 ) % 6.283    );
+
+			let ballMesh = ballMeshArray[i];	
+			ballMesh.position.copy( p );
+			ballMesh.rotation.z += 0.1
+		}
+	}
+}
+
+// create a function p() that passes through the points (0,p0), (1,p1), (2,p2) 
+//  and evaluate that function at time t.
+function parabolaEvaluate(p0, p1, p2, t)
+{
+	return ( 0.5*(p0 - 2*p1 + p2) )*t*t + ( -0.5*(3*p0 - 4*p1 + p2) )*t + ( p0 );
+}
+
+function parabolicPath( pointStart, pointEnd, time )
+{
+	let pointMiddle = new THREE.Vector3().addVectors( pointStart, pointEnd ).multiplyScalar(0.5).add( new THREE.Vector3(0,2,0) );
+	return new THREE.Vector3(
+		parabolaEvaluate( pointStart.x, pointMiddle.x, pointEnd.x, time ),
+		parabolaEvaluate( pointStart.y, pointMiddle.y, pointEnd.y, time ),
+		parabolaEvaluate( pointStart.z, pointMiddle.z, pointEnd.z, time )
+	);	
+}
+
+function render()
+{
+	renderer.render( scene, camera );
+}
+
+function animate()
+{
+	requestAnimationFrame(animate);
+	deltaTime = clock.getDelta();
+	totalTime += deltaTime;
+	update();
+	render();
+}
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
