├── .gitattributes
├── README.md
├── barcode.html
├── basic-scene.html
├── chemistry.html
├── clipping-planes.html
├── css
    └── index.css
├── custom-patterns.html
├── data
    ├── camera_para.dat
    ├── hiro.patt
    ├── kanji.patt
    ├── letterA.patt
    ├── letterB.patt
    ├── letterC.patt
    ├── letterD.patt
    ├── letterF.patt
    └── letterG.patt
├── globe-multi-marker.html
├── globe.html
├── hello-cube.html
├── hole-box.html
├── hole-plane.html
├── hole-ring.html
├── images
    ├── arrow-curved.png
    ├── arrow-double.png
    ├── arrow-single.png
    ├── basketball-gray.png
    ├── basketball.png
    ├── beach
    │   ├── negx.jpg
    │   ├── negy.jpg
    │   ├── negz.jpg
    │   ├── posx.jpg
    │   ├── posy.jpg
    │   ├── posz.jpg
    │   └── readme.txt
    ├── border.png
    ├── chemistry
    │   ├── border.png
    │   ├── card-C.png
    │   ├── card-Cl.png
    │   ├── card-H.png
    │   ├── card-N.png
    │   ├── card-Na.png
    │   ├── card-O.png
    │   ├── card-Si.png
    │   ├── card-template-GIMP.xcf
    │   ├── label-C.png
    │   ├── label-H.png
    │   ├── label-N.png
    │   ├── label-O.png
    │   ├── label-template-GIMP.xcf
    │   ├── shadow-0.png
    │   ├── shadow-1.png
    │   ├── shadow-2.png
    │   ├── shadow-3.png
    │   ├── shadow-4.png
    │   ├── shadow-5.png
    │   ├── shadow-6.png
    │   ├── shadow-7.png
    │   └── shadow-8.png
    ├── church
    │   ├── negx.jpg
    │   ├── negy.jpg
    │   ├── negz.jpg
    │   ├── posx.jpg
    │   ├── posy.jpg
    │   ├── posz.jpg
    │   └── readme.txt
    ├── color-grid.png
    ├── demo
    │   ├── basic-scene.png
    │   ├── camera-movement.png
    │   ├── clipping-planes.png
    │   ├── custom-patterns.png
    │   ├── globe-multi-marker-large.png
    │   ├── globe-multi-marker.png
    │   ├── globe.png
    │   ├── hello-cube.png
    │   ├── hole-box.png
    │   ├── hole-ring.png
    │   ├── magic-cube.png
    │   ├── mesh-movement.png
    │   ├── model.png
    │   ├── parabolic-path.png
    │   ├── portal-half-keyboard-test.png
    │   ├── portal-view-AR-large.png
    │   ├── portal-view-AR.png
    │   ├── portal-view-large.png
    │   ├── portal-view.png
    │   ├── refraction.png
    │   ├── shader.png
    │   ├── shadow-balls.png
    │   ├── shadow.png
    │   ├── stencil-test.png
    │   ├── texture.png
    │   ├── video.png
    │   ├── water-effect-AR.png
    │   └── water-effect.png
    ├── earth-sphere.jpg
    ├── earth.jpg
    ├── field-sphere.jpg
    ├── glow.png
    ├── key-blank.png
    ├── mountain
    │   ├── negx.jpg
    │   ├── negy.jpg
    │   ├── negz.jpg
    │   ├── posx.jpg
    │   ├── posy.jpg
    │   ├── posz.jpg
    │   └── readme.txt
    ├── movement-controls.png
    ├── noise.jpg
    ├── pixels.png
    ├── sand.jpg
    ├── scene-sphere-outside.jpg
    ├── scene-sphere-room.jpg
    ├── sphere-colored.png
    ├── sphere-pos-neg.png
    ├── tiles.jpg
    ├── water-2.jpg
    ├── water.jpg
    ├── xneg.png
    ├── xpos.png
    ├── yneg.png
    ├── ypos.png
    ├── zneg.png
    └── zpos.png
├── index.html
├── js
    ├── LoaderSupport.js
    ├── MTLLoader.js
    ├── OBJLoader.js
    ├── ar.js
    ├── dat.gui.min.js
    ├── keyboard.js
    ├── stats.min.js
    └── three.js
├── jsartoolkit5
    ├── artoolkit.api.js
    ├── artoolkit.debug.js
    ├── artoolkit.min.js
    └── artoolkit.three.js
├── keyboard-camera-move.html
├── keyboard-mesh-move.html
├── keyboard.html
├── magic-cube.html
├── markers
    ├── 10cm
    │   ├── kanji.png
    │   ├── letterA.png
    │   ├── letterB.png
    │   ├── letterC.png
    │   ├── letterD.png
    │   ├── letterF.png
    │   └── readme.txt
    ├── barcode05.png
    ├── barcodes
    │   ├── 00.png
    │   ├── 01.png
    │   ├── 02.png
    │   ├── 03.png
    │   ├── 04.png
    │   ├── 05.png
    │   ├── 06.png
    │   ├── 07.png
    │   ├── 08.png
    │   ├── 09.png
    │   ├── 10.png
    │   ├── 11.png
    │   ├── 12.png
    │   ├── 13.png
    │   ├── 14.png
    │   ├── 15.png
    │   ├── label-00.png
    │   ├── label-01.png
    │   ├── label-02.png
    │   ├── label-03.png
    │   └── template.png
    ├── cube.png
    ├── hiro.png
    ├── kanji-a.png
    ├── kanji-abcd.png
    ├── kanji-b.png
    ├── kanji-c.png
    ├── kanji-d.png
    ├── kanji.png
    ├── letterA.png
    ├── letterB.png
    ├── letterC.png
    ├── letterD.png
    ├── letterF.png
    └── readme.txt
├── model.html
├── models
    ├── fish-2.mtl
    ├── fish-2.obj
    └── fish_texture.png
├── parabolic-path.html
├── portal-half-keyboard-test.html
├── portal-view-AR.html
├── portal-view.html
├── refraction.html
├── screen-hole-QR.png
├── screen-hole.html
├── shader.html
├── shadow-balls.html
├── shadow.html
├── skybox-test.html
├── smoothed-controls.html
├── stencil-test.html
├── synchronized-relative-movement.html
├── texture.html
├── threex
    ├── threex-arbasecontrols.js
    ├── threex-armarkercontrols.js
    ├── threex-arsmoothedcontrols.js
    ├── threex-artoolkitcontext.js
    └── threex-artoolkitsource.js
├── video.html
├── video
    ├── sintel.mp4
    └── sintel.ogv
├── water-effect-AR.html
└── water-effect.html


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # AR-Examples
2 | 


--------------------------------------------------------------------------------
/barcode.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, AR Cube!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | 	<!-- include jsartookit -->
  8 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
  9 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 10 | 	<!-- include threex.artoolkit -->
 11 | 	<script src="threex/threex-artoolkitsource.js"></script>
 12 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 13 | 	<script src="threex/threex-arbasecontrols.js"></script>
 14 | 	<script src="threex/threex-armarkercontrols.js"></script>
 15 | </head>
 16 | 
 17 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 18 | 
 19 | <!-- 
 20 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 21 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 22 | -->
 23 | 
 24 | <script>
 25 | 
 26 | var scene, camera, renderer, clock, deltaTime, totalTime;
 27 | 
 28 | var arToolkitSource, arToolkitContext;
 29 | 
 30 | var markerRoot1, markerRoot2;
 31 | 
 32 | var mesh1;
 33 | 
 34 | initialize();
 35 | animate();
 36 | 
 37 | function initialize()
 38 | {
 39 | 	scene = new THREE.Scene();
 40 | 
 41 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
 42 | 	scene.add( ambientLight );
 43 | 				
 44 | 	camera = new THREE.Camera();
 45 | 	scene.add(camera);
 46 | 
 47 | 	renderer = new THREE.WebGLRenderer({
 48 | 		antialias : true,
 49 | 		alpha: true
 50 | 	});
 51 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 52 | 	renderer.setSize( 640, 480 );
 53 | 	renderer.domElement.style.position = 'absolute'
 54 | 	renderer.domElement.style.top = '0px'
 55 | 	renderer.domElement.style.left = '0px'
 56 | 	document.body.appendChild( renderer.domElement );
 57 | 
 58 | 	clock = new THREE.Clock();
 59 | 	deltaTime = 0;
 60 | 	totalTime = 0;
 61 | 	
 62 | 	////////////////////////////////////////////////////////////
 63 | 	// setup arToolkitSource
 64 | 	////////////////////////////////////////////////////////////
 65 | 
 66 | 	arToolkitSource = new THREEx.ArToolkitSource({
 67 | 		sourceType : 'webcam',
 68 | 	});
 69 | 
 70 | 	function onResize()
 71 | 	{
 72 | 		arToolkitSource.onResize()	
 73 | 		arToolkitSource.copySizeTo(renderer.domElement)	
 74 | 		if ( arToolkitContext.arController !== null )
 75 | 		{
 76 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
 77 | 		}	
 78 | 	}
 79 | 
 80 | 	arToolkitSource.init(function onReady(){
 81 | 		onResize()
 82 | 	});
 83 | 	
 84 | 	// handle resize event
 85 | 	window.addEventListener('resize', function(){
 86 | 		onResize()
 87 | 	});
 88 | 	
 89 | 	////////////////////////////////////////////////////////////
 90 | 	// setup arToolkitContext
 91 | 	////////////////////////////////////////////////////////////	
 92 | 
 93 | 	// create atToolkitContext
 94 | 	arToolkitContext = new THREEx.ArToolkitContext({
 95 | 		cameraParametersUrl: 'data/camera_para.dat',
 96 | 		detectionMode: "mono_and_matrix",
 97 | 		matrixCodeType: "3x3",
 98 | 	});
 99 | 	
100 | 	// copy projection matrix to camera when initialization complete
101 | 	arToolkitContext.init( function onCompleted(){
102 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
103 | 	});
104 | 
105 | 	////////////////////////////////////////////////////////////
106 | 	// setup markerRoots
107 | 	////////////////////////////////////////////////////////////
108 | 
109 | 	// build markerControls
110 | 	markerRoot1 = new THREE.Group();
111 | 	scene.add(markerRoot1);
112 | 	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
113 | 		type: "barcode", barcodeValue: "5",
114 | 	})
115 | 
116 | 	let geometry1	= new THREE.CubeGeometry(1,1,1);
117 | 	let material1	= new THREE.MeshNormalMaterial({
118 | 		transparent: true,
119 | 		opacity: 0.5,
120 | 		side: THREE.DoubleSide
121 | 	}); 
122 | 	
123 | 	mesh1 = new THREE.Mesh( geometry1, material1 );
124 | 	mesh1.position.y = 0.5;
125 | 	
126 | 	markerRoot1.add( mesh1 );
127 | }
128 | 
129 | 
130 | function update()
131 | {
132 | 	// update artoolkit on every frame
133 | 	if ( arToolkitSource.ready !== false )
134 | 		arToolkitContext.update( arToolkitSource.domElement );
135 | }
136 | 
137 | 
138 | function render()
139 | {
140 | 	renderer.render( scene, camera );
141 | }
142 | 
143 | 
144 | function animate()
145 | {
146 | 	requestAnimationFrame(animate);
147 | 	deltaTime = clock.getDelta();
148 | 	totalTime += deltaTime;
149 | 	update();
150 | 	render();
151 | }
152 | 
153 | </script>
154 | 
155 | </body>
156 | </html>


--------------------------------------------------------------------------------
/basic-scene.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | </head>
  8 | 
  9 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 10 | 
 11 | <!-- 
 12 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 13 | -->
 14 | 
 15 | <!-- ---------------- Custom Shader Code ------------------------ -->
 16 | <script id="vertexShader" type="x-shader/x-vertex">
 17 | uniform float time;
 18 | varying vec2 textureUV;
 19 | void main() 
 20 | { 
 21 |     textureUV = uv;
 22 |     gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 23 | }
 24 | </script>
 25 | 
 26 | <script id="fragmentShader" type="x-shader/x-vertex"> 
 27 | uniform float time;
 28 | uniform sampler2D baseTexture;
 29 | varying vec2 textureUV;
 30 | void main() 
 31 | {
 32 | 	gl_FragColor = texture2D( baseTexture, textureUV );
 33 | }  
 34 | </script>
 35 | <!-- ----------------------------------------------------------- -->
 36 | 
 37 | <script>
 38 | 
 39 | var scene, camera, renderer, clock, deltaTime, totalTime;
 40 | 
 41 | var mesh, shaderMaterial;
 42 | 
 43 | initialize();
 44 | animate();
 45 | 
 46 | function initialize()
 47 | {
 48 | 	scene = new THREE.Scene();
 49 | 				
 50 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
 51 | 	camera.position.set(0, 2, 4);
 52 | 	camera.lookAt( scene.position );	
 53 | 	scene.add( camera );
 54 | 
 55 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.00 );
 56 | 	scene.add( ambientLight );
 57 | 	
 58 | 	// let pointLight = new THREE.PointLight();
 59 | 	// camera.add( pointLight );
 60 | 	
 61 | 	renderer = new THREE.WebGLRenderer({
 62 | 		antialias : true,
 63 | 		alpha: false
 64 | 	});
 65 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 66 | 	renderer.setSize( window.innerWidth, window.innerHeight );
 67 | 	renderer.domElement.style.position = 'absolute'
 68 | 	renderer.domElement.style.top  = '0px'
 69 | 	renderer.domElement.style.left = '0px'
 70 | 	document.body.appendChild( renderer.domElement );
 71 | 	window.addEventListener( 'resize', onWindowResize, false );
 72 | 
 73 | 	clock = new THREE.Clock();
 74 | 	deltaTime = 0;
 75 | 	totalTime = 0;
 76 | 	
 77 | 	let geometry = new THREE.BoxGeometry(1,1,1);
 78 | 	
 79 | 	let loader = new THREE.TextureLoader();
 80 | 	let texture = loader.load( 'images/color-grid.png', render );
 81 | 	
 82 | 	/*
 83 | 	// Basic, unlit material
 84 | 	let basicMaterial = new THREE.MeshBasicMaterial({ 
 85 | 		color: 0x0000ff,
 86 | 		wireframe: false,
 87 | 	});
 88 | 	*/
 89 | 	
 90 | 	// Basic, lit material
 91 | 	let material = new THREE.MeshLambertMaterial({ 
 92 | 		map: texture
 93 | 	});
 94 | 	
 95 | 	/*
 96 | 	// Shader-based material
 97 | 	let shaderMaterial = new THREE.ShaderMaterial({
 98 | 		uniforms: {
 99 | 			time: { value: 1.0 },
100 | 			baseTexture: { value: texture }
101 | 		},
102 | 		vertexShader: document.getElementById( 'vertexShader' ).textContent,
103 | 		fragmentShader: document.getElementById( 'fragmentShader' ).textContent
104 | 	});
105 | 	*/
106 | 	
107 | 	mesh = new THREE.Mesh( geometry, material );
108 | 	
109 | 	scene.add( mesh );
110 | }
111 | 
112 | function update()
113 | {
114 | 	mesh.rotation.y += 0.01;
115 | 	// shaderMaterial.uniforms.time.value += deltaTime;
116 | }
117 | 
118 | function render()
119 | {
120 | 	renderer.render( scene, camera );
121 | }
122 | 
123 | function animate()
124 | {
125 | 	requestAnimationFrame(animate);
126 | 	deltaTime = clock.getDelta();
127 | 	totalTime += deltaTime;
128 | 	update();
129 | 	render();
130 | }
131 | 
132 | function onWindowResize() 
133 | {
134 | 	camera.aspect = window.innerWidth / window.innerHeight;
135 | 	camera.updateProjectionMatrix();
136 | 	renderer.setSize( window.innerWidth, window.innerHeight );
137 | }
138 | 
139 | </script>
140 | 
141 | </body>
142 | </html>


--------------------------------------------------------------------------------
/clipping-planes.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<script src='js/keyboard.js'></script>
  6 | 	<!-- include three.js library -->
  7 | 	<script src='js/three.js'></script>
  8 | </head>
  9 | 
 10 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 11 | 
 12 | <!-- 
 13 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 14 | -->
 15 | 
 16 | <script>
 17 | 
 18 | var scene, camera, renderer, clock, deltaTime, totalTime, keyboard;
 19 | 
 20 | var mover, secondMover, plane, secondPlane;
 21 | 
 22 | initialize();
 23 | animate();
 24 | 
 25 | function initialize()
 26 | {
 27 | 	scene = new THREE.Scene();
 28 | 				
 29 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
 30 | 	camera.position.set(0, 6, 8);
 31 | 	camera.lookAt( scene.position );	
 32 | 	scene.add( camera );
 33 | 
 34 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.00 );
 35 | 	scene.add( ambientLight );
 36 | 	
 37 | 	// let pointLight = new THREE.PointLight();
 38 | 	// camera.add( pointLight );
 39 | 	
 40 | 	renderer = new THREE.WebGLRenderer({
 41 | 		antialias : true,
 42 | 		alpha: false
 43 | 	});
 44 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 45 | 	renderer.setSize( window.innerWidth, window.innerHeight );
 46 | 	renderer.domElement.style.position = 'absolute'
 47 | 	renderer.domElement.style.top  = '0px'
 48 | 	renderer.domElement.style.left = '0px'
 49 | 	document.body.appendChild( renderer.domElement );
 50 | 	window.addEventListener( 'resize', onWindowResize, false );
 51 | 
 52 | 	clock = new THREE.Clock();
 53 | 	deltaTime = 0;
 54 | 	totalTime = 0;
 55 | 	
 56 | 	keyboard = new Keyboard();
 57 | 	
 58 | 	let loader = new THREE.TextureLoader();
 59 | 	
 60 | 	// floor
 61 | 	let floorGeometry = new THREE.PlaneGeometry(20,20);
 62 | 	let floorMaterial = new THREE.MeshBasicMaterial({ 
 63 | 		map: loader.load( 'images/color-grid.png' )
 64 | 	});
 65 | 	let floorMesh = new THREE.Mesh( floorGeometry, floorMaterial );
 66 | 	floorMesh.rotation.x = -Math.PI/2;
 67 | 	scene.add( floorMesh );
 68 | 	
 69 | 	let cubeGeometry = new THREE.BoxGeometry(1,1,1);
 70 | 	let materialArray = [
 71 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/xpos.png") } ),
 72 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/xneg.png") } ),
 73 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/ypos.png") } ),
 74 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/yneg.png") } ),
 75 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/zpos.png") } ),
 76 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/zneg.png") } ),
 77 | 	];
 78 | 	let cubeMesh = new THREE.Mesh( cubeGeometry, materialArray );
 79 | 	
 80 | 	mover = new THREE.Group();
 81 | 	mover.add( cubeMesh );
 82 | 	mover.position.set(-3, 0.5, 2);
 83 | 	scene.add( mover );
 84 | 	
 85 | 	plane = new THREE.Mesh(
 86 | 		new THREE.PlaneGeometry(1,1),
 87 | 		new THREE.MeshBasicMaterial({map:loader.load("images/sphere-colored.png")})
 88 | 	);
 89 | 	plane.position.set(-4, 0.5, 1);
 90 | 	plane.rotation.y = Math.PI/4
 91 | 	scene.add(plane);
 92 | 
 93 | 	// align clipping plane with PlaneGeometry object
 94 | 	
 95 | 	// default normal of a plane is 0,0,1. Apply mesh rotation to it.
 96 | 	let normal = new THREE.Vector3(0,0,1).applyQuaternion( plane.quaternion );
 97 | 	let point = plane.position;
 98 | 	clipPlane = new THREE.Plane().setFromNormalAndCoplanarPoint(normal, point);
 99 | 	renderer.clippingPlanes = [clipPlane];
100 | }
101 | 
102 | function update()
103 | {
104 | 	keyboard.update();
105 | 	
106 | 	let translateSpeed = 0.5; // units per second
107 | 	let distance = translateSpeed * deltaTime;
108 | 	let rotateSpeed = Math.PI/3; // radians per second
109 | 	let angle = rotateSpeed * deltaTime;
110 | 	
111 | 	if (keyboard.isKeyPressed("W"))
112 | 		mover.translateZ( -distance );
113 | 	if (keyboard.isKeyPressed("S"))
114 | 		mover.translateZ( distance );
115 | 		
116 | 	if (keyboard.isKeyPressed("A"))
117 | 		mover.translateX( -distance );
118 | 	if (keyboard.isKeyPressed("D"))
119 | 		mover.translateX( distance );
120 | 		
121 | 	if (keyboard.isKeyPressed("R"))
122 | 		mover.translateY( distance );
123 | 	if (keyboard.isKeyPressed("F"))
124 | 		mover.translateY( -distance );
125 | 		
126 | 	if (keyboard.isKeyPressed("Q"))
127 | 		mover.rotateY( angle );
128 | 	if (keyboard.isKeyPressed("E"))
129 | 		mover.rotateY( -angle );
130 | 		
131 | 	if (keyboard.isKeyPressed("T"))
132 | 		mover.children[0].rotateX( angle );
133 | 	if (keyboard.isKeyPressed("G"))
134 | 		mover.children[0].rotateX( -angle );
135 | }
136 | 
137 | function render()
138 | {
139 | 	renderer.render( scene, camera );
140 | }
141 | 
142 | function animate()
143 | {
144 | 	requestAnimationFrame(animate);
145 | 	deltaTime = clock.getDelta();
146 | 	totalTime += deltaTime;
147 | 	update();
148 | 	render();
149 | }
150 | 
151 | function onWindowResize() 
152 | {
153 | 	camera.aspect = window.innerWidth / window.innerHeight;
154 | 	camera.updateProjectionMatrix();
155 | 	renderer.setSize( window.innerWidth, window.innerHeight );
156 | }
157 | 
158 | </script>
159 | 
160 | </body>
161 | </html>


--------------------------------------------------------------------------------
/css/index.css:
--------------------------------------------------------------------------------
  1 | body 
  2 | {
  3 | 	background-color: #eeeeee;
  4 | 	background-image: url("../images/pixels.png");
  5 | 	background-repeat: repeat;      /* repeat, no-repeat */
  6 | 	background-attachment: fixed;   /* scroll, fixed */
  7 | 	background-position: top left;  /* for no-repeat setting: top/bottom, left/right */
  8 | 	margin: 2% 5% 0% 5%;            /* top, left, bottom, right or TRBL */
  9 | 	
 10 | 	font-family: Georgia, Serif;	/* list font names in order of preference */
 11 | 	font-weight: normal;            /* normal, bold */
 12 | 	font-style: normal;             /* normal, italic */
 13 | 	font-variant: normal;           /* normal, small-caps */
 14 | 	font-size: 16px;                /* font size */
 15 | 	color: #000000;                 /* hexadecimal RGB color code */
 16 | 	text-decoration: none;          /* none, underline, overline, line-through */
 17 | 	text-align: left;               /* left, right, center, justify */
 18 | }
 19 | 
 20 | .fancy
 21 | {
 22 | 	min-height: 150px;
 23 | 	/* next two lines for elder IE compatibility */
 24 | 	height: auto !important; 
 25 | 	height: 150px; 
 26 | 	
 27 | 	/* Background color and gradients */
 28 | 	background: #eeeeee;
 29 | 	background: -moz-linear-gradient(top, #ffffff, #cccccc);
 30 | 	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#cccccc));
 31 | 	/* really nifty translucence */
 32 | 	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(200, 200, 200, 0.8) );
 33 | 	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgba(255, 255, 255, 0.8) ), to( rgba(200, 200, 200, 0.8) ));
 34 | 	
 35 | 	/* Rounded corners */
 36 | 	-moz-border-radius: 15px 15px 15px 15px;
 37 | 	-webkit-border-radius: 15px 15px 15px 15px;
 38 | 	border-radius: 15px 15px 15px 15px;
 39 | }
 40 | 
 41 | /* Page text links */
 42 | a 
 43 | {
 44 | 	font-size: 20px;
 45 | 	font-weight: bold;
 46 | 	font-variantx: small-caps;
 47 | 	color:#00c;
 48 | 	text-shadow: 1px 1px 0px #aaa;
 49 | 	margin: 13px 0px 0px 0px;
 50 | 	text-decoration: none;
 51 | 	
 52 | 	-webkit-transition: all 300ms ease-in-out;
 53 | 	-moz-transition: all 300ms ease-in-out;
 54 | 	-o-transition: all 300ms ease-in-out;
 55 | 	-ms-transition: all 300ms ease-in-out;
 56 | 	transition: all 300ms ease-in-out; 
 57 | }
 58 | 
 59 | .toc
 60 | {
 61 | 	font-size: 16px;
 62 | }
 63 | 
 64 | a:hover 
 65 | {
 66 | 	color:#c00;
 67 | 	/*text-shadow: 1px 1px 0px #f00;
 68 | 	/* gradual change */
 69 | 	-webkit-transition: all 300ms ease-in-out;
 70 | 	-moz-transition: all 300ms ease-in-out;
 71 | 	-o-transition: all 300ms ease-in-out;
 72 | 	-ms-transition: all 300ms ease-in-out;
 73 | 	transition: all 300ms ease-in-out; 
 74 | }
 75 | 
 76 | .superText
 77 | {
 78 | 	color: #000;
 79 | 	text-shadow: 1px 1px 0px #aaa;
 80 | }
 81 | 
 82 | a .superImage
 83 | {  
 84 | 	height: 150px;
 85 | 	width: 225px;
 86 | 	border: 1px solid #000000;
 87 | 	margin: 0px 20px 0px 0px;
 88 | 	float:left;
 89 | 	
 90 | 	
 91 | 	/* Rounded corners */
 92 | 	-moz-border-radius: 15px 15px 15px 15px;
 93 | 	-webkit-border-radius: 15px 15px 15px 15px;
 94 | 	border-radius: 15px 15px 15px 15px;
 95 | 	
 96 | 	position: relative; 
 97 | 	
 98 | 	-webkit-transition: all 300ms ease-in-out;
 99 | 	-moz-transition: all 300ms ease-in-out;
100 | 	-o-transition: all 300ms ease-in-out;
101 | 	-ms-transition: all 300ms ease-in-out;
102 | 	transition: all 300ms ease-in-out; 
103 | }  
104 | 
105 | a:hover .superImage
106 | {  
107 | 	top: -10px;  
108 | 	
109 | 	/* fallback on standard opaque colors */
110 | 	-moz-box-shadow: 10px 10px 5px #888;
111 | 	-webkit-box-shadow: 10px 10px 5px #888;
112 | 	box-shadow: 10px 10px 5px #888;
113 | 	/* translucent: the way shadows should be */
114 | 	-moz-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
115 | 	-webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
116 | 	box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
117 | 	
118 | 	-webkit-transition: all 300ms ease-in-out;
119 | 	-moz-transition: all 300ms ease-in-out;
120 | 	-o-transition: all 300ms ease-in-out;
121 | 	-ms-transition: all 300ms ease-in-out;
122 | 	transition: all 300ms ease-in-out;
123 | }  
124 | 
125 | .bigTitle
126 | {
127 | 	font-size: 32px;
128 | 	font-weight: bold;
129 | 	font-variantx: small-caps;
130 | 	color:#004;
131 | 	text-align: center;
132 | 	text-shadow: -1px -1px 2px #fff, 1px 1px 3px #000;	
133 | }


--------------------------------------------------------------------------------
/custom-patterns.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, AR Cubes!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | 	<!-- include jsartookit -->
  8 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
  9 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 10 | 	<!-- include threex.artoolkit -->
 11 | 	<script src="threex/threex-artoolkitsource.js"></script>
 12 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 13 | 	<script src="threex/threex-arbasecontrols.js"></script>
 14 | 	<script src="threex/threex-armarkercontrols.js"></script>
 15 | </head>
 16 | 
 17 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 18 | 
 19 | <!-- 
 20 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 21 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 22 | -->
 23 | 
 24 | <script>
 25 | 
 26 | var scene, camera, renderer, clock, deltaTime, totalTime;
 27 | 
 28 | var arToolkitSource, arToolkitContext;
 29 | 
 30 | var markerRoot1, markerRoot2;
 31 | 
 32 | var mesh1;
 33 | 
 34 | initialize();
 35 | animate();
 36 | 
 37 | function initialize()
 38 | {
 39 | 	scene = new THREE.Scene();
 40 | 
 41 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
 42 | 	scene.add( ambientLight );
 43 | 				
 44 | 	camera = new THREE.Camera();
 45 | 	scene.add(camera);
 46 | 
 47 | 	renderer = new THREE.WebGLRenderer({
 48 | 		antialias : true,
 49 | 		alpha: true
 50 | 	});
 51 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 52 | 	renderer.setSize( 640, 480 );
 53 | 	renderer.domElement.style.position = 'absolute'
 54 | 	renderer.domElement.style.top = '0px'
 55 | 	renderer.domElement.style.left = '0px'
 56 | 	document.body.appendChild( renderer.domElement );
 57 | 
 58 | 	clock = new THREE.Clock();
 59 | 	deltaTime = 0;
 60 | 	totalTime = 0;
 61 | 	
 62 | 	////////////////////////////////////////////////////////////
 63 | 	// setup arToolkitSource
 64 | 	////////////////////////////////////////////////////////////
 65 | 
 66 | 	arToolkitSource = new THREEx.ArToolkitSource({
 67 | 		sourceType : 'webcam',
 68 | 	});
 69 | 
 70 | 	function onResize()
 71 | 	{
 72 | 		arToolkitSource.onResize()	
 73 | 		arToolkitSource.copySizeTo(renderer.domElement)	
 74 | 		if ( arToolkitContext.arController !== null )
 75 | 		{
 76 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
 77 | 		}	
 78 | 	}
 79 | 
 80 | 	arToolkitSource.init(function onReady(){
 81 | 		onResize()
 82 | 	});
 83 | 	
 84 | 	// handle resize event
 85 | 	window.addEventListener('resize', function(){
 86 | 		onResize()
 87 | 	});
 88 | 	
 89 | 	////////////////////////////////////////////////////////////
 90 | 	// setup arToolkitContext
 91 | 	////////////////////////////////////////////////////////////	
 92 | 
 93 | 	// create atToolkitContext
 94 | 	arToolkitContext = new THREEx.ArToolkitContext({
 95 | 		cameraParametersUrl: 'data/camera_para.dat',
 96 | 		detectionMode: 'mono'
 97 | 	});
 98 | 	
 99 | 	// copy projection matrix to camera when initialization complete
100 | 	arToolkitContext.init( function onCompleted(){
101 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
102 | 	});
103 | 
104 | 	////////////////////////////////////////////////////////////
105 | 	// setup markerRoots
106 | 	////////////////////////////////////////////////////////////
107 | 
108 | 	let loader = new THREE.TextureLoader();
109 | 	let texture = loader.load( 'images/border.png' );
110 | 		
111 | 	let patternArray = ["letterA", "letterB", "letterC", "letterD", "letterF", "kanji", "hiro"];
112 | 	let colorArray   = [0xff0000, 0xff8800, 0xffff00, 0x00cc00, 0x0000ff, 0xcc00ff, 0xcccccc];
113 | 	for (let i = 0; i < 7; i++)
114 | 	{
115 | 		let markerRoot = new THREE.Group();
116 | 		scene.add(markerRoot);
117 | 		let markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
118 | 			type : 'pattern', patternUrl : "data/" + patternArray[i] + ".patt",
119 | 		});
120 | 	
121 | 		let mesh = new THREE.Mesh( 
122 | 			new THREE.CubeGeometry(1.25,1.25,1.25), 
123 | 			new THREE.MeshBasicMaterial({color:colorArray[i], map:texture, transparent:true, opacity:0.5}) 
124 | 		);
125 | 		mesh.position.y = 1.25/2;
126 | 		markerRoot.add( mesh );
127 | 	}
128 | }
129 | 
130 | 
131 | function update()
132 | {
133 | 	// update artoolkit on every frame
134 | 	if ( arToolkitSource.ready !== false )
135 | 		arToolkitContext.update( arToolkitSource.domElement );
136 | }
137 | 
138 | 
139 | function render()
140 | {
141 | 	renderer.render( scene, camera );
142 | }
143 | 
144 | 
145 | function animate()
146 | {
147 | 	requestAnimationFrame(animate);
148 | 	deltaTime = clock.getDelta();
149 | 	totalTime += deltaTime;
150 | 	update();
151 | 	render();
152 | }
153 | 
154 | </script>
155 | 
156 | </body>
157 | </html>


--------------------------------------------------------------------------------
/data/camera_para.dat:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/data/camera_para.dat


--------------------------------------------------------------------------------
/globe-multi-marker.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<script src='js/keyboard.js'></script>
  6 | 	<!-- include three.js library -->
  7 | 	<script src='js/three.js'></script>
  8 | 	<!-- include jsartookit -->
  9 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
 10 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 11 | 	<!-- include threex.artoolkit -->
 12 | 	<script src="threex/threex-artoolkitsource.js"></script>
 13 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 14 | 	<script src="threex/threex-arbasecontrols.js"></script>
 15 | 	<script src="threex/threex-armarkercontrols.js"></script>
 16 | </head>
 17 | 
 18 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 19 | 
 20 | <!-- 
 21 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 22 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 23 | -->
 24 | 
 25 | <script>
 26 | 
 27 | var scene, camera, renderer, clock, deltaTime, totalTime, keyboard;
 28 | 
 29 | var arToolkitSource, arToolkitContext;
 30 | 
 31 | var markerNames, markerArray, currentMarkerName;
 32 | 
 33 | var sceneGroup;
 34 | 
 35 | var globe;
 36 | 
 37 | initialize();
 38 | animate();
 39 | 
 40 | function initialize()
 41 | {
 42 | 	scene = new THREE.Scene();
 43 | 
 44 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
 45 | 	scene.add( ambientLight );
 46 | 
 47 | 	camera = new THREE.Camera();
 48 | 	scene.add(camera);
 49 | 
 50 | 	renderer = new THREE.WebGLRenderer({
 51 | 		antialias : true,
 52 | 		alpha: true
 53 | 	});
 54 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 55 | 	renderer.setSize( 800, 600 );
 56 | 	renderer.domElement.style.position = 'absolute'
 57 | 	renderer.domElement.style.top = '0px'
 58 | 	renderer.domElement.style.left = '0px'
 59 | 	document.body.appendChild( renderer.domElement );
 60 | 
 61 | 	clock = new THREE.Clock();
 62 | 	deltaTime = 0;
 63 | 	totalTime = 0;
 64 | 	keyboard = new Keyboard();
 65 | 	
 66 | 	////////////////////////////////////////////////////////////
 67 | 	// setup arToolkitSource
 68 | 	////////////////////////////////////////////////////////////
 69 | 
 70 | 	arToolkitSource = new THREEx.ArToolkitSource({
 71 | 		sourceType : 'webcam',
 72 | 	});
 73 | 
 74 | 	function onResize()
 75 | 	{
 76 | 		arToolkitSource.onResize()	
 77 | 		arToolkitSource.copySizeTo(renderer.domElement)	
 78 | 		if ( arToolkitContext.arController !== null )
 79 | 		{
 80 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
 81 | 		}	
 82 | 	}
 83 | 
 84 | 	arToolkitSource.init(function onReady(){
 85 | 		onResize()
 86 | 	});
 87 | 	
 88 | 	// handle resize event
 89 | 	window.addEventListener('resize', function(){
 90 | 		onResize()
 91 | 	});
 92 | 	
 93 | 	////////////////////////////////////////////////////////////
 94 | 	// setup arToolkitContext
 95 | 	////////////////////////////////////////////////////////////	
 96 | 
 97 | 	// create atToolkitContext
 98 | 	arToolkitContext = new THREEx.ArToolkitContext({
 99 | 		cameraParametersUrl: 'data/camera_para.dat',
100 | 		detectionMode: 'mono',
101 | 		maxDetectionRate: 30,
102 | 	});
103 | 	
104 | 	// copy projection matrix to camera when initialization complete
105 | 	arToolkitContext.init( function onCompleted(){
106 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
107 | 	});
108 | 
109 | 	////////////////////////////////////////////////////////////
110 | 	// setup markerRoots
111 | 	////////////////////////////////////////////////////////////
112 | 
113 | 	markerNames = ["kanji", "letterA", "letterB"];
114 | 	
115 | 	markerArray = [];
116 | 	
117 | 	for (let i = 0; i < markerNames.length; i++)
118 | 	{
119 | 		let marker = new THREE.Group();
120 | 		scene.add(marker);
121 | 		markerArray.push(marker);
122 | 		
123 | 		let markerControls = new THREEx.ArMarkerControls(arToolkitContext, marker, {
124 | 			type: 'pattern', patternUrl: "data/" + markerNames[i] + ".patt",
125 | 		});
126 | 		
127 | 		let markerGroup = new THREE.Group();
128 | 		marker.add(markerGroup);
129 | 	}
130 | 	
131 | 	////////////////////////////////////////////////////////////
132 | 	// setup scene
133 | 	////////////////////////////////////////////////////////////
134 | 	
135 | 	sceneGroup = new THREE.Group();
136 | 	
137 | 	let loader = new THREE.TextureLoader();
138 | 	
139 | 	let geometry1 = new THREE.SphereGeometry(1, 32,32);	
140 | 	let texture = loader.load( 'images/earth-sphere.jpg' );
141 | 	let material1 = new THREE.MeshLambertMaterial( { map: texture, opacity: 0.75 } );
142 | 	globe = new THREE.Mesh( geometry1, material1 );
143 | 	globe.position.y = 1;
144 | 	sceneGroup.add(globe); 
145 | 	
146 | 	markerArray[0].children[0].add( sceneGroup );
147 | 	currentMarkerName = markerNames[0];
148 | 	
149 | 	let pointLight = new THREE.PointLight( 0xffffff, 1, 50 );
150 | 	camera.add( pointLight );
151 | }
152 | 
153 | 
154 | function update()
155 | {
156 | 	keyboard.update();
157 | 	
158 | 	globe.rotation.y += 0.01;
159 | 	
160 | 	let anyMarkerVisible = false;
161 | 	for (let i = 0; i < markerArray.length; i++)
162 | 	{
163 | 		if ( markerArray[i].visible )
164 | 		{
165 | 			anyMarkerVisible = true;
166 | 			markerArray[i].children[0].add( sceneGroup );
167 | 			if ( currentMarkerName != markerNames[i] )
168 | 			{
169 | 				currentMarkerName = markerNames[i];
170 | 				// console.log("Switching to " + currentMarkerName);
171 | 			}
172 | 			
173 | 			let p = markerArray[i].children[0].getWorldPosition();
174 | 			let q = markerArray[i].children[0].getWorldQuaternion();
175 | 			let s = markerArray[i].children[0].getWorldScale();
176 | 			let lerpAmount = 0.5;
177 | 			
178 | 			scene.add(sceneGroup);
179 | 			sceneGroup.position.lerp(p, lerpAmount);
180 | 			sceneGroup.quaternion.slerp(q, lerpAmount);
181 | 			sceneGroup.scale.lerp(s, lerpAmount);
182 | 
183 | 			break;
184 | 		}
185 | 	}
186 | 
187 | 	if ( !anyMarkerVisible )
188 | 	{
189 | 		// console.log("No marker currently visible.");
190 | 	}
191 | 	
192 | 	let baseMarker = markerArray[0];
193 | 	
194 | 	// update relative positions of markers
195 | 	for (let i = 1; i < markerArray.length; i++)
196 | 	{
197 | 		let currentMarker = markerArray[i];
198 | 		let currentGroup  = currentMarker.children[0];
199 | 		if ( baseMarker.visible && currentMarker.visible )
200 | 		{
201 | 			// console.log("updating marker " + i " -> base offset");
202 | 			
203 | 			let relativePosition = currentMarker.worldToLocal( baseMarker.position.clone() );
204 | 			currentGroup.position.copy( relativePosition );
205 | 			
206 | 			let relativeRotation = currentMarker.quaternion.clone().inverse().multiply( baseMarker.quaternion.clone() );
207 | 			currentGroup.quaternion.copy( relativeRotation );
208 | 		}
209 | 	}
210 | 	
211 | 	// update artoolkit on every frame
212 | 	if ( arToolkitSource.ready !== false )
213 | 		arToolkitContext.update( arToolkitSource.domElement );
214 | 
215 | }
216 | 
217 | 
218 | function render()
219 | {
220 | 	renderer.render( scene, camera );
221 | }
222 | 
223 | 
224 | function animate()
225 | {
226 | 	requestAnimationFrame(animate);
227 | 	deltaTime = clock.getDelta();
228 | 	totalTime += deltaTime;
229 | 	update();
230 | 	render();
231 | }
232 | 
233 | </script>
234 | 
235 | </body>
236 | </html>


--------------------------------------------------------------------------------
/globe.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | 	<!-- include jsartookit -->
  8 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
  9 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 10 | 	<!-- include threex.artoolkit -->
 11 | 	<script src="threex/threex-artoolkitsource.js"></script>
 12 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 13 | 	<script src="threex/threex-arbasecontrols.js"></script>
 14 | 	<script src="threex/threex-armarkercontrols.js"></script>
 15 | </head>
 16 | 
 17 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 18 | 
 19 | <!-- 
 20 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 21 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 22 | -->
 23 | 
 24 | <script>
 25 | 
 26 | var scene, camera, renderer, clock, deltaTime, totalTime;
 27 | 
 28 | var arToolkitSource, arToolkitContext;
 29 | 
 30 | var markerRoot1;
 31 | 
 32 | var mesh1;
 33 | 
 34 | initialize();
 35 | animate();
 36 | 
 37 | function initialize()
 38 | {
 39 | 	scene = new THREE.Scene();
 40 | 
 41 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
 42 | 	scene.add( ambientLight );
 43 | 
 44 | 	camera = new THREE.Camera();
 45 | 	scene.add(camera);
 46 | 
 47 | 	renderer = new THREE.WebGLRenderer({
 48 | 		antialias : true,
 49 | 		alpha: true
 50 | 	});
 51 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 52 | 	renderer.setSize( 640, 480 );
 53 | 	renderer.domElement.style.position = 'absolute'
 54 | 	renderer.domElement.style.top = '0px'
 55 | 	renderer.domElement.style.left = '0px'
 56 | 	document.body.appendChild( renderer.domElement );
 57 | 
 58 | 	clock = new THREE.Clock();
 59 | 	deltaTime = 0;
 60 | 	totalTime = 0;
 61 | 	
 62 | 	////////////////////////////////////////////////////////////
 63 | 	// setup arToolkitSource
 64 | 	////////////////////////////////////////////////////////////
 65 | 
 66 | 	arToolkitSource = new THREEx.ArToolkitSource({
 67 | 		sourceType : 'webcam',
 68 | 	});
 69 | 
 70 | 	function onResize()
 71 | 	{
 72 | 		arToolkitSource.onResize()	
 73 | 		arToolkitSource.copySizeTo(renderer.domElement)	
 74 | 		if ( arToolkitContext.arController !== null )
 75 | 		{
 76 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
 77 | 		}	
 78 | 	}
 79 | 
 80 | 	arToolkitSource.init(function onReady(){
 81 | 		onResize()
 82 | 	});
 83 | 	
 84 | 	// handle resize event
 85 | 	window.addEventListener('resize', function(){
 86 | 		onResize()
 87 | 	});
 88 | 	
 89 | 	////////////////////////////////////////////////////////////
 90 | 	// setup arToolkitContext
 91 | 	////////////////////////////////////////////////////////////	
 92 | 
 93 | 	// create atToolkitContext
 94 | 	arToolkitContext = new THREEx.ArToolkitContext({
 95 | 		cameraParametersUrl: 'data/camera_para.dat',
 96 | 		detectionMode: 'mono'
 97 | 	});
 98 | 	
 99 | 	// copy projection matrix to camera when initialization complete
100 | 	arToolkitContext.init( function onCompleted(){
101 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
102 | 	});
103 | 
104 | 	////////////////////////////////////////////////////////////
105 | 	// setup markerRoots
106 | 	////////////////////////////////////////////////////////////
107 | 
108 | 	// build markerControls
109 | 	markerRoot1 = new THREE.Group();
110 | 	scene.add(markerRoot1);
111 | 	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
112 | 		type: 'pattern', patternUrl: "data/hiro.patt",
113 | 	})
114 | 
115 | 	let geometry1 = new THREE.SphereGeometry(1, 32,32);
116 | 	
117 | 	let loader = new THREE.TextureLoader();
118 | 	let texture = loader.load( 'images/earth-sphere.jpg', render );
119 | 	let material1 = new THREE.MeshLambertMaterial( { map: texture, opacity: 0.5 } );
120 | 	
121 | 	mesh1 = new THREE.Mesh( geometry1, material1 );
122 | 	mesh1.position.y = 1;
123 | 	
124 | 	markerRoot1.add( mesh1 );
125 | 	
126 | 	let pointLight = new THREE.PointLight( 0xffffff, 1, 100 );
127 | 	pointLight.position.set(0.5,3,2);
128 | 	// create a mesh to help visualize the position of the light
129 | 	pointLight.add( 
130 | 		new THREE.Mesh( 
131 | 			new THREE.SphereBufferGeometry( 0.05, 16,8 ), 
132 | 			new THREE.MeshBasicMaterial({ color: 0xffffff, opacity: 0.5 }) 
133 | 		) 
134 | 	);
135 | 	markerRoot1.add( pointLight );
136 | }
137 | 
138 | 
139 | function update()
140 | {
141 | 	if ( markerRoot1.visible )
142 | 		mesh1.rotation.y += 0.01;
143 | 	// update artoolkit on every frame
144 | 	if ( arToolkitSource.ready !== false )
145 | 		arToolkitContext.update( arToolkitSource.domElement );
146 | }
147 | 
148 | 
149 | function render()
150 | {
151 | 	renderer.render( scene, camera );
152 | }
153 | 
154 | 
155 | function animate()
156 | {
157 | 	requestAnimationFrame(animate);
158 | 	deltaTime = clock.getDelta();
159 | 	totalTime += deltaTime;
160 | 	update();
161 | 	render();
162 | }
163 | 
164 | </script>
165 | 
166 | </body>
167 | </html>


--------------------------------------------------------------------------------
/hello-cube.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, AR Cube!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | 	<!-- include jsartookit -->
  8 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
  9 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 10 | 	<!-- include threex.artoolkit -->
 11 | 	<script src="threex/threex-artoolkitsource.js"></script>
 12 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 13 | 	<script src="threex/threex-arbasecontrols.js"></script>
 14 | 	<script src="threex/threex-armarkercontrols.js"></script>
 15 | </head>
 16 | 
 17 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 18 | 
 19 | <!-- 
 20 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 21 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 22 | -->
 23 | 
 24 | <script>
 25 | 
 26 | var scene, camera, renderer, clock, deltaTime, totalTime;
 27 | 
 28 | var arToolkitSource, arToolkitContext;
 29 | 
 30 | var markerRoot1, markerRoot2;
 31 | 
 32 | var mesh1;
 33 | 
 34 | initialize();
 35 | animate();
 36 | 
 37 | function initialize()
 38 | {
 39 | 	scene = new THREE.Scene();
 40 | 
 41 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
 42 | 	scene.add( ambientLight );
 43 | 				
 44 | 	camera = new THREE.Camera();
 45 | 	scene.add(camera);
 46 | 
 47 | 	renderer = new THREE.WebGLRenderer({
 48 | 		antialias : true,
 49 | 		alpha: true
 50 | 	});
 51 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 52 | 	renderer.setSize( 640, 480 );
 53 | 	renderer.domElement.style.position = 'absolute'
 54 | 	renderer.domElement.style.top = '0px'
 55 | 	renderer.domElement.style.left = '0px'
 56 | 	document.body.appendChild( renderer.domElement );
 57 | 
 58 | 	clock = new THREE.Clock();
 59 | 	deltaTime = 0;
 60 | 	totalTime = 0;
 61 | 	
 62 | 	////////////////////////////////////////////////////////////
 63 | 	// setup arToolkitSource
 64 | 	////////////////////////////////////////////////////////////
 65 | 
 66 | 	arToolkitSource = new THREEx.ArToolkitSource({
 67 | 		sourceType : 'webcam',
 68 | 	});
 69 | 
 70 | 	function onResize()
 71 | 	{
 72 | 		arToolkitSource.onResize()	
 73 | 		arToolkitSource.copySizeTo(renderer.domElement)	
 74 | 		if ( arToolkitContext.arController !== null )
 75 | 		{
 76 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
 77 | 		}	
 78 | 	}
 79 | 
 80 | 	arToolkitSource.init(function onReady(){
 81 | 		onResize()
 82 | 	});
 83 | 	
 84 | 	// handle resize event
 85 | 	window.addEventListener('resize', function(){
 86 | 		onResize()
 87 | 	});
 88 | 	
 89 | 	////////////////////////////////////////////////////////////
 90 | 	// setup arToolkitContext
 91 | 	////////////////////////////////////////////////////////////	
 92 | 
 93 | 	// create atToolkitContext
 94 | 	arToolkitContext = new THREEx.ArToolkitContext({
 95 | 		cameraParametersUrl: 'data/camera_para.dat',
 96 | 		detectionMode: 'mono'
 97 | 	});
 98 | 	
 99 | 	// copy projection matrix to camera when initialization complete
100 | 	arToolkitContext.init( function onCompleted(){
101 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
102 | 	});
103 | 
104 | 	////////////////////////////////////////////////////////////
105 | 	// setup markerRoots
106 | 	////////////////////////////////////////////////////////////
107 | 
108 | 	// build markerControls
109 | 	markerRoot1 = new THREE.Group();
110 | 	scene.add(markerRoot1);
111 | 	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
112 | 		type: 'pattern', patternUrl: "data/hiro.patt",
113 | 	})
114 | 
115 | 	let geometry1	= new THREE.CubeGeometry(1,1,1);
116 | 	let material1	= new THREE.MeshNormalMaterial({
117 | 		transparent: true,
118 | 		opacity: 0.5,
119 | 		side: THREE.DoubleSide
120 | 	}); 
121 | 	
122 | 	mesh1 = new THREE.Mesh( geometry1, material1 );
123 | 	mesh1.position.y = 0.5;
124 | 	
125 | 	markerRoot1.add( mesh1 );
126 | }
127 | 
128 | 
129 | function update()
130 | {
131 | 	// update artoolkit on every frame
132 | 	if ( arToolkitSource.ready !== false )
133 | 		arToolkitContext.update( arToolkitSource.domElement );
134 | }
135 | 
136 | 
137 | function render()
138 | {
139 | 	renderer.render( scene, camera );
140 | }
141 | 
142 | 
143 | function animate()
144 | {
145 | 	requestAnimationFrame(animate);
146 | 	deltaTime = clock.getDelta();
147 | 	totalTime += deltaTime;
148 | 	update();
149 | 	render();
150 | }
151 | 
152 | </script>
153 | 
154 | </body>
155 | </html>


--------------------------------------------------------------------------------
/hole-box.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | 	<!-- include jsartookit -->
  8 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
  9 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 10 | 	<!-- include threex.artoolkit -->
 11 | 	<script src="threex/threex-artoolkitsource.js"></script>
 12 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 13 | 	<script src="threex/threex-arbasecontrols.js"></script>
 14 | 	<script src="threex/threex-armarkercontrols.js"></script>
 15 | </head>
 16 | 
 17 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 18 | 
 19 | <!-- 
 20 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 21 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 22 | -->
 23 | 
 24 | <script>
 25 | 
 26 | var scene, camera, renderer, clock, deltaTime, totalTime;
 27 | 
 28 | var arToolkitSource, arToolkitContext;
 29 | 
 30 | var markerRoot1;
 31 | 
 32 | var mesh1;
 33 | 
 34 | initialize();
 35 | animate();
 36 | 
 37 | function initialize()
 38 | {
 39 | 	scene = new THREE.Scene();
 40 | 
 41 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.0 );
 42 | 	scene.add( ambientLight );
 43 | 				
 44 | 	camera = new THREE.Camera();
 45 | 	scene.add(camera);
 46 | 
 47 | 	renderer = new THREE.WebGLRenderer({
 48 | 		antialias : true,
 49 | 		alpha: true
 50 | 	});
 51 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 52 | 	renderer.setSize( 640, 480 );
 53 | 	renderer.domElement.style.position = 'absolute'
 54 | 	renderer.domElement.style.top = '0px'
 55 | 	renderer.domElement.style.left = '0px'
 56 | 	document.body.appendChild( renderer.domElement );
 57 | 
 58 | 	clock = new THREE.Clock();
 59 | 	deltaTime = 0;
 60 | 	totalTime = 0;
 61 | 	
 62 | 	////////////////////////////////////////////////////////////
 63 | 	// setup arToolkitSource
 64 | 	////////////////////////////////////////////////////////////
 65 | 
 66 | 	arToolkitSource = new THREEx.ArToolkitSource({
 67 | 		sourceType : 'webcam',
 68 | 	});
 69 | 
 70 | 	function onResize()
 71 | 	{
 72 | 		arToolkitSource.onResize()	
 73 | 		arToolkitSource.copySizeTo(renderer.domElement)	
 74 | 		if ( arToolkitContext.arController !== null )
 75 | 		{
 76 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
 77 | 		}	
 78 | 	}
 79 | 
 80 | 	arToolkitSource.init(function onReady(){
 81 | 		onResize()
 82 | 	});
 83 | 	
 84 | 	// handle resize event
 85 | 	window.addEventListener('resize', function(){
 86 | 		onResize()
 87 | 	});
 88 | 	
 89 | 	////////////////////////////////////////////////////////////
 90 | 	// setup arToolkitContext
 91 | 	////////////////////////////////////////////////////////////	
 92 | 
 93 | 	// create atToolkitContext
 94 | 	arToolkitContext = new THREEx.ArToolkitContext({
 95 | 		cameraParametersUrl: 'data/camera_para.dat',
 96 | 		detectionMode: 'mono'
 97 | 	});
 98 | 	
 99 | 	// copy projection matrix to camera when initialization complete
100 | 	arToolkitContext.init( function onCompleted(){
101 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
102 | 	});
103 | 
104 | 	////////////////////////////////////////////////////////////
105 | 	// setup markerRoots
106 | 	////////////////////////////////////////////////////////////
107 | 
108 | 	// build markerControls
109 | 	markerRoot1 = new THREE.Group();
110 | 	markerRoot1.name = 'marker1';
111 | 	scene.add(markerRoot1);
112 | 	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
113 | 		type : 'pattern',
114 | 		patternUrl : "data/hiro.patt",
115 | 	})
116 | 
117 | 	// the inside of the hole
118 | 	let geometry1	= new THREE.CubeGeometry(2,2,2);
119 | 	let loader = new THREE.TextureLoader();
120 | 	let texture = loader.load( 'images/tiles.jpg' );
121 | 	let material1	= new THREE.MeshLambertMaterial({
122 | 		transparent : true,
123 | 		map: texture,
124 | 		side: THREE.BackSide
125 | 	}); 
126 | 	
127 | 	mesh1 = new THREE.Mesh( geometry1, material1 );
128 | 	mesh1.position.y = -1;
129 | 	
130 | 	markerRoot1.add( mesh1 );
131 | 	
132 | 	// the invisibility cloak (box with a hole)
133 | 	let geometry0 = new THREE.BoxGeometry(2,2,2);
134 | 	geometry0.faces.splice(4, 2); // make hole by removing top two triangles
135 | 	
136 | 	let material0 = new THREE.MeshBasicMaterial({
137 | 		colorWrite: false
138 | 	});
139 | 	
140 | 	let mesh0 = new THREE.Mesh( geometry0, material0 );
141 | 	mesh0.scale.set(1,1,1).multiplyScalar(1.01);
142 | 	mesh0.position.y = -1;
143 | 	markerRoot1.add(mesh0);	
144 | }
145 | 
146 | 
147 | function update()
148 | {
149 | 	// update artoolkit on every frame
150 | 	if ( arToolkitSource.ready !== false )
151 | 		arToolkitContext.update( arToolkitSource.domElement );
152 | }
153 | 
154 | 
155 | function render()
156 | {
157 | 	renderer.render( scene, camera );
158 | }
159 | 
160 | 
161 | function animate()
162 | {
163 | 	requestAnimationFrame(animate);
164 | 	deltaTime = clock.getDelta();
165 | 	totalTime += deltaTime;
166 | 	update();
167 | 	render();
168 | }
169 | 
170 | </script>
171 | 
172 | </body>
173 | </html>


--------------------------------------------------------------------------------
/hole-plane.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | 	<!-- include jsartookit -->
  8 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
  9 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 10 | 	<!-- include threex.artoolkit -->
 11 | 	<script src="threex/threex-artoolkitsource.js"></script>
 12 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 13 | 	<script src="threex/threex-arbasecontrols.js"></script>
 14 | 	<script src="threex/threex-armarkercontrols.js"></script>
 15 | </head>
 16 | 
 17 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 18 | 
 19 | <!-- 
 20 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 21 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 22 | -->
 23 | 
 24 | <script>
 25 | 
 26 | var scene, camera, renderer, clock, deltaTime, totalTime;
 27 | 
 28 | var arToolkitSource, arToolkitContext;
 29 | 
 30 | var markerRoot1;
 31 | 
 32 | var mesh1;
 33 | 
 34 | initialize();
 35 | animate();
 36 | 
 37 | function initialize()
 38 | {
 39 | 	scene = new THREE.Scene();
 40 | 
 41 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.0 );
 42 | 	scene.add( ambientLight );
 43 | 				
 44 | 	camera = new THREE.Camera();
 45 | 	scene.add(camera);
 46 | 
 47 | 	renderer = new THREE.WebGLRenderer({
 48 | 		antialias : true,
 49 | 		alpha: true
 50 | 	});
 51 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 52 | 	renderer.setSize( 640, 480 );
 53 | 	renderer.domElement.style.position = 'absolute'
 54 | 	renderer.domElement.style.top = '0px'
 55 | 	renderer.domElement.style.left = '0px'
 56 | 	document.body.appendChild( renderer.domElement );
 57 | 
 58 | 	clock = new THREE.Clock();
 59 | 	deltaTime = 0;
 60 | 	totalTime = 0;
 61 | 	
 62 | 	////////////////////////////////////////////////////////////
 63 | 	// setup arToolkitSource
 64 | 	////////////////////////////////////////////////////////////
 65 | 
 66 | 	arToolkitSource = new THREEx.ArToolkitSource({
 67 | 		sourceType : 'webcam',
 68 | 	});
 69 | 
 70 | 	function onResize()
 71 | 	{
 72 | 		arToolkitSource.onResize()	
 73 | 		arToolkitSource.copySizeTo(renderer.domElement)	
 74 | 		if ( arToolkitContext.arController !== null )
 75 | 		{
 76 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
 77 | 		}	
 78 | 	}
 79 | 
 80 | 	arToolkitSource.init(function onReady(){
 81 | 		onResize()
 82 | 	});
 83 | 	
 84 | 	// handle resize event
 85 | 	window.addEventListener('resize', function(){
 86 | 		onResize()
 87 | 	});
 88 | 	
 89 | 	////////////////////////////////////////////////////////////
 90 | 	// setup arToolkitContext
 91 | 	////////////////////////////////////////////////////////////	
 92 | 
 93 | 	// create atToolkitContext
 94 | 	arToolkitContext = new THREEx.ArToolkitContext({
 95 | 		cameraParametersUrl: 'data/camera_para.dat',
 96 | 		detectionMode: 'mono'
 97 | 	});
 98 | 	
 99 | 	// copy projection matrix to camera when initialization complete
100 | 	arToolkitContext.init( function onCompleted(){
101 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
102 | 	});
103 | 
104 | 	////////////////////////////////////////////////////////////
105 | 	// setup markerRoots
106 | 	////////////////////////////////////////////////////////////
107 | 
108 | 	// build markerControls
109 | 	markerRoot1 = new THREE.Group();
110 | 	markerRoot1.name = 'marker1';
111 | 	scene.add(markerRoot1);
112 | 	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
113 | 		type : 'pattern',
114 | 		patternUrl : "data/hiro.patt",
115 | 	})
116 | 
117 | 	// the inside of the hole
118 | 	let geometry1	= new THREE.CubeGeometry(2,2,2);
119 | 	let loader = new THREE.TextureLoader();
120 | 	let texture = loader.load( 'images/tiles.jpg', render );
121 | 	let material1	= new THREE.MeshLambertMaterial({
122 | 		transparent : true,
123 | 		map: texture,
124 | 		side: THREE.BackSide
125 | 	}); 
126 | 	
127 | 	mesh1 = new THREE.Mesh( geometry1, material1 );
128 | 	mesh1.position.y = -1;
129 | 	
130 | 	markerRoot1.add( mesh1 );
131 | 	
132 | 	// the invisibility cloak (plane with a hole)
133 | 	let geometry0 = new THREE.PlaneGeometry(18,18, 9,9);
134 | 	geometry0.faces.splice(80, 2); // make hole by removing top two triangles
135 | 	geometry0.faceVertexUvs[0].splice(80, 2);
136 | 	
137 | 	let material0 = new THREE.MeshBasicMaterial({
138 | 		// map: loader.load( 'images/color-grid.png' ), // for testing placement
139 | 		colorWrite: false
140 | 	});
141 | 	
142 | 	let mesh0 = new THREE.Mesh( geometry0, material0 );
143 | 	
144 | 	mesh0.rotation.x = -Math.PI/2;
145 | 	markerRoot1.add(mesh0);	
146 | }
147 | 
148 | 
149 | function update()
150 | {
151 | 	// update artoolkit on every frame
152 | 	if ( arToolkitSource.ready !== false )
153 | 		arToolkitContext.update( arToolkitSource.domElement );
154 | }
155 | 
156 | 
157 | function render()
158 | {
159 | 	renderer.render( scene, camera );
160 | }
161 | 
162 | 
163 | function animate()
164 | {
165 | 	requestAnimationFrame(animate);
166 | 	deltaTime = clock.getDelta();
167 | 	totalTime += deltaTime;
168 | 	update();
169 | 	render();
170 | }
171 | 
172 | </script>
173 | 
174 | </body>
175 | </html>


--------------------------------------------------------------------------------
/hole-ring.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | 	<!-- include jsartookit -->
  8 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
  9 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 10 | 	<!-- include threex.artoolkit -->
 11 | 	<script src="threex/threex-artoolkitsource.js"></script>
 12 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 13 | 	<script src="threex/threex-arbasecontrols.js"></script>
 14 | 	<script src="threex/threex-armarkercontrols.js"></script>
 15 | </head>
 16 | 
 17 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 18 | 
 19 | <!-- 
 20 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 21 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 22 | -->
 23 | 
 24 | <script>
 25 | 
 26 | var scene, camera, renderer, clock, deltaTime, totalTime;
 27 | 
 28 | var arToolkitSource, arToolkitContext;
 29 | 
 30 | var markerRoot1;
 31 | 
 32 | var mesh1;
 33 | 
 34 | initialize();
 35 | animate();
 36 | 
 37 | function initialize()
 38 | {
 39 | 	scene = new THREE.Scene();
 40 | 
 41 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.0 );
 42 | 	scene.add( ambientLight );
 43 | 				
 44 | 	camera = new THREE.Camera();
 45 | 	scene.add(camera);
 46 | 
 47 | 	renderer = new THREE.WebGLRenderer({
 48 | 		antialias : true,
 49 | 		alpha: true
 50 | 	});
 51 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 52 | 	renderer.setSize( 640, 480 );
 53 | 	renderer.domElement.style.position = 'absolute'
 54 | 	renderer.domElement.style.top = '0px'
 55 | 	renderer.domElement.style.left = '0px'
 56 | 	document.body.appendChild( renderer.domElement );
 57 | 
 58 | 	clock = new THREE.Clock();
 59 | 	deltaTime = 0;
 60 | 	totalTime = 0;
 61 | 	
 62 | 	////////////////////////////////////////////////////////////
 63 | 	// setup arToolkitSource
 64 | 	////////////////////////////////////////////////////////////
 65 | 
 66 | 	arToolkitSource = new THREEx.ArToolkitSource({
 67 | 		sourceType : 'webcam',
 68 | 	});
 69 | 
 70 | 	function onResize()
 71 | 	{
 72 | 		arToolkitSource.onResize()	
 73 | 		arToolkitSource.copySizeTo(renderer.domElement)	
 74 | 		if ( arToolkitContext.arController !== null )
 75 | 		{
 76 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
 77 | 		}	
 78 | 	}
 79 | 
 80 | 	arToolkitSource.init(function onReady(){
 81 | 		onResize()
 82 | 	});
 83 | 	
 84 | 	// handle resize event
 85 | 	window.addEventListener('resize', function(){
 86 | 		onResize()
 87 | 	});
 88 | 	
 89 | 	////////////////////////////////////////////////////////////
 90 | 	// setup arToolkitContext
 91 | 	////////////////////////////////////////////////////////////	
 92 | 
 93 | 	// create atToolkitContext
 94 | 	arToolkitContext = new THREEx.ArToolkitContext({
 95 | 		cameraParametersUrl: 'data/camera_para.dat',
 96 | 		detectionMode: 'mono'
 97 | 	});
 98 | 	
 99 | 	// copy projection matrix to camera when initialization complete
100 | 	arToolkitContext.init( function onCompleted(){
101 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
102 | 	});
103 | 
104 | 	////////////////////////////////////////////////////////////
105 | 	// setup markerRoots
106 | 	////////////////////////////////////////////////////////////
107 | 
108 | 	// build markerControls
109 | 	markerRoot1 = new THREE.Group();
110 | 	markerRoot1.name = 'marker1';
111 | 	scene.add(markerRoot1);
112 | 	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
113 | 		type : 'pattern',
114 | 		patternUrl : "data/hiro.patt",
115 | 	})
116 | 
117 | 	// the inside of the hole
118 | 	let geometry1	= new THREE.CylinderGeometry(1,1, 4, 32,1);
119 | 	let loader = new THREE.TextureLoader();
120 | 	let texture = loader.load( 'images/tiles.jpg', render );
121 | 	texture.wrapS = THREE.RepeatWrapping;
122 | 	texture.wrapT = THREE.RepeatWrapping;
123 | 	texture.repeat.set(4,2);
124 | 	let material1	= new THREE.MeshBasicMaterial({
125 | 		transparent : true,
126 | 		map: texture,
127 | 		side: THREE.BackSide
128 | 	}); 
129 | 	mesh1 = new THREE.Mesh( geometry1, material1 );
130 | 	mesh1.position.y = -2;
131 | 	markerRoot1.add( mesh1 );
132 | 	
133 | 	// the invisibility cloak (ring; has circular hole)
134 | 	let geometry0 = new THREE.RingGeometry(1,9, 32);
135 | 	let material0 = new THREE.MeshBasicMaterial({
136 | 		// map: loader.load( 'images/color-grid.png' ), // for testing placement
137 | 		colorWrite: false
138 | 	});
139 | 	let mesh0 = new THREE.Mesh( geometry0, material0 );
140 | 	mesh0.rotation.x = -Math.PI/2;
141 | 	markerRoot1.add(mesh0);	
142 | }
143 | 
144 | 
145 | function update()
146 | {
147 | 	// update artoolkit on every frame
148 | 	if ( arToolkitSource.ready !== false )
149 | 		arToolkitContext.update( arToolkitSource.domElement );
150 | }
151 | 
152 | 
153 | function render()
154 | {
155 | 	renderer.render( scene, camera );
156 | }
157 | 
158 | 
159 | function animate()
160 | {
161 | 	requestAnimationFrame(animate);
162 | 	deltaTime = clock.getDelta();
163 | 	totalTime += deltaTime;
164 | 	update();
165 | 	render();
166 | }
167 | 
168 | </script>
169 | 
170 | </body>
171 | </html>


--------------------------------------------------------------------------------
/images/arrow-curved.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/arrow-curved.png


--------------------------------------------------------------------------------
/images/arrow-double.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/arrow-double.png


--------------------------------------------------------------------------------
/images/arrow-single.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/arrow-single.png


--------------------------------------------------------------------------------
/images/basketball-gray.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/basketball-gray.png


--------------------------------------------------------------------------------
/images/basketball.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/basketball.png


--------------------------------------------------------------------------------
/images/beach/negx.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/beach/negx.jpg


--------------------------------------------------------------------------------
/images/beach/negy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/beach/negy.jpg


--------------------------------------------------------------------------------
/images/beach/negz.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/beach/negz.jpg


--------------------------------------------------------------------------------
/images/beach/posx.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/beach/posx.jpg


--------------------------------------------------------------------------------
/images/beach/posy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/beach/posy.jpg


--------------------------------------------------------------------------------
/images/beach/posz.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/beach/posz.jpg


--------------------------------------------------------------------------------
/images/beach/readme.txt:
--------------------------------------------------------------------------------
 1 | Author
 2 | ======
 3 | 
 4 | This is the work of Emil Persson, aka Humus.
 5 | http://www.humus.name
 6 | 
 7 | 
 8 | 
 9 | License
10 | =======
11 | 
12 | This work is licensed under a Creative Commons Attribution 3.0 Unported License.
13 | http://creativecommons.org/licenses/by/3.0/
14 | 


--------------------------------------------------------------------------------
/images/border.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/border.png


--------------------------------------------------------------------------------
/images/chemistry/border.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/border.png


--------------------------------------------------------------------------------
/images/chemistry/card-C.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/card-C.png


--------------------------------------------------------------------------------
/images/chemistry/card-Cl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/card-Cl.png


--------------------------------------------------------------------------------
/images/chemistry/card-H.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/card-H.png


--------------------------------------------------------------------------------
/images/chemistry/card-N.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/card-N.png


--------------------------------------------------------------------------------
/images/chemistry/card-Na.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/card-Na.png


--------------------------------------------------------------------------------
/images/chemistry/card-O.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/card-O.png


--------------------------------------------------------------------------------
/images/chemistry/card-Si.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/card-Si.png


--------------------------------------------------------------------------------
/images/chemistry/card-template-GIMP.xcf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/card-template-GIMP.xcf


--------------------------------------------------------------------------------
/images/chemistry/label-C.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/label-C.png


--------------------------------------------------------------------------------
/images/chemistry/label-H.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/label-H.png


--------------------------------------------------------------------------------
/images/chemistry/label-N.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/label-N.png


--------------------------------------------------------------------------------
/images/chemistry/label-O.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/label-O.png


--------------------------------------------------------------------------------
/images/chemistry/label-template-GIMP.xcf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/label-template-GIMP.xcf


--------------------------------------------------------------------------------
/images/chemistry/shadow-0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/shadow-0.png


--------------------------------------------------------------------------------
/images/chemistry/shadow-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/shadow-1.png


--------------------------------------------------------------------------------
/images/chemistry/shadow-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/shadow-2.png


--------------------------------------------------------------------------------
/images/chemistry/shadow-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/shadow-3.png


--------------------------------------------------------------------------------
/images/chemistry/shadow-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/shadow-4.png


--------------------------------------------------------------------------------
/images/chemistry/shadow-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/shadow-5.png


--------------------------------------------------------------------------------
/images/chemistry/shadow-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/shadow-6.png


--------------------------------------------------------------------------------
/images/chemistry/shadow-7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/shadow-7.png


--------------------------------------------------------------------------------
/images/chemistry/shadow-8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/chemistry/shadow-8.png


--------------------------------------------------------------------------------
/images/church/negx.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/church/negx.jpg


--------------------------------------------------------------------------------
/images/church/negy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/church/negy.jpg


--------------------------------------------------------------------------------
/images/church/negz.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/church/negz.jpg


--------------------------------------------------------------------------------
/images/church/posx.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/church/posx.jpg


--------------------------------------------------------------------------------
/images/church/posy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/church/posy.jpg


--------------------------------------------------------------------------------
/images/church/posz.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/church/posz.jpg


--------------------------------------------------------------------------------
/images/church/readme.txt:
--------------------------------------------------------------------------------
 1 | Author
 2 | ======
 3 | 
 4 | This is the work of Emil Persson, aka Humus.
 5 | http://www.humus.name
 6 | 
 7 | 
 8 | 
 9 | License
10 | =======
11 | 
12 | This work is licensed under a Creative Commons Attribution 3.0 Unported License.
13 | http://creativecommons.org/licenses/by/3.0/
14 | 


--------------------------------------------------------------------------------
/images/color-grid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/color-grid.png


--------------------------------------------------------------------------------
/images/demo/basic-scene.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/basic-scene.png


--------------------------------------------------------------------------------
/images/demo/camera-movement.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/camera-movement.png


--------------------------------------------------------------------------------
/images/demo/clipping-planes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/clipping-planes.png


--------------------------------------------------------------------------------
/images/demo/custom-patterns.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/custom-patterns.png


--------------------------------------------------------------------------------
/images/demo/globe-multi-marker-large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/globe-multi-marker-large.png


--------------------------------------------------------------------------------
/images/demo/globe-multi-marker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/globe-multi-marker.png


--------------------------------------------------------------------------------
/images/demo/globe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/globe.png


--------------------------------------------------------------------------------
/images/demo/hello-cube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/hello-cube.png


--------------------------------------------------------------------------------
/images/demo/hole-box.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/hole-box.png


--------------------------------------------------------------------------------
/images/demo/hole-ring.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/hole-ring.png


--------------------------------------------------------------------------------
/images/demo/magic-cube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/magic-cube.png


--------------------------------------------------------------------------------
/images/demo/mesh-movement.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/mesh-movement.png


--------------------------------------------------------------------------------
/images/demo/model.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/model.png


--------------------------------------------------------------------------------
/images/demo/parabolic-path.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/parabolic-path.png


--------------------------------------------------------------------------------
/images/demo/portal-half-keyboard-test.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/portal-half-keyboard-test.png


--------------------------------------------------------------------------------
/images/demo/portal-view-AR-large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/portal-view-AR-large.png


--------------------------------------------------------------------------------
/images/demo/portal-view-AR.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/portal-view-AR.png


--------------------------------------------------------------------------------
/images/demo/portal-view-large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/portal-view-large.png


--------------------------------------------------------------------------------
/images/demo/portal-view.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/portal-view.png


--------------------------------------------------------------------------------
/images/demo/refraction.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/refraction.png


--------------------------------------------------------------------------------
/images/demo/shader.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/shader.png


--------------------------------------------------------------------------------
/images/demo/shadow-balls.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/shadow-balls.png


--------------------------------------------------------------------------------
/images/demo/shadow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/shadow.png


--------------------------------------------------------------------------------
/images/demo/stencil-test.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/stencil-test.png


--------------------------------------------------------------------------------
/images/demo/texture.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/texture.png


--------------------------------------------------------------------------------
/images/demo/video.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/video.png


--------------------------------------------------------------------------------
/images/demo/water-effect-AR.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/water-effect-AR.png


--------------------------------------------------------------------------------
/images/demo/water-effect.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/demo/water-effect.png


--------------------------------------------------------------------------------
/images/earth-sphere.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/earth-sphere.jpg


--------------------------------------------------------------------------------
/images/earth.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/earth.jpg


--------------------------------------------------------------------------------
/images/field-sphere.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/field-sphere.jpg


--------------------------------------------------------------------------------
/images/glow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/glow.png


--------------------------------------------------------------------------------
/images/key-blank.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/key-blank.png


--------------------------------------------------------------------------------
/images/mountain/negx.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/mountain/negx.jpg


--------------------------------------------------------------------------------
/images/mountain/negy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/mountain/negy.jpg


--------------------------------------------------------------------------------
/images/mountain/negz.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/mountain/negz.jpg


--------------------------------------------------------------------------------
/images/mountain/posx.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/mountain/posx.jpg


--------------------------------------------------------------------------------
/images/mountain/posy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/mountain/posy.jpg


--------------------------------------------------------------------------------
/images/mountain/posz.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/mountain/posz.jpg


--------------------------------------------------------------------------------
/images/mountain/readme.txt:
--------------------------------------------------------------------------------
 1 | Author
 2 | ======
 3 | 
 4 | This is the work of Emil Persson, aka Humus.
 5 | http://www.humus.name
 6 | 
 7 | 
 8 | 
 9 | License
10 | =======
11 | 
12 | This work is licensed under a Creative Commons Attribution 3.0 Unported License.
13 | http://creativecommons.org/licenses/by/3.0/
14 | 


--------------------------------------------------------------------------------
/images/movement-controls.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/movement-controls.png


--------------------------------------------------------------------------------
/images/noise.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/noise.jpg


--------------------------------------------------------------------------------
/images/pixels.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/pixels.png


--------------------------------------------------------------------------------
/images/sand.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/sand.jpg


--------------------------------------------------------------------------------
/images/scene-sphere-outside.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/scene-sphere-outside.jpg


--------------------------------------------------------------------------------
/images/scene-sphere-room.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/scene-sphere-room.jpg


--------------------------------------------------------------------------------
/images/sphere-colored.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/sphere-colored.png


--------------------------------------------------------------------------------
/images/sphere-pos-neg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/sphere-pos-neg.png


--------------------------------------------------------------------------------
/images/tiles.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/tiles.jpg


--------------------------------------------------------------------------------
/images/water-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/water-2.jpg


--------------------------------------------------------------------------------
/images/water.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/water.jpg


--------------------------------------------------------------------------------
/images/xneg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/xneg.png


--------------------------------------------------------------------------------
/images/xpos.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/xpos.png


--------------------------------------------------------------------------------
/images/yneg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/yneg.png


--------------------------------------------------------------------------------
/images/ypos.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/ypos.png


--------------------------------------------------------------------------------
/images/zneg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/zneg.png


--------------------------------------------------------------------------------
/images/zpos.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/images/zpos.png


--------------------------------------------------------------------------------
/js/keyboard.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |     Keyboard.js - a class for simplifying keyboard interaction.
  3 | 	Created by Lee Stemkoski.
  4 | 	
  5 | 	Usage: 
  6 | 	// initialize keyboard
  7 | 	var keyboard = new Keyboard();
  8 | 
  9 | 	// in update loop
 10 | 	keyboard.update();
 11 | 	
 12 | 	// check for discrete input (on key down/up event)
 13 | 	keyboard.isKeyDown("Space");
 14 | 	keyboard.isKeyUp("X");
 15 | 
 16 | 	// check for continuous input (true between key down and key up events)
 17 | 	keyboard.isKeyPressed("ArrowUp");
 18 | */
 19 | 
 20 | class Keyboard
 21 | {
 22 | 	constructor()
 23 | 	{
 24 | 		// Event listeners add keys to Queues.
 25 | 		// Update method updates Sets accordingly.
 26 | 		this.keyDownQueue  = new Set();
 27 | 		this.keyUpQueue    = new Set();
 28 | 		
 29 | 		this.keyDownSet    = new Set();
 30 | 		this.keyPressedSet = new Set();
 31 | 		this.keyUpSet      = new Set();
 32 | 		
 33 | 		this.onKeyDown = function(key) {};
 34 | 		this.onKeyUp   = function(key) {};
 35 | 		
 36 | 		let self = this;
 37 | 		
 38 | 		document.addEventListener( "keydown", 
 39 | 			function(eventData) 
 40 | 			{ 
 41 | 				let key = eventData.key;
 42 | 				if (key == " ")
 43 | 					key = "Space";
 44 | 				if (key.length == 1)
 45 | 					key = key.toUpperCase();
 46 | 				self.keyDownQueue.add( key ); 
 47 | 				// activate callback function (only once)
 48 | 				if ( !self.keyPressedSet.has(key) )
 49 | 					self.onKeyDown(key);
 50 | 			}
 51 | 		);
 52 | 		
 53 | 		document.addEventListener( "keyup", 
 54 | 			function(eventData) 
 55 | 			{ 
 56 | 				let key = eventData.key;
 57 | 				if (key == " ")
 58 | 					key = "Space";
 59 | 				if (key.length == 1)
 60 | 					key = key.toUpperCase();
 61 | 				self.keyUpQueue.add( key ); 
 62 | 				// activate callback function
 63 | 				self.onKeyUp(key);
 64 | 			} 
 65 | 		);
 66 | 	};
 67 | 	
 68 | 	update()
 69 | 	{
 70 | 		// clear previous discrete event status
 71 | 		this.keyDownSet.clear();
 72 | 		this.keyUpSet.clear();
 73 | 		
 74 | 		// update current event status
 75 | 		for (let k of this.keyDownQueue)
 76 | 		{
 77 | 			// avoid multiple keydown events while holding key
 78 |             if ( !this.keyPressedSet.has(k) )
 79 |             {
 80 |                 this.keyDownSet.add(k);
 81 |                 this.keyPressedSet.add(k);
 82 |             }
 83 | 		}
 84 | 		
 85 | 		for (let k of this.keyUpQueue)
 86 | 		{
 87 | 			this.keyPressedSet.delete(k);
 88 | 			this.keyUpSet.add(k);
 89 | 		}
 90 | 		
 91 | 		// clear the queues used to store events
 92 | 		this.keyDownQueue.clear();
 93 | 		this.keyUpQueue.clear();
 94 | 	};
 95 | 	
 96 | 	// only true for a single frame after key down
 97 | 	isKeyDown( keyName )
 98 | 	{
 99 | 		return ( this.keyDownSet.has(keyName) );
100 | 	};
101 | 	
102 | 	// true between key down and key up events
103 | 	isKeyPressed( keyName )
104 | 	{
105 | 		return ( this.keyPressedSet.has(keyName) );
106 | 	};
107 | 	
108 | 	// only true for a single frame after key up
109 | 	isKeyUp( keyName )
110 | 	{
111 | 		return ( this.keyUpSet.has(keyName) );
112 | 	};
113 | 	
114 | 	// set callback function
115 | 	setOnKeyDown( callbackFunction )
116 | 	{
117 | 		this.onKeyDown = callbackFunction;
118 | 	};
119 | 
120 | 	// set callback function
121 | 	setOnKeyUp( callbackFunction )
122 | 	{
123 | 		this.onKeyUp = callbackFunction;
124 | 	};
125 | 
126 | }
127 | 


--------------------------------------------------------------------------------
/js/stats.min.js:
--------------------------------------------------------------------------------
1 | // stats.js - http://github.com/mrdoob/stats.js
2 | var Stats=function(){function h(a){c.appendChild(a.dom);return a}function k(a){for(var d=0;d<c.children.length;d++)c.children[d].style.display=d===a?"block":"none";l=a}var l=0,c=document.createElement("div");c.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";c.addEventListener("click",function(a){a.preventDefault();k(++l%c.children.length)},!1);var g=(performance||Date).now(),e=g,a=0,r=h(new Stats.Panel("FPS","#0ff","#002")),f=h(new Stats.Panel("MS","#0f0","#020"));
3 | if(self.performance&&self.performance.memory)var t=h(new Stats.Panel("MB","#f08","#201"));k(0);return{REVISION:16,dom:c,addPanel:h,showPanel:k,begin:function(){g=(performance||Date).now()},end:function(){a++;var c=(performance||Date).now();f.update(c-g,200);if(c>e+1E3&&(r.update(1E3*a/(c-e),100),e=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){g=this.end()},domElement:c,setMode:k}};
4 | Stats.Panel=function(h,k,l){var c=Infinity,g=0,e=Math.round,a=e(window.devicePixelRatio||1),r=80*a,f=48*a,t=3*a,u=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=f;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,f);b.fillStyle=k;b.fillText(h,t,u);b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(f,
5 | v){c=Math.min(c,f);g=Math.max(g,f);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=k;b.fillText(e(f)+" "+h+" ("+e(c)+"-"+e(g)+")",t,u);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,e((1-f/v)*p))}}};"object"===typeof module&&(module.exports=Stats);
6 | 


--------------------------------------------------------------------------------
/keyboard-camera-move.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<script src='js/keyboard.js'></script>
  6 | 	<!-- include three.js library -->
  7 | 	<script src='js/three.js'></script>
  8 | </head>
  9 | 
 10 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 11 | 
 12 | <!-- 
 13 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 14 | -->
 15 | 
 16 | <script>
 17 | 
 18 | var scene, camera, renderer, clock, deltaTime, totalTime, keyboard;
 19 | 
 20 | var mover;
 21 | 
 22 | initialize();
 23 | animate();
 24 | 
 25 | function initialize()
 26 | {
 27 | 	scene = new THREE.Scene();
 28 | 				
 29 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
 30 | 	
 31 | 	mover = new THREE.Group();
 32 | 	mover.add( camera );
 33 | 	mover.position.set(0, 2, 4);
 34 | 	scene.add( mover );
 35 | 		
 36 | 	//camera.position.set(0, 2, 4);
 37 | 	//camera.lookAt( scene.position );	
 38 | 	//scene.add( camera );
 39 | 
 40 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.00 );
 41 | 	scene.add( ambientLight );
 42 | 	
 43 | 	// let pointLight = new THREE.PointLight();
 44 | 	// camera.add( pointLight );
 45 | 	
 46 | 	renderer = new THREE.WebGLRenderer({
 47 | 		antialias : true,
 48 | 		alpha: false
 49 | 	});
 50 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 51 | 	renderer.setSize( window.innerWidth, window.innerHeight );
 52 | 	renderer.domElement.style.position = 'absolute'
 53 | 	renderer.domElement.style.top  = '0px'
 54 | 	renderer.domElement.style.left = '0px'
 55 | 	document.body.appendChild( renderer.domElement );
 56 | 	window.addEventListener( 'resize', onWindowResize, false );
 57 | 
 58 | 	clock = new THREE.Clock();
 59 | 	deltaTime = 0;
 60 | 	totalTime = 0;
 61 | 	
 62 | 	keyboard = new Keyboard();
 63 | 	
 64 | 	let loader = new THREE.TextureLoader();
 65 | 	
 66 | 	// floor
 67 | 	let floorGeometry = new THREE.PlaneGeometry(10,10);
 68 | 	let floorMaterial = new THREE.MeshBasicMaterial({ 
 69 | 		map: loader.load( 'images/color-grid.png' )
 70 | 	});
 71 | 	let floorMesh = new THREE.Mesh( floorGeometry, floorMaterial );
 72 | 	floorMesh.rotation.x = -Math.PI/2;
 73 | 	scene.add( floorMesh );
 74 | 	
 75 | 	let cubeGeometry = new THREE.BoxGeometry(1,1,1);
 76 | 	let materialArray = [
 77 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/xpos.png") } ),
 78 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/xneg.png") } ),
 79 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/ypos.png") } ),
 80 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/yneg.png") } ),
 81 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/zpos.png") } ),
 82 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/zneg.png") } ),
 83 | 	];
 84 | 	let cubeMesh = new THREE.Mesh( cubeGeometry, materialArray );
 85 | 	cubeMesh.position.y = 0.5;
 86 | 	scene.add( cubeMesh );
 87 | }
 88 | 
 89 | function update()
 90 | {
 91 | 	keyboard.update();
 92 | 	
 93 | 	let translateSpeed = 0.5; // units per second
 94 | 	let distance = translateSpeed * deltaTime;
 95 | 	let rotateSpeed = Math.PI/6; // radians per second
 96 | 	let angle = rotateSpeed * deltaTime;
 97 | 	
 98 | 	if (keyboard.isKeyPressed("W"))
 99 | 		mover.translateZ( -distance );
100 | 	if (keyboard.isKeyPressed("S"))
101 | 		mover.translateZ( distance );
102 | 		
103 | 	if (keyboard.isKeyPressed("A"))
104 | 		mover.translateX( -distance );
105 | 	if (keyboard.isKeyPressed("D"))
106 | 		mover.translateX( distance );
107 | 		
108 | 	if (keyboard.isKeyPressed("R"))
109 | 		mover.translateY( distance );
110 | 	if (keyboard.isKeyPressed("F"))
111 | 		mover.translateY( -distance );
112 | 		
113 | 	if (keyboard.isKeyPressed("Q"))
114 | 		mover.rotateY( angle );
115 | 	if (keyboard.isKeyPressed("E"))
116 | 		mover.rotateY( -angle );
117 | 		
118 | 	if (keyboard.isKeyPressed("T"))
119 | 		mover.children[0].rotateX( angle );
120 | 	if (keyboard.isKeyPressed("G"))
121 | 		mover.children[0].rotateX( -angle );
122 | 	
123 | 	
124 | 	//mesh.rotation.y += 0.01;
125 | }
126 | 
127 | function render()
128 | {
129 | 	renderer.render( scene, camera );
130 | }
131 | 
132 | function animate()
133 | {
134 | 	requestAnimationFrame(animate);
135 | 	deltaTime = clock.getDelta();
136 | 	totalTime += deltaTime;
137 | 	update();
138 | 	render();
139 | }
140 | 
141 | function onWindowResize() 
142 | {
143 | 	camera.aspect = window.innerWidth / window.innerHeight;
144 | 	camera.updateProjectionMatrix();
145 | 	renderer.setSize( window.innerWidth, window.innerHeight );
146 | }
147 | 
148 | </script>
149 | 
150 | </body>
151 | </html>


--------------------------------------------------------------------------------
/keyboard-mesh-move.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<script src='js/keyboard.js'></script>
  6 | 	<!-- include three.js library -->
  7 | 	<script src='js/three.js'></script>
  8 | </head>
  9 | 
 10 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 11 | 
 12 | <!-- 
 13 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 14 | -->
 15 | 
 16 | <script>
 17 | 
 18 | var scene, camera, renderer, clock, deltaTime, totalTime, keyboard;
 19 | 
 20 | var mover;
 21 | 
 22 | initialize();
 23 | animate();
 24 | 
 25 | function initialize()
 26 | {
 27 | 	scene = new THREE.Scene();
 28 | 				
 29 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
 30 | 	camera.position.set(0, 2, 4);
 31 | 	camera.lookAt( scene.position );	
 32 | 	scene.add( camera );
 33 | 
 34 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.00 );
 35 | 	scene.add( ambientLight );
 36 | 	
 37 | 	// let pointLight = new THREE.PointLight();
 38 | 	// camera.add( pointLight );
 39 | 	
 40 | 	renderer = new THREE.WebGLRenderer({
 41 | 		antialias : true,
 42 | 		alpha: false
 43 | 	});
 44 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 45 | 	renderer.setSize( window.innerWidth, window.innerHeight );
 46 | 	renderer.domElement.style.position = 'absolute'
 47 | 	renderer.domElement.style.top  = '0px'
 48 | 	renderer.domElement.style.left = '0px'
 49 | 	document.body.appendChild( renderer.domElement );
 50 | 	window.addEventListener( 'resize', onWindowResize, false );
 51 | 
 52 | 	clock = new THREE.Clock();
 53 | 	deltaTime = 0;
 54 | 	totalTime = 0;
 55 | 	
 56 | 	keyboard = new Keyboard();
 57 | 	
 58 | 	let loader = new THREE.TextureLoader();
 59 | 	
 60 | 	// floor
 61 | 	let floorGeometry = new THREE.PlaneGeometry(10,10);
 62 | 	let floorMaterial = new THREE.MeshBasicMaterial({ 
 63 | 		map: loader.load( 'images/color-grid.png' )
 64 | 	});
 65 | 	let floorMesh = new THREE.Mesh( floorGeometry, floorMaterial );
 66 | 	floorMesh.rotation.x = -Math.PI/2;
 67 | 	scene.add( floorMesh );
 68 | 	
 69 | 	let cubeGeometry = new THREE.BoxGeometry(1,1,1);
 70 | 	let materialArray = [
 71 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/xpos.png") } ),
 72 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/xneg.png") } ),
 73 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/ypos.png") } ),
 74 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/yneg.png") } ),
 75 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/zpos.png") } ),
 76 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/zneg.png") } ),
 77 | 	];
 78 | 	let cubeMesh = new THREE.Mesh( cubeGeometry, materialArray );
 79 | 	
 80 | 	mover = new THREE.Group();
 81 | 	mover.add( cubeMesh );
 82 | 	mover.position.y = 0.5;
 83 | 	scene.add( mover );
 84 | }
 85 | 
 86 | function update()
 87 | {
 88 | 	keyboard.update();
 89 | 	
 90 | 	let translateSpeed = 0.5; // units per second
 91 | 	let distance = translateSpeed * deltaTime;
 92 | 	let rotateSpeed = Math.PI/3; // radians per second
 93 | 	let angle = rotateSpeed * deltaTime;
 94 | 	
 95 | 	if (keyboard.isKeyPressed("W"))
 96 | 		mover.translateZ( -distance );
 97 | 	if (keyboard.isKeyPressed("S"))
 98 | 		mover.translateZ( distance );
 99 | 		
100 | 	if (keyboard.isKeyPressed("A"))
101 | 		mover.translateX( -distance );
102 | 	if (keyboard.isKeyPressed("D"))
103 | 		mover.translateX( distance );
104 | 		
105 | 	if (keyboard.isKeyPressed("R"))
106 | 		mover.translateY( distance );
107 | 	if (keyboard.isKeyPressed("F"))
108 | 		mover.translateY( -distance );
109 | 		
110 | 	if (keyboard.isKeyPressed("Q"))
111 | 		mover.rotateY( angle );
112 | 	if (keyboard.isKeyPressed("E"))
113 | 		mover.rotateY( -angle );
114 | 		
115 | 	if (keyboard.isKeyPressed("T"))
116 | 		mover.children[0].rotateX( angle );
117 | 	if (keyboard.isKeyPressed("G"))
118 | 		mover.children[0].rotateX( -angle );
119 | 	
120 | 	
121 | 	//mesh.rotation.y += 0.01;
122 | }
123 | 
124 | function render()
125 | {
126 | 	renderer.render( scene, camera );
127 | }
128 | 
129 | function animate()
130 | {
131 | 	requestAnimationFrame(animate);
132 | 	deltaTime = clock.getDelta();
133 | 	totalTime += deltaTime;
134 | 	update();
135 | 	render();
136 | }
137 | 
138 | function onWindowResize() 
139 | {
140 | 	camera.aspect = window.innerWidth / window.innerHeight;
141 | 	camera.updateProjectionMatrix();
142 | 	renderer.setSize( window.innerWidth, window.innerHeight );
143 | }
144 | 
145 | </script>
146 | 
147 | </body>
148 | </html>


--------------------------------------------------------------------------------
/keyboard.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="utf-8">
 6 | 	<script src="js/keyboard.js"></script>
 7 | </head>
 8 | 
 9 | <body>
10 | 
11 | Open the Javascript console, and while the browser has focus, press the 'A' key.
12 | 
13 | <script>
14 | console.log("Starting keyboard...");
15 | 
16 | var keyboard = new Keyboard();
17 | 
18 | keyboard.setOnKeyDown(
19 | 	function(key) 
20 | 	{
21 | 		if ( key == "A" )
22 | 			console.log("Callback function: A");
23 | 	}
24 | );
25 | 
26 | loop();
27 | 
28 | function loop()
29 | {
30 | 	requestAnimationFrame(loop);
31 | 
32 | 	keyboard.update();
33 | 	
34 | 	// Testing with the 
35 | 	if ( keyboard.isKeyDown("A") )
36 | 		console.log("Key Down: A");
37 | 	if ( keyboard.isKeyPressed("A") )
38 | 		console.log("Key Pressed: A");
39 | 	if ( keyboard.isKeyUp("A") )
40 | 		console.log("Key Up: A");
41 | }
42 | </script>
43 | 
44 | </body>
45 | </html>


--------------------------------------------------------------------------------
/markers/10cm/kanji.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/10cm/kanji.png


--------------------------------------------------------------------------------
/markers/10cm/letterA.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/10cm/letterA.png


--------------------------------------------------------------------------------
/markers/10cm/letterB.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/10cm/letterB.png


--------------------------------------------------------------------------------
/markers/10cm/letterC.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/10cm/letterC.png


--------------------------------------------------------------------------------
/markers/10cm/letterD.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/10cm/letterD.png


--------------------------------------------------------------------------------
/markers/10cm/letterF.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/10cm/letterF.png


--------------------------------------------------------------------------------
/markers/10cm/readme.txt:
--------------------------------------------------------------------------------
1 | All images in this directory are 10cm by 10cm.
2 | 


--------------------------------------------------------------------------------
/markers/barcode05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcode05.png


--------------------------------------------------------------------------------
/markers/barcodes/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/00.png


--------------------------------------------------------------------------------
/markers/barcodes/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/01.png


--------------------------------------------------------------------------------
/markers/barcodes/02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/02.png


--------------------------------------------------------------------------------
/markers/barcodes/03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/03.png


--------------------------------------------------------------------------------
/markers/barcodes/04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/04.png


--------------------------------------------------------------------------------
/markers/barcodes/05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/05.png


--------------------------------------------------------------------------------
/markers/barcodes/06.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/06.png


--------------------------------------------------------------------------------
/markers/barcodes/07.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/07.png


--------------------------------------------------------------------------------
/markers/barcodes/08.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/08.png


--------------------------------------------------------------------------------
/markers/barcodes/09.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/09.png


--------------------------------------------------------------------------------
/markers/barcodes/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/10.png


--------------------------------------------------------------------------------
/markers/barcodes/11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/11.png


--------------------------------------------------------------------------------
/markers/barcodes/12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/12.png


--------------------------------------------------------------------------------
/markers/barcodes/13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/13.png


--------------------------------------------------------------------------------
/markers/barcodes/14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/14.png


--------------------------------------------------------------------------------
/markers/barcodes/15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/15.png


--------------------------------------------------------------------------------
/markers/barcodes/label-00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/label-00.png


--------------------------------------------------------------------------------
/markers/barcodes/label-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/label-01.png


--------------------------------------------------------------------------------
/markers/barcodes/label-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/label-02.png


--------------------------------------------------------------------------------
/markers/barcodes/label-03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/label-03.png


--------------------------------------------------------------------------------
/markers/barcodes/template.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/barcodes/template.png


--------------------------------------------------------------------------------
/markers/cube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/cube.png


--------------------------------------------------------------------------------
/markers/hiro.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/hiro.png


--------------------------------------------------------------------------------
/markers/kanji-a.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/kanji-a.png


--------------------------------------------------------------------------------
/markers/kanji-abcd.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/kanji-abcd.png


--------------------------------------------------------------------------------
/markers/kanji-b.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/kanji-b.png


--------------------------------------------------------------------------------
/markers/kanji-c.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/kanji-c.png


--------------------------------------------------------------------------------
/markers/kanji-d.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/kanji-d.png


--------------------------------------------------------------------------------
/markers/kanji.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/kanji.png


--------------------------------------------------------------------------------
/markers/letterA.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/letterA.png


--------------------------------------------------------------------------------
/markers/letterB.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/letterB.png


--------------------------------------------------------------------------------
/markers/letterC.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/letterC.png


--------------------------------------------------------------------------------
/markers/letterD.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/letterD.png


--------------------------------------------------------------------------------
/markers/letterF.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/markers/letterF.png


--------------------------------------------------------------------------------
/markers/readme.txt:
--------------------------------------------------------------------------------
1 | The pattern images are each 512x512, but the detected part is the inner black square, which translates to 1 unit in the virtual world. The inner black square takes up 80% of the width/height of the entire image, so to cover the entire image (including the outer white area up to the thin black border), use a cube that is 1.25 units on a side. 


--------------------------------------------------------------------------------
/model.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | 	<script src='js/OBJLoader.js'></script>
  8 | 	<script src='js/MTLLoader.js'></script>
  9 | 	<!-- include jsartookit -->
 10 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
 11 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 12 | 	<!-- include threex.artoolkit -->
 13 | 	<script src="threex/threex-artoolkitsource.js"></script>
 14 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 15 | 	<script src="threex/threex-arbasecontrols.js"></script>
 16 | 	<script src="threex/threex-armarkercontrols.js"></script>
 17 | </head>
 18 | 
 19 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 20 | 
 21 | <!-- 
 22 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 23 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 24 | -->
 25 | 
 26 | <script>
 27 | 
 28 | var scene, camera, renderer, clock, deltaTime, totalTime;
 29 | 
 30 | var arToolkitSource, arToolkitContext;
 31 | 
 32 | var markerRoot1;
 33 | 
 34 | var mesh1;
 35 | 
 36 | initialize();
 37 | animate();
 38 | 
 39 | function initialize()
 40 | {
 41 | 	scene = new THREE.Scene();
 42 | 
 43 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.0 );
 44 | 	scene.add( ambientLight );
 45 | 				
 46 | 	camera = new THREE.Camera();
 47 | 	scene.add(camera);
 48 | 
 49 | 	renderer = new THREE.WebGLRenderer({
 50 | 		antialias : true,
 51 | 		alpha: true
 52 | 	});
 53 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 54 | 	renderer.setSize( 640, 480 );
 55 | 	renderer.domElement.style.position = 'absolute'
 56 | 	renderer.domElement.style.top = '0px'
 57 | 	renderer.domElement.style.left = '0px'
 58 | 	document.body.appendChild( renderer.domElement );
 59 | 
 60 | 	clock = new THREE.Clock();
 61 | 	deltaTime = 0;
 62 | 	totalTime = 0;
 63 | 	
 64 | 	////////////////////////////////////////////////////////////
 65 | 	// setup arToolkitSource
 66 | 	////////////////////////////////////////////////////////////
 67 | 
 68 | 	arToolkitSource = new THREEx.ArToolkitSource({
 69 | 		sourceType : 'webcam',
 70 | 	});
 71 | 
 72 | 	function onResize()
 73 | 	{
 74 | 		arToolkitSource.onResize()	
 75 | 		arToolkitSource.copySizeTo(renderer.domElement)	
 76 | 		if ( arToolkitContext.arController !== null )
 77 | 		{
 78 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
 79 | 		}	
 80 | 	}
 81 | 
 82 | 	arToolkitSource.init(function onReady(){
 83 | 		onResize()
 84 | 	});
 85 | 	
 86 | 	// handle resize event
 87 | 	window.addEventListener('resize', function(){
 88 | 		onResize()
 89 | 	});
 90 | 	
 91 | 	////////////////////////////////////////////////////////////
 92 | 	// setup arToolkitContext
 93 | 	////////////////////////////////////////////////////////////	
 94 | 
 95 | 	// create atToolkitContext
 96 | 	arToolkitContext = new THREEx.ArToolkitContext({
 97 | 		cameraParametersUrl: 'data/camera_para.dat',
 98 | 		detectionMode: 'mono'
 99 | 	});
100 | 	
101 | 	// copy projection matrix to camera when initialization complete
102 | 	arToolkitContext.init( function onCompleted(){
103 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
104 | 	});
105 | 
106 | 	////////////////////////////////////////////////////////////
107 | 	// setup markerRoots
108 | 	////////////////////////////////////////////////////////////
109 | 
110 | 	// build markerControls
111 | 	markerRoot1 = new THREE.Group();
112 | 	scene.add(markerRoot1);
113 | 	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
114 | 		type: 'pattern', patternUrl: "data/hiro.patt",
115 | 	})
116 | 
117 | 	let geometry1 = new THREE.PlaneBufferGeometry(1,1, 4,4);
118 | 	let loader = new THREE.TextureLoader();
119 | 	// let texture = loader.load( 'images/earth.jpg', render );
120 | 	let material1 = new THREE.MeshBasicMaterial( { color: 0x0000ff, opacity: 0.5 } );
121 | 	mesh1 = new THREE.Mesh( geometry1, material1 );
122 | 	mesh1.rotation.x = -Math.PI/2;
123 | 	markerRoot1.add( mesh1 );
124 | 	
125 | 	function onProgress(xhr) { console.log( (xhr.loaded / xhr.total * 100) + '% loaded' ); }
126 | 	function onError(xhr) { console.log( 'An error happened' ); }
127 | 	
128 | 	new THREE.MTLLoader()
129 | 		.setPath( 'models/' )
130 | 		.load( 'fish-2.mtl', function ( materials ) {
131 | 			materials.preload();
132 | 			new THREE.OBJLoader()
133 | 				.setMaterials( materials )
134 | 				.setPath( 'models/' )
135 | 				.load( 'fish-2.obj', function ( group ) {
136 | 					mesh0 = group.children[0];
137 | 					mesh0.material.side = THREE.DoubleSide;
138 | 					mesh0.position.y = 0.25;
139 | 					mesh0.scale.set(0.25,0.25,0.25);
140 | 					markerRoot1.add(mesh0);
141 | 				}, onProgress, onError );
142 | 		});
143 | }
144 | 
145 | 
146 | function update()
147 | {
148 | 	// update artoolkit on every frame
149 | 	if ( arToolkitSource.ready !== false )
150 | 		arToolkitContext.update( arToolkitSource.domElement );
151 | }
152 | 
153 | 
154 | function render()
155 | {
156 | 	renderer.render( scene, camera );
157 | }
158 | 
159 | 
160 | function animate()
161 | {
162 | 	requestAnimationFrame(animate);
163 | 	deltaTime = clock.getDelta();
164 | 	totalTime += deltaTime;
165 | 	update();
166 | 	render();
167 | }
168 | 
169 | </script>
170 | 
171 | </body>
172 | </html>


--------------------------------------------------------------------------------
/models/fish-2.mtl:
--------------------------------------------------------------------------------
 1 | # Blender MTL File: 'None'
 2 | # Material Count: 1
 3 | 
 4 | newmtl Material.001
 5 | Ns 92.156863
 6 | Ka 1.000000 1.000000 1.000000
 7 | Kd 0.800000 0.800000 0.800000
 8 | Ks 0.050000 0.050000 0.050000
 9 | Ke 0.000000 0.000000 0.000000
10 | Ni 1.000000
11 | d 1.000000
12 | illum 2
13 | map_Kd fish_texture.png
14 | 


--------------------------------------------------------------------------------
/models/fish_texture.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/models/fish_texture.png


--------------------------------------------------------------------------------
/parabolic-path.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | 	<!-- include jsartookit -->
  8 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
  9 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 10 | 	<!-- include threex.artoolkit -->
 11 | 	<script src="threex/threex-artoolkitsource.js"></script>
 12 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 13 | 	<script src="threex/threex-arbasecontrols.js"></script>
 14 | 	<script src="threex/threex-armarkercontrols.js"></script>
 15 | </head>
 16 | 
 17 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 18 | 
 19 | <!-- 
 20 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 21 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 22 | -->
 23 | 
 24 | 
 25 | <script>
 26 | 
 27 | var scene, camera, renderer, clock, deltaTime, totalTime;
 28 | 
 29 | var arToolkitSource, arToolkitContext;
 30 | 
 31 | var markerRoot1;
 32 | 
 33 | var material1, mesh1;
 34 | 
 35 | initialize();
 36 | animate();
 37 | 
 38 | function initialize()
 39 | {
 40 | 	scene = new THREE.Scene();
 41 | 				
 42 | 	camera = new THREE.Camera();
 43 | 	scene.add(camera);
 44 | 
 45 | 	renderer = new THREE.WebGLRenderer({
 46 | 		antialias : true,
 47 | 		alpha: true
 48 | 	});
 49 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 50 | 	renderer.setSize( 640, 480 );
 51 | 	renderer.domElement.style.position = 'absolute'
 52 | 	renderer.domElement.style.top = '0px'
 53 | 	renderer.domElement.style.left = '0px'
 54 | 	document.body.appendChild( renderer.domElement );
 55 | 
 56 | 	clock = new THREE.Clock();
 57 | 	deltaTime = 0;
 58 | 	totalTime = 0;
 59 | 	
 60 | 	////////////////////////////////////////////////////////////
 61 | 	// setup arToolkitSource
 62 | 	////////////////////////////////////////////////////////////
 63 | 
 64 | 	arToolkitSource = new THREEx.ArToolkitSource({
 65 | 		sourceType : 'webcam',
 66 | 	});
 67 | 
 68 | 	function onResize()
 69 | 	{
 70 | 		arToolkitSource.onResize()	
 71 | 		arToolkitSource.copySizeTo(renderer.domElement)	
 72 | 		if ( arToolkitContext.arController !== null )
 73 | 		{
 74 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
 75 | 		}	
 76 | 	}
 77 | 
 78 | 	arToolkitSource.init(function onReady(){
 79 | 		onResize()
 80 | 	});
 81 | 	
 82 | 	// handle resize event
 83 | 	window.addEventListener('resize', function(){
 84 | 		onResize()
 85 | 	});
 86 | 	
 87 | 	////////////////////////////////////////////////////////////
 88 | 	// setup arToolkitContext
 89 | 	////////////////////////////////////////////////////////////	
 90 | 
 91 | 	// create atToolkitContext
 92 | 	arToolkitContext = new THREEx.ArToolkitContext({
 93 | 		cameraParametersUrl: 'data/camera_para.dat',
 94 | 		detectionMode: 'mono'
 95 | 	});
 96 | 	
 97 | 	// copy projection matrix to camera when initialization complete
 98 | 	arToolkitContext.init( function onCompleted(){
 99 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
100 | 	});
101 | 
102 | 	////////////////////////////////////////////////////////////
103 | 	// setup markerRoots
104 | 	////////////////////////////////////////////////////////////
105 | 
106 | 	// build markerControls
107 | 	markerRootA = new THREE.Group();
108 | 	scene.add(markerRootA);
109 | 	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRootA, {
110 | 		type: 'pattern', patternUrl: "data/letterA.patt",
111 | 	});
112 | 	
113 | 	markerRootB = new THREE.Group();
114 | 	scene.add(markerRootB);
115 | 	let markerControls2 = new THREEx.ArMarkerControls(arToolkitContext, markerRootB, {
116 | 		type: 'pattern', patternUrl: "data/letterB.patt",
117 | 	});
118 | 
119 | 	////////////////////////////////////////////////////////////
120 | 	// setup scene
121 | 	////////////////////////////////////////////////////////////
122 | 	
123 | 	renderer.shadowMap.enabled = true;
124 | 	renderer.shadowMap.type = THREE.PCFSoftShadowMap;
125 | 	
126 | 	let loader = new THREE.TextureLoader();
127 | 		
128 | 	sceneGroup = new THREE.Group();
129 | 	markerRootA.add(sceneGroup);
130 | 	
131 | 	let floorGeometry = new THREE.PlaneGeometry( 20,20 );
132 | 	let floorMaterial = new THREE.ShadowMaterial();
133 | 	floorMaterial.opacity = 0.3;
134 | 	let floorMesh = new THREE.Mesh( floorGeometry, floorMaterial );
135 | 	floorMesh.rotation.x = -Math.PI/2;
136 | 	floorMesh.receiveShadow = true;
137 | 	sceneGroup.add( floorMesh );
138 | 	
139 | 	ballMesh = new THREE.Mesh(
140 | 		new THREE.SphereGeometry(0.25, 32, 32),
141 | 		new THREE.MeshLambertMaterial({ 
142 | 			map: loader.load("images/basketball-gray.png"), 
143 | 			color: 0xff8800
144 | 		})
145 | 	);
146 | 	ballMesh.castShadow = true;
147 | 	scene.add( ballMesh );
148 | 		
149 | 	let light = new THREE.PointLight( 0xffffff, 1, 100 );
150 | 	light.position.set( 0,4,0 ); // default; light shining from top
151 | 	light.castShadow = true;
152 | 	sceneGroup.add( light );
153 | 	
154 | 	let lightSphere = new THREE.Mesh(
155 | 		new THREE.SphereGeometry(0.1),
156 | 		new THREE.MeshBasicMaterial({
157 | 			color: 0xffffff,
158 | 			transparent: true,
159 | 			opacity: 0.8
160 | 		})
161 | 	);
162 | 	lightSphere.position.copy( light.position );
163 | 	sceneGroup.add( lightSphere );
164 | 	
165 | 	let ambientLight = new THREE.AmbientLight( 0x666666 );
166 | 	sceneGroup.add( ambientLight );
167 | 	// let helper = new THREE.CameraHelper( light.shadow.camera );
168 | 	// sceneGroup.add( helper );
169 | 	
170 | 	// default normal of a plane is 0,0,1. Apply mesh rotation to it.
171 | 	let clipPlane = new THREE.Plane().setFromNormalAndCoplanarPoint(
172 | 		new THREE.Vector3(0,1,0), new THREE.Vector3(0,0,0) );
173 | 	renderer.clippingPlanes = [clipPlane];
174 | }
175 | 
176 | function update()
177 | {
178 | 	// update artoolkit on every frame
179 | 	if ( arToolkitSource.ready !== false )
180 | 		arToolkitContext.update( arToolkitSource.domElement );
181 | 
182 | 	if ( markerRootA.visible && markerRootB.visible )
183 | 	{
184 | 		// align clipping plane to scene.
185 | 		renderer.clippingPlanes[0].setFromNormalAndCoplanarPoint(
186 | 			new THREE.Vector3(0,1,0).applyQuaternion(sceneGroup.getWorldQuaternion()),
187 | 			sceneGroup.getWorldPosition()
188 | 		);
189 | 		
190 | 		let p = parabolicPath( markerRootA.getWorldPosition(), markerRootB.getWorldPosition(), (totalTime/1) % 4 - 1 );
191 | 		ballMesh.position.copy( p );
192 | 		ballMesh.rotation.z += 0.1
193 | 	}
194 | }
195 | 
196 | // create a function p() that passes through the points (0,p0), (1,p1), (2,p2) 
197 | //  and evaluate that function at time t.
198 | function parabolaEvaluate(p0, p1, p2, t)
199 | {
200 | 	return ( 0.5*(p0 - 2*p1 + p2) )*t*t + ( -0.5*(3*p0 - 4*p1 + p2) )*t + ( p0 );
201 | }
202 | 
203 | function parabolicPath( pointStart, pointEnd, time )
204 | {
205 | 	let pointMiddle = new THREE.Vector3().addVectors( pointStart, pointEnd ).multiplyScalar(0.5).add( new THREE.Vector3(0,2,0) );
206 | 	return new THREE.Vector3(
207 | 		parabolaEvaluate( pointStart.x, pointMiddle.x, pointEnd.x, time ),
208 | 		parabolaEvaluate( pointStart.y, pointMiddle.y, pointEnd.y, time ),
209 | 		parabolaEvaluate( pointStart.z, pointMiddle.z, pointEnd.z, time )
210 | 	);	
211 | }
212 | 
213 | function render()
214 | {
215 | 	renderer.render( scene, camera );
216 | }
217 | 
218 | function animate()
219 | {
220 | 	requestAnimationFrame(animate);
221 | 	deltaTime = clock.getDelta();
222 | 	totalTime += deltaTime;
223 | 	update();
224 | 	render();
225 | }
226 | 
227 | </script>
228 | 
229 | </body>
230 | </html>


--------------------------------------------------------------------------------
/portal-half-keyboard-test.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<script src='js/keyboard.js'></script>
  6 | 	<!-- include three.js library -->
  7 | 	<script src='js/three.js'></script>
  8 | </head>
  9 | 
 10 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 11 | 
 12 | <!-- 
 13 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 14 | -->
 15 | 
 16 | <script>
 17 | 
 18 | var scene, camera, renderer, clock, deltaTime, totalTime, keyboard;
 19 | 
 20 | var mover;
 21 | 
 22 | initialize();
 23 | animate();
 24 | 
 25 | function initialize()
 26 | {
 27 | 	scene = new THREE.Scene();
 28 | 				
 29 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
 30 | 	
 31 | 	mover = new THREE.Group();
 32 | 	mover.add( camera );
 33 | 	mover.position.set(0, 1, 3);
 34 | 	scene.add( mover );
 35 | 		
 36 | 	// camera.position.set(0, 2, 4);
 37 | 	// camera.lookAt( scene.position );	
 38 | 	// scene.add( camera );
 39 | 
 40 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.00 );
 41 | 	scene.add( ambientLight );
 42 | 	
 43 | 	// let pointLight = new THREE.PointLight();
 44 | 	// camera.add( pointLight );
 45 | 	
 46 | 	renderer = new THREE.WebGLRenderer({
 47 | 		antialias : true,
 48 | 		alpha: false
 49 | 	});
 50 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 51 | 	renderer.setSize( window.innerWidth, window.innerHeight );
 52 | 	renderer.domElement.style.position = 'absolute'
 53 | 	renderer.domElement.style.top  = '0px'
 54 | 	renderer.domElement.style.left = '0px'
 55 | 	document.body.appendChild( renderer.domElement );
 56 | 	window.addEventListener( 'resize', onWindowResize, false );
 57 | 
 58 | 	clock = new THREE.Clock();
 59 | 	deltaTime = 0;
 60 | 	totalTime = 0;
 61 | 	
 62 | 	keyboard = new Keyboard();
 63 | 	
 64 | 	let loader = new THREE.TextureLoader();
 65 | 	
 66 | 	// floor
 67 | 	let floorGeometry = new THREE.PlaneGeometry(10,10);
 68 | 	let floorMaterial = new THREE.MeshBasicMaterial({ 
 69 | 		map: loader.load( 'images/color-grid.png' )
 70 | 	});
 71 | 	let floorMesh = new THREE.Mesh( floorGeometry, floorMaterial );
 72 | 	floorMesh.rotation.x = -Math.PI/2;
 73 | 	scene.add( floorMesh );
 74 | 
 75 | 	let halfSphereGroup = new THREE.Group();
 76 | 	halfSphereGroup.position.y = 1;
 77 | 	scene.add(halfSphereGroup);
 78 | 	
 79 | 	let sphereRadius = 1;
 80 | 	let holeRadius = 0.5;
 81 | 	let borderThickness = 0.05;
 82 | 	
 83 | 	let halfSphereGeometry = new THREE.SphereGeometry(sphereRadius, 32, 32, Math.PI, Math.PI); // startAngle, sweepAngle
 84 | 	
 85 | 	let cloakTexture = loader.load("images/color-grid.png");
 86 | 	cloakMaterial = new THREE.MeshBasicMaterial({ map: cloakTexture, side: THREE.FrontSide, colorWrite: false }); // change colorWrite: true to see the cloak
 87 | 	let sceneTexture = loader.load("images/scene-sphere-outside.jpg");
 88 | 	sceneTexture.offset.x = 0.5;
 89 | 	sceneTexture.repeat.set(0.5, 1);
 90 | 	
 91 | 	let innerSphere = new THREE.Mesh( halfSphereGeometry, new THREE.MeshBasicMaterial({ map: sceneTexture, side: THREE.BackSide }) );
 92 | 	let outerSphere = new THREE.Mesh( halfSphereGeometry, cloakMaterial );
 93 | 	let holeMesh    = new THREE.Mesh( new THREE.RingGeometry(holeRadius, sphereRadius * 1.01, 32), cloakMaterial );
 94 | 	let borderMesh  = new THREE.Mesh( new THREE.RingGeometry(holeRadius, holeRadius + borderThickness , 32), new THREE.MeshBasicMaterial({color: 0xffffff, side: THREE.DoubleSide}) );
 95 | 	borderMesh.position.z = 0.001; // avoid depth-fighting artifacts
 96 | 	
 97 | 	halfSphereGroup.add( innerSphere );
 98 | 	halfSphereGroup.add( outerSphere );
 99 | 	halfSphereGroup.add( holeMesh );	
100 | 	halfSphereGroup.add( borderMesh );
101 | }
102 | 
103 | function update()
104 | {
105 | 	keyboard.update();
106 | 	
107 | 	let translateSpeed = 1; // units per second
108 | 	let distance = translateSpeed * deltaTime;
109 | 	let rotateSpeed = Math.PI/6; // radians per second
110 | 	let angle = rotateSpeed * deltaTime;
111 | 	
112 | 	if (keyboard.isKeyPressed("W"))
113 | 		mover.translateZ( -distance );
114 | 	if (keyboard.isKeyPressed("S"))
115 | 		mover.translateZ( distance );
116 | 		
117 | 	if (keyboard.isKeyPressed("A"))
118 | 		mover.translateX( -distance );
119 | 	if (keyboard.isKeyPressed("D"))
120 | 		mover.translateX( distance );
121 | 		
122 | 	if (keyboard.isKeyPressed("R"))
123 | 		mover.translateY( distance );
124 | 	if (keyboard.isKeyPressed("F"))
125 | 		mover.translateY( -distance );
126 | 		
127 | 	if (keyboard.isKeyPressed("Q"))
128 | 		mover.rotateY( angle );
129 | 	if (keyboard.isKeyPressed("E"))
130 | 		mover.rotateY( -angle );
131 | 		
132 | 	if (keyboard.isKeyPressed("T"))
133 | 		mover.children[0].rotateX( angle );
134 | 	if (keyboard.isKeyPressed("G"))
135 | 		mover.children[0].rotateX( -angle );
136 | 	
137 | 	
138 | 	//mesh.rotation.y += 0.01;
139 | }
140 | 
141 | function render()
142 | {
143 | 	renderer.render( scene, camera );
144 | }
145 | 
146 | function animate()
147 | {
148 | 	requestAnimationFrame(animate);
149 | 	deltaTime = clock.getDelta();
150 | 	totalTime += deltaTime;
151 | 	update();
152 | 	render();
153 | }
154 | 
155 | function onWindowResize() 
156 | {
157 | 	camera.aspect = window.innerWidth / window.innerHeight;
158 | 	camera.updateProjectionMatrix();
159 | 	renderer.setSize( window.innerWidth, window.innerHeight );
160 | }
161 | 
162 | </script>
163 | 
164 | </body>
165 | </html>


--------------------------------------------------------------------------------
/portal-view-AR.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, AR Cube!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | 	<!-- include jsartookit -->
  8 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
  9 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 10 | 	<!-- include threex.artoolkit -->
 11 | 	<script src="threex/threex-artoolkitsource.js"></script>
 12 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 13 | 	<script src="threex/threex-arbasecontrols.js"></script>
 14 | 	<script src="threex/threex-armarkercontrols.js"></script>
 15 | 	<script src="threex/threex-arsmoothedcontrols.js"></script>
 16 | </head>
 17 | 
 18 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 19 | 
 20 | <!-- 
 21 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 22 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 23 | -->
 24 | 
 25 | <script>
 26 | 
 27 | var scene, camera, renderer, clock, deltaTime, totalTime;
 28 | 
 29 | var arToolkitSource, arToolkitContext, smoothedControls;
 30 | 
 31 | var markerRoot1, markerRoot2;
 32 | 
 33 | var portal, portalMaterial;
 34 | 
 35 | initialize();
 36 | animate();
 37 | 
 38 | function initialize()
 39 | {
 40 | 	scene = new THREE.Scene();
 41 | 
 42 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
 43 | 	scene.add( ambientLight );
 44 | 				
 45 | 	camera = new THREE.Camera();
 46 | 	scene.add(camera);
 47 | 
 48 | 	renderer = new THREE.WebGLRenderer({
 49 | 		antialias : true,
 50 | 		alpha: true
 51 | 	});
 52 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 53 | 	renderer.setSize( 640, 480 );
 54 | 	renderer.domElement.style.position = 'absolute'
 55 | 	renderer.domElement.style.top = '0px'
 56 | 	renderer.domElement.style.left = '0px'
 57 | 	document.body.appendChild( renderer.domElement );
 58 | 
 59 | 	clock = new THREE.Clock();
 60 | 	deltaTime = 0;
 61 | 	totalTime = 0;
 62 | 	
 63 | 	////////////////////////////////////////////////////////////
 64 | 	// setup arToolkitSource
 65 | 	////////////////////////////////////////////////////////////
 66 | 
 67 | 	arToolkitSource = new THREEx.ArToolkitSource({
 68 | 		sourceType : 'webcam',
 69 | 	});
 70 | 
 71 | 	function onResize()
 72 | 	{
 73 | 		arToolkitSource.onResize()	
 74 | 		arToolkitSource.copySizeTo(renderer.domElement)	
 75 | 		if ( arToolkitContext.arController !== null )
 76 | 		{
 77 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
 78 | 		}	
 79 | 	}
 80 | 
 81 | 	arToolkitSource.init(function onReady(){
 82 | 		onResize()
 83 | 	});
 84 | 	
 85 | 	// handle resize event
 86 | 	window.addEventListener('resize', function(){
 87 | 		onResize()
 88 | 	});
 89 | 	
 90 | 	////////////////////////////////////////////////////////////
 91 | 	// setup arToolkitContext
 92 | 	////////////////////////////////////////////////////////////	
 93 | 
 94 | 	// create atToolkitContext
 95 | 	arToolkitContext = new THREEx.ArToolkitContext({
 96 | 		cameraParametersUrl: 'data/camera_para.dat',
 97 | 		detectionMode: 'mono'
 98 | 	});
 99 | 	
100 | 	// copy projection matrix to camera when initialization complete
101 | 	arToolkitContext.init( function onCompleted(){
102 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
103 | 	});
104 | 
105 | 	////////////////////////////////////////////////////////////
106 | 	// setup markerRoots
107 | 	////////////////////////////////////////////////////////////
108 | 
109 | 	// build markerControls
110 | 	kanjiMarker = new THREE.Group();
111 | 	scene.add(kanjiMarker);
112 | 	
113 | 	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, kanjiMarker, {
114 | 		type : 'pattern',
115 | 		patternUrl : "data/kanji.patt",
116 | 	})
117 | 
118 | 	// interpolates from last position to create smoother transitions when moving.
119 | 	// parameter lerp values near 0 are slow, near 1 are fast (instantaneous).
120 | 	let smoothedRoot = new THREE.Group();
121 | 	scene.add(smoothedRoot);
122 | 	smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot, {
123 | 		lerpPosition: 0.5,
124 | 		lerpQuaternion: 0.5,
125 | 		lerpScale: 1,
126 | 		// minVisibleDelay: 1,
127 | 		// minUnvisibleDelay: 1,
128 | 	});
129 | 
130 | 	////////////////////////////////////////////////////////////
131 | 	// setup scene
132 | 	////////////////////////////////////////////////////////////
133 | 	
134 | 	let loader = new THREE.TextureLoader();
135 | 	
136 | 	// material for portal (for debugging)
137 | 	
138 | 	let defaultMaterial = new THREE.MeshBasicMaterial({
139 | 		map: loader.load("images/sphere-colored.png"), 
140 | 		color: 0x444444,
141 | 		side: THREE.DoubleSide,
142 | 		transparent: true,
143 | 		opacity: 0.6
144 | 	});
145 | 	
146 | 	let portalWidth = 2;
147 | 	let portalHeight = 4;
148 | 	let portalBorder = 0.1;
149 | 	
150 | 	portal = new THREE.Mesh(
151 | 		new THREE.PlaneGeometry(portalWidth, portalHeight),
152 | 		defaultMaterial
153 | 	);
154 | 	portal.position.y = portalHeight/2 + portalBorder;
155 | 	portal.layers.set(1);
156 | 	smoothedRoot.add(portal);
157 | 	
158 | 	camera.layers.enable(1);
159 | 	
160 | 	portalMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide, transparent:true, opacity: 0.75 });
161 | 	
162 | 	
163 | 	let portalBorderMesh = new THREE.Mesh(
164 | 		new THREE.PlaneGeometry(portalWidth + 2*portalBorder, portalHeight + 2*portalBorder),
165 | 		portalMaterial
166 | 	);
167 | 	portalBorderMesh.position.y = portal.position.y;
168 | 	portalBorderMesh.layers.set(0);
169 | 	smoothedRoot.add(portalBorderMesh);
170 | 	
171 | 	// the world beyond the portal
172 | 	
173 | 	// textures from http://www.humus.name/
174 | 	let skyMaterialArray = [
175 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/mountain/posx.jpg"), side: THREE.BackSide } ),
176 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/mountain/negx.jpg"), side: THREE.BackSide } ),
177 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/mountain/posy.jpg"), side: THREE.BackSide } ),
178 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/mountain/negy.jpg"), side: THREE.BackSide } ),
179 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/mountain/posz.jpg"), side: THREE.BackSide } ),
180 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/mountain/negz.jpg"), side: THREE.BackSide } ),
181 | 	];
182 | 	let skyMesh = new THREE.Mesh(
183 | 		new THREE.CubeGeometry(30,30,30),
184 | 		skyMaterialArray );
185 | 	skyMesh.layers.set(2);
186 | 	smoothedRoot.add(skyMesh);
187 | 
188 | }
189 | 
190 | 
191 | function update()
192 | {
193 | 	// portal ring color cycle
194 | 	portalMaterial.color.setHSL( totalTime/10 % 1, 1, 0.75 );
195 | 	
196 | 	// update artoolkit on every frame
197 | 	if ( arToolkitSource.ready !== false )
198 | 		arToolkitContext.update( arToolkitSource.domElement );
199 | 		
200 | 	// additional code for smoothed controls
201 | 	smoothedControls.update(kanjiMarker);
202 | }
203 | 
204 | 
205 | function render()
206 | {
207 | 	//renderer.render( scene, camera );
208 | 
209 | 	let gl = renderer.context;
210 | 	
211 | 	// clear buffers now: color, depth, stencil 
212 | 	renderer.clear(true,true,true);
213 | 	// do not clear buffers before each render pass
214 | 	renderer.autoClear = false;
215 | 		
216 | 	// FIRST PASS
217 | 	// goal: using the stencil buffer, place 1's in position of first portal (layer 1)
218 | 
219 | 	// enable the stencil buffer
220 | 	gl.enable(gl.STENCIL_TEST);
221 | 	
222 | 	// layer 1 contains only the first portal
223 | 	camera.layers.set(1); 
224 | 
225 | 	gl.stencilFunc(gl.ALWAYS, 1, 0xff);
226 | 	gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
227 | 	gl.stencilMask(0xff);
228 | 
229 | 	// only write to stencil buffer (not color or depth)
230 | 	gl.colorMask(false,false,false,false);
231 | 	gl.depthMask(false);
232 | 	
233 | 	renderer.render( scene, camera );
234 | 
235 | 	// SECOND PASS
236 | 	// goal: render skybox (layer 2) but only through portal
237 | 	
238 | 	gl.colorMask(true,true,true,true);
239 | 	gl.depthMask(true);
240 | 	
241 | 	gl.stencilFunc(gl.EQUAL, 1, 0xff);
242 | 	gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
243 | 	
244 | 	camera.layers.set(2);
245 | 	renderer.render( scene, camera );
246 | 	
247 | 	// FINAL PASS
248 | 	// goal: render the rest of the scene (layer 0)
249 | 	
250 | 	// using stencil buffer simplifies drawing border around portal
251 | 	gl.stencilFunc(gl.NOTEQUAL, 1, 0xff);
252 | 	gl.colorMask(true,true,true,true);
253 | 	gl.depthMask(true);
254 | 	
255 | 	camera.layers.set(0); // layer 0 contains portal border mesh
256 | 	renderer.render( scene, camera );
257 | 	
258 | 	// set things back to normal
259 | 	renderer.autoClear = true;
260 | }
261 | 
262 | 
263 | function animate()
264 | {
265 | 	requestAnimationFrame(animate);
266 | 	deltaTime = clock.getDelta();
267 | 	totalTime += deltaTime;
268 | 	update();
269 | 	render();
270 | }
271 | 
272 | </script>
273 | 
274 | </body>
275 | </html>


--------------------------------------------------------------------------------
/refraction.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | 	<!-- include jsartookit -->
  8 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
  9 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 10 | 	<!-- include threex.artoolkit -->
 11 | 	<script src="threex/threex-artoolkitsource.js"></script>
 12 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 13 | 	<script src="threex/threex-arbasecontrols.js"></script>
 14 | 	<script src="threex/threex-armarkercontrols.js"></script>
 15 | </head>
 16 | 
 17 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 18 | 
 19 | <!-- 
 20 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 21 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 22 | -->
 23 | 
 24 | <!-- ---------------- Custom Shader Code ------------------------ -->
 25 | <script id="vertexShader" type="x-shader/x-vertex">
 26 | uniform float refractionRatio;
 27 | varying vec3 vRefract;
 28 | void main() 
 29 | { 
 30 | 	vec4 mPosition = modelMatrix * vec4( position, 1.0 );
 31 | 	vec3 nWorld = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );
 32 | 	vRefract = normalize( refract( normalize( mPosition.xyz - cameraPosition ), nWorld, refractionRatio ) );
 33 |     gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 34 | }
 35 | </script>
 36 | 
 37 | <script id="fragmentShader" type="x-shader/x-vertex"> 
 38 | uniform sampler2D texture;
 39 | varying vec3 vRefract;
 40 | uniform float distance;
 41 | uniform float opacity;
 42 | uniform vec3 tint;
 43 | void main() 
 44 | {
 45 | 	vec2 p = vec2( vRefract.x * distance + 0.5, vRefract.y * distance + 0.5 );
 46 | 	p = vec2(1.0, 1.0) - p;
 47 | 	vec3 color = texture2D( texture, p ).rgb;
 48 | 	gl_FragColor = vec4( color, opacity ) * vec4( tint, 1.0 );
 49 | }  
 50 | </script>
 51 | <!-- ----------------------------------------------------------- -->
 52 | 
 53 | <script>
 54 | 
 55 | var scene, camera, renderer, clock, deltaTime, totalTime;
 56 | 
 57 | var arToolkitSource, arToolkitContext;
 58 | 
 59 | var markerRoot1;
 60 | 
 61 | var material1, mesh1;
 62 | 
 63 | initialize();
 64 | animate();
 65 | 
 66 | function initialize()
 67 | {
 68 | 	scene = new THREE.Scene();
 69 | 
 70 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
 71 | 	scene.add( ambientLight );
 72 | 				
 73 | 	camera = new THREE.Camera();
 74 | 	scene.add(camera);
 75 | 
 76 | 	renderer = new THREE.WebGLRenderer({
 77 | 		antialias : true,
 78 | 		alpha: true
 79 | 	});
 80 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 81 | 	renderer.setSize( 640, 480 );
 82 | 	renderer.domElement.style.position = 'absolute'
 83 | 	renderer.domElement.style.top = '0px'
 84 | 	renderer.domElement.style.left = '0px'
 85 | 	document.body.appendChild( renderer.domElement );
 86 | 
 87 | 	clock = new THREE.Clock();
 88 | 	deltaTime = 0;
 89 | 	totalTime = 0;
 90 | 	
 91 | 	////////////////////////////////////////////////////////////
 92 | 	// setup arToolkitSource
 93 | 	////////////////////////////////////////////////////////////
 94 | 
 95 | 	arToolkitSource = new THREEx.ArToolkitSource({
 96 | 		sourceType : 'webcam',
 97 | 	});
 98 | 
 99 | 	function onResize()
100 | 	{
101 | 		arToolkitSource.onResize()	
102 | 		arToolkitSource.copySizeTo(renderer.domElement)	
103 | 		if ( arToolkitContext.arController !== null )
104 | 		{
105 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
106 | 		}	
107 | 	}
108 | 
109 | 	arToolkitSource.init(function onReady(){
110 | 		onResize()
111 | 	});
112 | 	
113 | 	// handle resize event
114 | 	window.addEventListener('resize', function(){
115 | 		onResize()
116 | 	});
117 | 	
118 | 	////////////////////////////////////////////////////////////
119 | 	// setup arToolkitContext
120 | 	////////////////////////////////////////////////////////////	
121 | 
122 | 	// create atToolkitContext
123 | 	arToolkitContext = new THREEx.ArToolkitContext({
124 | 		cameraParametersUrl: 'data/camera_para.dat',
125 | 		detectionMode: 'mono'
126 | 	});
127 | 	
128 | 	// copy projection matrix to camera when initialization complete
129 | 	arToolkitContext.init( function onCompleted(){
130 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
131 | 	});
132 | 
133 | 	////////////////////////////////////////////////////////////
134 | 	// setup markerRoots
135 | 	////////////////////////////////////////////////////////////
136 | 
137 | 	// build markerControls
138 | 	markerRoot1 = new THREE.Group();
139 | 	scene.add(markerRoot1);
140 | 	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
141 | 		type: 'pattern', patternUrl: "data/kanji.patt",
142 | 	})
143 | 
144 | 	////////////////////////////////////////////////////////////
145 | 	// setup scene
146 | 	////////////////////////////////////////////////////////////
147 | 	
148 | 	let loader = new THREE.TextureLoader();
149 | 	
150 | 	let videoTexture = new THREE.VideoTexture( arToolkitSource.domElement );
151 | 	videoTexture.minFilter = THREE.LinearFilter;
152 | 	
153 | 	let refractMaterial = new THREE.ShaderMaterial({
154 | 		uniforms: {
155 | 			texture: { value: videoTexture },
156 | 			refractionRatio: { value: 0.75 },
157 | 			distance: { value: 1.0 },
158 | 			opacity: { value: 0.8 },
159 | 			tint: { value: new THREE.Vector3(0.8, 0.8, 1.0) }
160 | 		},
161 | 		vertexShader: document.getElementById( 'vertexShader' ).textContent,
162 | 		fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
163 | 		transparent: true
164 | 	});
165 | 	
166 | 	reflectMesh = new THREE.Mesh( 
167 | 		new THREE.TorusKnotGeometry(1, 0.4, 128, 16), // new THREE.SphereBufferGeometry(1, 32, 32), 
168 | 		refractMaterial 
169 | 	);
170 | 	
171 | 	reflectMesh.position.y = 1;
172 | 		
173 | 	markerRoot1.add( reflectMesh );
174 | }
175 | 
176 | function update()
177 | {
178 | 	// update artoolkit on every frame
179 | 	if ( arToolkitSource.ready !== false )
180 | 		arToolkitContext.update( arToolkitSource.domElement );
181 | 		
182 | 	reflectMesh.rotation.y -= 0.01;
183 | }
184 | 
185 | 
186 | function render()
187 | {
188 | 	renderer.render( scene, camera );
189 | }
190 | 
191 | 
192 | function animate()
193 | {
194 | 	requestAnimationFrame(animate);
195 | 	deltaTime = clock.getDelta();
196 | 	totalTime += deltaTime;
197 | 	update();
198 | 	render();
199 | }
200 | 
201 | </script>
202 | 
203 | </body>
204 | </html>


--------------------------------------------------------------------------------
/screen-hole-QR.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/screen-hole-QR.png


--------------------------------------------------------------------------------
/screen-hole.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<script src='js/keyboard.js'></script>
  6 | 	<!-- include three.js library -->
  7 | 	<script src='js/three.js'></script>
  8 | 	<!-- include jsartookit -->
  9 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
 10 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 11 | 	<!-- include threex.artoolkit -->
 12 | 	<script src="threex/threex-artoolkitsource.js"></script>
 13 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 14 | 	<script src="threex/threex-arbasecontrols.js"></script>
 15 | 	<script src="threex/threex-armarkercontrols.js"></script>
 16 | </head>
 17 | 
 18 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 19 | 
 20 | <!-- 
 21 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 22 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 23 | -->
 24 | 
 25 | <script>
 26 | 
 27 | var scene, camera, renderer, clock, deltaTime, totalTime, keyboard;
 28 | 
 29 | var arToolkitSource, arToolkitContext;
 30 | 
 31 | var markerNames, markerArray, currentMarkerName;
 32 | 
 33 | var sceneGroup;
 34 | 
 35 | var mesh1; // rotating targets?
 36 | 
 37 | initialize();
 38 | animate();
 39 | 
 40 | function initialize()
 41 | {
 42 | 	scene = new THREE.Scene();
 43 | 
 44 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.0 );
 45 | 	scene.add( ambientLight );
 46 | 				
 47 | 	camera = new THREE.Camera();
 48 | 	scene.add(camera);
 49 | 
 50 | 	renderer = new THREE.WebGLRenderer({
 51 | 		antialias : true,
 52 | 		alpha: true
 53 | 	});
 54 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 55 | 	renderer.setSize( 640, 480 );
 56 | 	renderer.domElement.style.position = 'absolute'
 57 | 	renderer.domElement.style.top = '0px'
 58 | 	renderer.domElement.style.left = '0px'
 59 | 	document.body.appendChild( renderer.domElement );
 60 | 
 61 | 	clock = new THREE.Clock();
 62 | 	deltaTime = 0;
 63 | 	totalTime = 0;
 64 | 	keyboard = new Keyboard();
 65 | 	
 66 | 	////////////////////////////////////////////////////////////
 67 | 	// setup arToolkitSource
 68 | 	////////////////////////////////////////////////////////////
 69 | 
 70 | 	arToolkitSource = new THREEx.ArToolkitSource({
 71 | 		sourceType : 'webcam',
 72 | 	});
 73 | 
 74 | 	function onResize()
 75 | 	{
 76 | 		arToolkitSource.onResize()	
 77 | 		arToolkitSource.copySizeTo(renderer.domElement)	
 78 | 		if ( arToolkitContext.arController !== null )
 79 | 		{
 80 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
 81 | 		}	
 82 | 	}
 83 | 
 84 | 	arToolkitSource.init(function onReady(){
 85 | 		onResize()
 86 | 	});
 87 | 	
 88 | 	// handle resize event
 89 | 	window.addEventListener('resize', function(){
 90 | 		onResize()
 91 | 	});
 92 | 	
 93 | 	////////////////////////////////////////////////////////////
 94 | 	// setup arToolkitContext
 95 | 	////////////////////////////////////////////////////////////	
 96 | 
 97 | 	// create atToolkitContext
 98 | 	arToolkitContext = new THREEx.ArToolkitContext({
 99 | 		cameraParametersUrl: 'data/camera_para.dat',
100 | 		detectionMode: 'mono'
101 | 	});
102 | 	
103 | 	// copy projection matrix to camera when initialization complete
104 | 	arToolkitContext.init( function onCompleted(){
105 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
106 | 	});
107 | 
108 | 	////////////////////////////////////////////////////////////
109 | 	// setup markerRoots
110 | 	////////////////////////////////////////////////////////////
111 | 
112 | 	markerNames = ["kanji", "letterA", "letterB", "letterC", "letterD"];
113 | 	
114 | 	markerArray = [];
115 | 	
116 | 	for (let i = 0; i < markerNames.length; i++)
117 | 	{
118 | 		let marker = new THREE.Group();
119 | 		scene.add(marker);
120 | 		markerArray.push(marker);
121 | 		
122 | 		let markerControls = new THREEx.ArMarkerControls(arToolkitContext, marker, {
123 | 			type: 'pattern', patternUrl: "data/" + markerNames[i] + ".patt",
124 | 		});
125 | 		
126 | 		let markerGroup = new THREE.Group();
127 | 		marker.add(markerGroup);
128 | 	}
129 | 	
130 | 	////////////////////////////////////////////////////////////
131 | 	// setup scene
132 | 	////////////////////////////////////////////////////////////
133 | 	
134 | 	sceneGroup = new THREE.Group();
135 | 	
136 | 	// the inside of the hole
137 | 	let geometry1	= new THREE.CubeGeometry(5*1.25, 2, 3*1.25);
138 | 	let loader = new THREE.TextureLoader();
139 | 	let texture = loader.load( 'images/tiles.jpg', render );
140 | 	let material1	= new THREE.MeshLambertMaterial({
141 | 		transparent : true,
142 | 		map: texture,
143 | 		side: THREE.BackSide
144 | 	}); 
145 | 	
146 | 	mesh1 = new THREE.Mesh( geometry1, material1 );
147 | 	mesh1.position.y = -1;
148 | 	
149 | 	sceneGroup.add( mesh1 );
150 | 	
151 | 	// the invisibility cloak (plane with a hole)
152 | 	let geometry0 = new THREE.PlaneGeometry(18,18, 9,9);
153 | 	geometry0.faces.splice(80, 2); // make hole by removing top two triangles
154 | 	geometry0.faceVertexUvs[0].splice(80, 2);
155 | 	
156 | 	let material0 = new THREE.MeshBasicMaterial({
157 | 	    // map: loader.load( 'images/color-grid.png' ), // for testing placement
158 | 		colorWrite: false,
159 | 		// transparent: true,
160 | 		// opacity: 0.4
161 | 		// wireframe:true
162 | 	});
163 | 	
164 | 	
165 | 	let mesh0 = new THREE.Mesh( geometry0, material0 );
166 | 	mesh0.scale.set(3,2,1);
167 | 	
168 | 	mesh0.rotation.x = -Math.PI/2;
169 | 	sceneGroup.add(mesh0);	
170 | }
171 | 
172 | 
173 | function update()
174 | {
175 | 	keyboard.update();
176 | 	
177 | 	let anyMarkerVisible = false;
178 | 	for (let i = 0; i < markerArray.length; i++)
179 | 	{
180 | 		if ( markerArray[i].visible )
181 | 		{
182 | 			anyMarkerVisible = true;
183 | 			markerArray[i].children[0].add( sceneGroup );
184 | 			if ( currentMarkerName != markerNames[i] )
185 | 			{
186 | 				currentMarkerName = markerNames[i];
187 | 				console.log("Switching to " + currentMarkerName);
188 | 			}
189 | 			
190 | 			let p = markerArray[i].children[0].getWorldPosition();
191 | 			let q = markerArray[i].children[0].getWorldQuaternion();
192 | 			let s = markerArray[i].children[0].getWorldScale();
193 | 			let lerpAmount = 0.2;
194 | 			
195 | 			scene.add(sceneGroup);
196 | 			sceneGroup.position.lerp(p, lerpAmount);
197 | 			sceneGroup.quaternion.slerp(q, lerpAmount);
198 | 			sceneGroup.scale.lerp(s, lerpAmount);
199 | 
200 | 			break;
201 | 		}
202 | 	}
203 | 
204 | 	if ( !anyMarkerVisible )
205 | 	{
206 | 		console.log("No marker currently visible.");
207 | 		scene.visible = false;
208 | 	}
209 | 	else
210 | 		scene.visible = true;
211 | 	
212 | 	let baseMarker = markerArray[0];
213 | 	
214 | 	// update relative positions of markers
215 | 	for (let i = 1; i < markerArray.length; i++)
216 | 	{
217 | 		let currentMarker = markerArray[i];
218 | 		let currentGroup  = currentMarker.children[0];
219 | 		if ( baseMarker.visible && currentMarker.visible )
220 | 		{	
221 | 			let relativePosition = currentMarker.worldToLocal( baseMarker.position.clone() );
222 | 			currentGroup.position.copy( relativePosition );
223 | 			
224 | 			let relativeRotation = currentMarker.quaternion.clone().inverse().multiply( baseMarker.quaternion.clone() );
225 | 			currentGroup.quaternion.copy( relativeRotation );
226 | 		}
227 | 	}
228 | 	
229 | 	// update artoolkit on every frame
230 | 	if ( arToolkitSource.ready !== false )
231 | 		arToolkitContext.update( arToolkitSource.domElement );
232 | }
233 | 
234 | 
235 | function render()
236 | {
237 | 	renderer.render( scene, camera );
238 | }
239 | 
240 | 
241 | function animate()
242 | {
243 | 	requestAnimationFrame(animate);
244 | 	deltaTime = clock.getDelta();
245 | 	totalTime += deltaTime;
246 | 	update();
247 | 	render();
248 | }
249 | 
250 | </script>
251 | 
252 | </body>
253 | </html>


--------------------------------------------------------------------------------
/shader.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | 	<!-- include jsartookit -->
  8 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
  9 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 10 | 	<!-- include threex.artoolkit -->
 11 | 	<script src="threex/threex-artoolkitsource.js"></script>
 12 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 13 | 	<script src="threex/threex-arbasecontrols.js"></script>
 14 | 	<script src="threex/threex-armarkercontrols.js"></script>
 15 | </head>
 16 | 
 17 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 18 | 
 19 | <!-- 
 20 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 21 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 22 | -->
 23 | 
 24 | <!-- ---------------- Custom Shader Code ------------------------ -->
 25 | <script id="vertexShader" type="x-shader/x-vertex">
 26 | uniform float time;
 27 | varying vec2 textureUV;
 28 | void main() 
 29 | { 
 30 |     textureUV = uv;
 31 | 	vec3 newPosition = position + vec3( 0, 0, abs(sin(time)) );
 32 |     gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
 33 | }
 34 | </script>
 35 | 
 36 | <script id="fragmentShader" type="x-shader/x-vertex"> 
 37 | uniform float time;
 38 | uniform sampler2D baseTexture;
 39 | varying vec2 textureUV;
 40 | void main() 
 41 | {
 42 | 	float amt = abs( sin(time) );
 43 | 	vec4 tintColor = texture2D( baseTexture, textureUV ) * vec4( amt, amt, 1, 1 );
 44 | 	gl_FragColor = tintColor;
 45 | }  
 46 | </script>
 47 | <!-- ----------------------------------------------------------- -->
 48 | 
 49 | <script>
 50 | 
 51 | var scene, camera, renderer, clock, deltaTime, totalTime;
 52 | 
 53 | var arToolkitSource, arToolkitContext;
 54 | 
 55 | var markerRoot1;
 56 | 
 57 | var material1, mesh1;
 58 | 
 59 | initialize();
 60 | animate();
 61 | 
 62 | function initialize()
 63 | {
 64 | 	scene = new THREE.Scene();
 65 | 
 66 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
 67 | 	scene.add( ambientLight );
 68 | 				
 69 | 	camera = new THREE.Camera();
 70 | 	scene.add(camera);
 71 | 
 72 | 	renderer = new THREE.WebGLRenderer({
 73 | 		antialias : true,
 74 | 		alpha: true
 75 | 	});
 76 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 77 | 	renderer.setSize( 640, 480 );
 78 | 	renderer.domElement.style.position = 'absolute'
 79 | 	renderer.domElement.style.top = '0px'
 80 | 	renderer.domElement.style.left = '0px'
 81 | 	document.body.appendChild( renderer.domElement );
 82 | 
 83 | 	clock = new THREE.Clock();
 84 | 	deltaTime = 0;
 85 | 	totalTime = 0;
 86 | 	
 87 | 	////////////////////////////////////////////////////////////
 88 | 	// setup arToolkitSource
 89 | 	////////////////////////////////////////////////////////////
 90 | 
 91 | 	arToolkitSource = new THREEx.ArToolkitSource({
 92 | 		sourceType : 'webcam',
 93 | 	});
 94 | 
 95 | 	function onResize()
 96 | 	{
 97 | 		arToolkitSource.onResize()	
 98 | 		arToolkitSource.copySizeTo(renderer.domElement)	
 99 | 		if ( arToolkitContext.arController !== null )
100 | 		{
101 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
102 | 		}	
103 | 	}
104 | 
105 | 	arToolkitSource.init(function onReady(){
106 | 		onResize()
107 | 	});
108 | 	
109 | 	// handle resize event
110 | 	window.addEventListener('resize', function(){
111 | 		onResize()
112 | 	});
113 | 	
114 | 	////////////////////////////////////////////////////////////
115 | 	// setup arToolkitContext
116 | 	////////////////////////////////////////////////////////////	
117 | 
118 | 	// create atToolkitContext
119 | 	arToolkitContext = new THREEx.ArToolkitContext({
120 | 		cameraParametersUrl: 'data/camera_para.dat',
121 | 		detectionMode: 'mono'
122 | 	});
123 | 	
124 | 	// copy projection matrix to camera when initialization complete
125 | 	arToolkitContext.init( function onCompleted(){
126 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
127 | 	});
128 | 
129 | 	////////////////////////////////////////////////////////////
130 | 	// setup markerRoots
131 | 	////////////////////////////////////////////////////////////
132 | 
133 | 	// build markerControls
134 | 	markerRoot1 = new THREE.Group();
135 | 	scene.add(markerRoot1);
136 | 	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
137 | 		type: 'pattern', patternUrl: "data/hiro.patt",
138 | 	})
139 | 
140 | 	let geometry1 = new THREE.PlaneBufferGeometry(1,1, 4,4);
141 | 	
142 | 	let loader = new THREE.TextureLoader();
143 | 	let texture = loader.load( 'images/color-grid.png', render );
144 | 	
145 | 	material1 = new THREE.ShaderMaterial({
146 | 		uniforms: {
147 | 			time: { value: 1.0 },
148 | 			baseTexture: { value: texture }
149 | 		},
150 | 		vertexShader: document.getElementById( 'vertexShader' ).textContent,
151 | 		fragmentShader: document.getElementById( 'fragmentShader' ).textContent
152 | 	});
153 | 	
154 | 	mesh1 = new THREE.Mesh( geometry1, material1 );
155 | 	mesh1.rotation.x = -Math.PI/2;
156 | 	
157 | 	markerRoot1.add( mesh1 );
158 | }
159 | 
160 | function update()
161 | {
162 | 	// update artoolkit on every frame
163 | 	if ( arToolkitSource.ready !== false )
164 | 		arToolkitContext.update( arToolkitSource.domElement );
165 | 		
166 | 	material1.uniforms.time.value += deltaTime;
167 | }
168 | 
169 | 
170 | function render()
171 | {
172 | 	renderer.render( scene, camera );
173 | }
174 | 
175 | 
176 | function animate()
177 | {
178 | 	requestAnimationFrame(animate);
179 | 	deltaTime = clock.getDelta();
180 | 	totalTime += deltaTime;
181 | 	update();
182 | 	render();
183 | }
184 | 
185 | </script>
186 | 
187 | </body>
188 | </html>


--------------------------------------------------------------------------------
/shadow-balls.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | 	<!-- include jsartookit -->
  8 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
  9 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 10 | 	<!-- include threex.artoolkit -->
 11 | 	<script src="threex/threex-artoolkitsource.js"></script>
 12 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 13 | 	<script src="threex/threex-arbasecontrols.js"></script>
 14 | 	<script src="threex/threex-armarkercontrols.js"></script>
 15 | </head>
 16 | 
 17 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 18 | 
 19 | <!-- 
 20 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 21 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 22 | -->
 23 | 
 24 | 
 25 | <script>
 26 | 
 27 | var scene, camera, renderer, clock, deltaTime, totalTime;
 28 | 
 29 | var arToolkitSource, arToolkitContext;
 30 | 
 31 | var markerRoot1;
 32 | 
 33 | var material1, mesh1;
 34 | 
 35 | initialize();
 36 | animate();
 37 | 
 38 | function initialize()
 39 | {
 40 | 	scene = new THREE.Scene();
 41 | 				
 42 | 	camera = new THREE.Camera();
 43 | 	scene.add(camera);
 44 | 
 45 | 	renderer = new THREE.WebGLRenderer({
 46 | 		antialias : true,
 47 | 		alpha: true
 48 | 	});
 49 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 50 | 	renderer.setSize( 640, 480 );
 51 | 	renderer.domElement.style.position = 'absolute'
 52 | 	renderer.domElement.style.top = '0px'
 53 | 	renderer.domElement.style.left = '0px'
 54 | 	document.body.appendChild( renderer.domElement );
 55 | 
 56 | 	clock = new THREE.Clock();
 57 | 	deltaTime = 0;
 58 | 	totalTime = 0;
 59 | 	
 60 | 	////////////////////////////////////////////////////////////
 61 | 	// setup arToolkitSource
 62 | 	////////////////////////////////////////////////////////////
 63 | 
 64 | 	arToolkitSource = new THREEx.ArToolkitSource({
 65 | 		sourceType : 'webcam',
 66 | 	});
 67 | 
 68 | 	function onResize()
 69 | 	{
 70 | 		arToolkitSource.onResize()	
 71 | 		arToolkitSource.copySizeTo(renderer.domElement)	
 72 | 		if ( arToolkitContext.arController !== null )
 73 | 		{
 74 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
 75 | 		}	
 76 | 	}
 77 | 
 78 | 	arToolkitSource.init(function onReady(){
 79 | 		onResize()
 80 | 	});
 81 | 	
 82 | 	// handle resize event
 83 | 	window.addEventListener('resize', function(){
 84 | 		onResize()
 85 | 	});
 86 | 	
 87 | 	////////////////////////////////////////////////////////////
 88 | 	// setup arToolkitContext
 89 | 	////////////////////////////////////////////////////////////	
 90 | 
 91 | 	// create atToolkitContext
 92 | 	arToolkitContext = new THREEx.ArToolkitContext({
 93 | 		cameraParametersUrl: 'data/camera_para.dat',
 94 | 		detectionMode: 'mono'
 95 | 	});
 96 | 	
 97 | 	// copy projection matrix to camera when initialization complete
 98 | 	arToolkitContext.init( function onCompleted(){
 99 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
100 | 	});
101 | 
102 | 	////////////////////////////////////////////////////////////
103 | 	// setup markerRoots
104 | 	////////////////////////////////////////////////////////////
105 | 
106 | 	// build markerControls
107 | 	markerRoot1 = new THREE.Group();
108 | 	scene.add(markerRoot1);
109 | 	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
110 | 		type: 'pattern', patternUrl: "data/kanji.patt",
111 | 	})
112 | 
113 | 	////////////////////////////////////////////////////////////
114 | 	// setup scene
115 | 	////////////////////////////////////////////////////////////
116 | 	
117 | 	renderer.shadowMap.enabled = true;
118 | 	renderer.shadowMap.type = THREE.PCFSoftShadowMap;
119 | 	
120 | 	let loader = new THREE.TextureLoader();
121 | 		
122 | 	let sceneGroup = new THREE.Group();
123 | 	markerRoot1.add(sceneGroup);
124 | 	
125 | 	let floorGeometry = new THREE.PlaneGeometry( 20,20 );
126 | 	let floorMaterial = new THREE.ShadowMaterial();
127 | 	floorMaterial.opacity = 0.3;
128 | 	let floorMesh = new THREE.Mesh( floorGeometry, floorMaterial );
129 | 	floorMesh.rotation.x = -Math.PI/2;
130 | 	floorMesh.receiveShadow = true;
131 | 	sceneGroup.add( floorMesh );
132 | 	
133 | 	
134 | 	ballMeshArray = [];
135 | 	let ballTexture = loader.load("images/basketball-gray.png");
136 | 	let ballColors = [ 0xff0000, 0x009900, 0xff8800, 0x0000ff ];
137 | 	let p = 1;
138 | 	let ballPositions = [ new THREE.Vector3(p,1,p), new THREE.Vector3(-p,1,p), 
139 | 	                      new THREE.Vector3(-p,1,-p), new THREE.Vector3(p,1,-p) ];
140 | 	for (let n = 0; n < 4; n++)
141 | 	{
142 | 		let ballMesh = new THREE.Mesh(
143 | 			new THREE.SphereGeometry(0.5, 32, 32),
144 | 			new THREE.MeshLambertMaterial({ 
145 | 				map: ballTexture, 
146 | 				color: ballColors[n]
147 | 			})
148 | 		);
149 | 		ballMesh.position.copy(ballPositions[n]);
150 | 		ballMesh.castShadow = true;
151 | 		sceneGroup.add( ballMesh );
152 | 		ballMeshArray[n] = ballMesh;
153 | 	}
154 | 	
155 | 	let light = new THREE.PointLight( 0xffffff, 1, 100 );
156 | 	light.position.set( 0,4,0 ); // default; light shining from top
157 | 	light.castShadow = true;
158 | 	sceneGroup.add( light );
159 | 	
160 | 	let lightSphere = new THREE.Mesh(
161 | 		new THREE.SphereGeometry(0.1),
162 | 		new THREE.MeshBasicMaterial({
163 | 			color: 0xffffff,
164 | 			transparent: true,
165 | 			opacity: 0.8
166 | 		})
167 | 	);
168 | 	lightSphere.position.copy( light.position );
169 | 	sceneGroup.add( lightSphere );
170 | 	
171 | 	let ambientLight = new THREE.AmbientLight( 0x666666 );
172 | 	sceneGroup.add( ambientLight );
173 | 	// let helper = new THREE.CameraHelper( light.shadow.camera );
174 | 	// sceneGroup.add( helper );
175 | }
176 | 
177 | function update()
178 | {
179 | 	// update artoolkit on every frame
180 | 	if ( arToolkitSource.ready !== false )
181 | 		arToolkitContext.update( arToolkitSource.domElement );
182 | 	
183 | 	ballMeshArray[0].position.y = 1.2 * (Math.abs(Math.sin(2.00 * totalTime + 0.10)) + 0.5);
184 | 	ballMeshArray[1].position.y = 1.1 * (Math.abs(Math.sin(2.33 * totalTime + 0.37)) + 0.5);
185 | 	ballMeshArray[2].position.y = 1.3 * (Math.abs(Math.sin(2.71 * totalTime + 0.53)) + 0.5);
186 | 	ballMeshArray[3].position.y = 0.9 * (Math.abs(Math.sin(3.02 * totalTime + 0.77)) + 0.5);
187 | }
188 | 
189 | 
190 | function render()
191 | {
192 | 	renderer.render( scene, camera );
193 | }
194 | 
195 | 
196 | function animate()
197 | {
198 | 	requestAnimationFrame(animate);
199 | 	deltaTime = clock.getDelta();
200 | 	totalTime += deltaTime;
201 | 	update();
202 | 	render();
203 | }
204 | 
205 | </script>
206 | 
207 | </body>
208 | </html>


--------------------------------------------------------------------------------
/shadow.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | 	<!-- include jsartookit -->
  8 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
  9 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 10 | 	<!-- include threex.artoolkit -->
 11 | 	<script src="threex/threex-artoolkitsource.js"></script>
 12 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 13 | 	<script src="threex/threex-arbasecontrols.js"></script>
 14 | 	<script src="threex/threex-armarkercontrols.js"></script>
 15 | </head>
 16 | 
 17 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 18 | 
 19 | <!-- 
 20 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 21 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 22 | -->
 23 | 
 24 | 
 25 | <script>
 26 | 
 27 | var scene, camera, renderer, clock, deltaTime, totalTime;
 28 | 
 29 | var arToolkitSource, arToolkitContext;
 30 | 
 31 | var markerRoot1;
 32 | 
 33 | var material1, mesh1;
 34 | 
 35 | initialize();
 36 | animate();
 37 | 
 38 | function initialize()
 39 | {
 40 | 	scene = new THREE.Scene();
 41 | 				
 42 | 	camera = new THREE.Camera();
 43 | 	scene.add(camera);
 44 | 
 45 | 	renderer = new THREE.WebGLRenderer({
 46 | 		antialias : true,
 47 | 		alpha: true
 48 | 	});
 49 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 50 | 	renderer.setSize( 640, 480 );
 51 | 	renderer.domElement.style.position = 'absolute'
 52 | 	renderer.domElement.style.top = '0px'
 53 | 	renderer.domElement.style.left = '0px'
 54 | 	document.body.appendChild( renderer.domElement );
 55 | 
 56 | 	clock = new THREE.Clock();
 57 | 	deltaTime = 0;
 58 | 	totalTime = 0;
 59 | 	
 60 | 	////////////////////////////////////////////////////////////
 61 | 	// setup arToolkitSource
 62 | 	////////////////////////////////////////////////////////////
 63 | 
 64 | 	arToolkitSource = new THREEx.ArToolkitSource({
 65 | 		sourceType : 'webcam',
 66 | 	});
 67 | 
 68 | 	function onResize()
 69 | 	{
 70 | 		arToolkitSource.onResize()	
 71 | 		arToolkitSource.copySizeTo(renderer.domElement)	
 72 | 		if ( arToolkitContext.arController !== null )
 73 | 		{
 74 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
 75 | 		}	
 76 | 	}
 77 | 
 78 | 	arToolkitSource.init(function onReady(){
 79 | 		onResize()
 80 | 	});
 81 | 	
 82 | 	// handle resize event
 83 | 	window.addEventListener('resize', function(){
 84 | 		onResize()
 85 | 	});
 86 | 	
 87 | 	////////////////////////////////////////////////////////////
 88 | 	// setup arToolkitContext
 89 | 	////////////////////////////////////////////////////////////	
 90 | 
 91 | 	// create atToolkitContext
 92 | 	arToolkitContext = new THREEx.ArToolkitContext({
 93 | 		cameraParametersUrl: 'data/camera_para.dat',
 94 | 		detectionMode: 'mono'
 95 | 	});
 96 | 	
 97 | 	// copy projection matrix to camera when initialization complete
 98 | 	arToolkitContext.init( function onCompleted(){
 99 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
100 | 	});
101 | 
102 | 	////////////////////////////////////////////////////////////
103 | 	// setup markerRoots
104 | 	////////////////////////////////////////////////////////////
105 | 
106 | 	// build markerControls
107 | 	markerRoot1 = new THREE.Group();
108 | 	scene.add(markerRoot1);
109 | 	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
110 | 		type: 'pattern', patternUrl: "data/kanji.patt",
111 | 	})
112 | 
113 | 	////////////////////////////////////////////////////////////
114 | 	// setup scene
115 | 	////////////////////////////////////////////////////////////
116 | 	
117 | 	renderer.shadowMap.enabled = true;
118 | 	renderer.shadowMap.type = THREE.PCFSoftShadowMap;
119 | 	
120 | 	let loader = new THREE.TextureLoader();
121 | 		
122 | 	let sceneGroup = new THREE.Group();
123 | 	markerRoot1.add(sceneGroup);
124 | 	
125 | 	let texture = loader.load("images/color-grid.png");
126 | 	// repeat texture
127 | 	texture.wrapS = THREE.RepeatWrapping;
128 | 	texture.wrapT = THREE.RepeatWrapping;
129 | 	texture.repeat.set(8,1);
130 | 	
131 | 	shadowMesh = new THREE.Mesh( 
132 | 		new THREE.TorusKnotGeometry(0.5, 0.2, 128, 16), // new THREE.SphereBufferGeometry(1, 32, 32), 
133 | 		new THREE.MeshLambertMaterial({ map: texture })
134 | 	);
135 | 	shadowMesh.position.y = 1;
136 | 	shadowMesh.castShadow = true;
137 | 	shadowMesh.receiveShadow = true;
138 | 	sceneGroup.add( shadowMesh );
139 | 	
140 | 	let floorGeometry = new THREE.PlaneGeometry( 20,20 );
141 | 	let floorMaterial = new THREE.ShadowMaterial();
142 | 	floorMaterial.opacity = 0.3;
143 | 	let floorMesh = new THREE.Mesh( floorGeometry, floorMaterial );
144 | 	floorMesh.rotation.x = -Math.PI/2;
145 | 	floorMesh.receiveShadow = true;
146 | 	sceneGroup.add( floorMesh );
147 | 
148 | 	
149 | 	let light = new THREE.PointLight( 0xffffff, 1, 100 );
150 | 	light.position.set( 0,4,0 ); // default; light shining from top
151 | 	light.castShadow = true;
152 | 	sceneGroup.add( light );
153 | 	
154 | 	let lightSphere = new THREE.Mesh(
155 | 		new THREE.SphereGeometry(0.1),
156 | 		new THREE.MeshBasicMaterial({
157 | 			color: 0xffffff,
158 | 			transparent: true,
159 | 			opacity: 0.8
160 | 		})
161 | 	);
162 | 	lightSphere.position.copy( light.position );
163 | 	sceneGroup.add( lightSphere );
164 | 	
165 | 	let ambientLight = new THREE.AmbientLight( 0x666666 );
166 | 	sceneGroup.add( ambientLight );
167 | 	// let helper = new THREE.CameraHelper( light.shadow.camera );
168 | 	// sceneGroup.add( helper );
169 | }
170 | 
171 | function update()
172 | {
173 | 	// update artoolkit on every frame
174 | 	if ( arToolkitSource.ready !== false )
175 | 		arToolkitContext.update( arToolkitSource.domElement );
176 | 		
177 | 	shadowMesh.rotation.y -= 0.01;
178 | }
179 | 
180 | 
181 | function render()
182 | {
183 | 	renderer.render( scene, camera );
184 | }
185 | 
186 | 
187 | function animate()
188 | {
189 | 	requestAnimationFrame(animate);
190 | 	deltaTime = clock.getDelta();
191 | 	totalTime += deltaTime;
192 | 	update();
193 | 	render();
194 | }
195 | 
196 | </script>
197 | 
198 | </body>
199 | </html>


--------------------------------------------------------------------------------
/skybox-test.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<script src='js/keyboard.js'></script>
  6 | 	<!-- include three.js library -->
  7 | 	<script src='js/three.js'></script>
  8 | 	<script src='js/stats.min.js'></script>
  9 | </head>
 10 | 
 11 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 12 | 
 13 | <!-- 
 14 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 15 | -->
 16 | 
 17 | <script>
 18 | 
 19 | var scene, camera, renderer, clock, deltaTime, totalTime, keyboard, stats;
 20 | 
 21 | var mover;
 22 | 
 23 | initialize();
 24 | animate();
 25 | 
 26 | function initialize()
 27 | {
 28 | 	scene = new THREE.Scene();
 29 | 				
 30 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
 31 | 	
 32 | 	mover = new THREE.Group();
 33 | 	mover.add( camera );
 34 | 	mover.position.set(0, 2, 4);
 35 | 	scene.add( mover );
 36 | 		
 37 | 	//camera.position.set(0, 2, 4);
 38 | 	//camera.lookAt( scene.position );	
 39 | 	//scene.add( camera );
 40 | 
 41 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.00 );
 42 | 	scene.add( ambientLight );
 43 | 	
 44 | 	// let pointLight = new THREE.PointLight();
 45 | 	// camera.add( pointLight );
 46 | 	
 47 | 	renderer = new THREE.WebGLRenderer({
 48 | 		antialias : true,
 49 | 		alpha: false
 50 | 	});
 51 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 52 | 	renderer.setSize( window.innerWidth, window.innerHeight );
 53 | 	renderer.domElement.style.position = 'absolute'
 54 | 	renderer.domElement.style.top  = '0px'
 55 | 	renderer.domElement.style.left = '0px'
 56 | 	document.body.appendChild( renderer.domElement );
 57 | 	window.addEventListener( 'resize', onWindowResize, false );
 58 | 
 59 | 	clock = new THREE.Clock();
 60 | 	deltaTime = 0;
 61 | 	totalTime = 0;
 62 | 	
 63 | 	keyboard = new Keyboard();
 64 | 	
 65 | 	stats = new Stats();
 66 | 	document.body.appendChild( stats.dom );
 67 | 	
 68 | 	let loader = new THREE.TextureLoader();
 69 | 	
 70 | 	// floor
 71 | 	let floorGeometry = new THREE.PlaneGeometry(10,10);
 72 | 	let floorMaterial = new THREE.MeshBasicMaterial({ 
 73 | 		map: loader.load( 'images/color-grid.png' ),
 74 | 		transparent: true,
 75 | 		opacity: 0.25
 76 | 	});
 77 | 	let floorMesh = new THREE.Mesh( floorGeometry, floorMaterial );
 78 | 	floorMesh.rotation.x = -Math.PI/2;
 79 | 	scene.add( floorMesh );
 80 | 	
 81 | 	let cubeGeometry = new THREE.BoxGeometry(1,1,1);
 82 | 	let materialArray = [
 83 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/xpos.png") } ),
 84 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/xneg.png") } ),
 85 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/ypos.png") } ),
 86 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/yneg.png") } ),
 87 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/zpos.png") } ),
 88 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/zneg.png") } ),
 89 | 	];
 90 | 	let cubeMesh = new THREE.Mesh( cubeGeometry, materialArray );
 91 | 	cubeMesh.position.y = 0.5;
 92 | 	scene.add( cubeMesh );
 93 | 	
 94 | 	// method 1:
 95 | 	let skyTexture = new THREE.CubeTextureLoader()
 96 | 		.setPath( 'images/mountain/' )
 97 | 		.load([ 'posx.jpg',	'negx.jpg',	'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ]);
 98 | 	// scene.background = skyTexture;
 99 | 	
100 | 	// method 2:
101 | 	let skyMaterialArray = [
102 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/mountain/posx.jpg"), side: THREE.BackSide } ),
103 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/mountain/negx.jpg"), side: THREE.BackSide } ),
104 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/mountain/posy.jpg"), side: THREE.BackSide } ),
105 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/mountain/negy.jpg"), side: THREE.BackSide } ),
106 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/mountain/posz.jpg"), side: THREE.BackSide } ),
107 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/mountain/negz.jpg"), side: THREE.BackSide } ),
108 | 	];
109 | 	let skyMesh = new THREE.Mesh(
110 | 		new THREE.CubeGeometry(100,100,100),
111 | 		skyMaterialArray );
112 | 	scene.add(skyMesh);
113 | }
114 | 
115 | function update()
116 | {
117 | 	stats.update();
118 | 	keyboard.update();
119 | 	
120 | 	let translateSpeed = 0.5; // units per second
121 | 	let distance = translateSpeed * deltaTime;
122 | 	let rotateSpeed = Math.PI/6; // radians per second
123 | 	let angle = rotateSpeed * deltaTime;
124 | 	
125 | 	if (keyboard.isKeyPressed("W"))
126 | 		mover.translateZ( -distance );
127 | 	if (keyboard.isKeyPressed("S"))
128 | 		mover.translateZ( distance );
129 | 		
130 | 	if (keyboard.isKeyPressed("A"))
131 | 		mover.translateX( -distance );
132 | 	if (keyboard.isKeyPressed("D"))
133 | 		mover.translateX( distance );
134 | 		
135 | 	if (keyboard.isKeyPressed("R"))
136 | 		mover.translateY( distance );
137 | 	if (keyboard.isKeyPressed("F"))
138 | 		mover.translateY( -distance );
139 | 		
140 | 	if (keyboard.isKeyPressed("Q"))
141 | 		mover.rotateY( angle );
142 | 	if (keyboard.isKeyPressed("E"))
143 | 		mover.rotateY( -angle );
144 | 		
145 | 	if (keyboard.isKeyPressed("T"))
146 | 		mover.children[0].rotateX( angle );
147 | 	if (keyboard.isKeyPressed("G"))
148 | 		mover.children[0].rotateX( -angle );
149 | 	
150 | 	
151 | 	//mesh.rotation.y += 0.01;
152 | }
153 | 
154 | function render()
155 | {
156 | 	renderer.render( scene, camera );
157 | }
158 | 
159 | function animate()
160 | {
161 | 	requestAnimationFrame(animate);
162 | 	deltaTime = clock.getDelta();
163 | 	totalTime += deltaTime;
164 | 	update();
165 | 	render();
166 | }
167 | 
168 | function onWindowResize() 
169 | {
170 | 	camera.aspect = window.innerWidth / window.innerHeight;
171 | 	camera.updateProjectionMatrix();
172 | 	renderer.setSize( window.innerWidth, window.innerHeight );
173 | }
174 | 
175 | </script>
176 | 
177 | </body>
178 | </html>


--------------------------------------------------------------------------------
/smoothed-controls.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, AR Cube!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | 	<!-- include jsartookit -->
  8 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
  9 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 10 | 	<!-- include threex.artoolkit -->
 11 | 	<script src="threex/threex-artoolkitsource.js"></script>
 12 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 13 | 	<script src="threex/threex-arbasecontrols.js"></script>
 14 | 	<script src="threex/threex-armarkercontrols.js"></script>
 15 | 	<script src="threex/threex-arsmoothedcontrols.js"></script>
 16 | </head>
 17 | 
 18 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 19 | 
 20 | <!-- 
 21 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 22 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 23 | -->
 24 | 
 25 | <script>
 26 | 
 27 | var scene, camera, renderer, clock, deltaTime, totalTime;
 28 | 
 29 | var arToolkitSource, arToolkitContext, smoothedControls;
 30 | 
 31 | var markerRoot1, markerRoot2;
 32 | 
 33 | var mesh1;
 34 | 
 35 | initialize();
 36 | animate();
 37 | 
 38 | function initialize()
 39 | {
 40 | 	scene = new THREE.Scene();
 41 | 
 42 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
 43 | 	scene.add( ambientLight );
 44 | 				
 45 | 	camera = new THREE.Camera();
 46 | 	scene.add(camera);
 47 | 
 48 | 	renderer = new THREE.WebGLRenderer({
 49 | 		antialias : true,
 50 | 		alpha: true
 51 | 	});
 52 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 53 | 	renderer.setSize( 640, 480 );
 54 | 	renderer.domElement.style.position = 'absolute'
 55 | 	renderer.domElement.style.top = '0px'
 56 | 	renderer.domElement.style.left = '0px'
 57 | 	document.body.appendChild( renderer.domElement );
 58 | 
 59 | 	clock = new THREE.Clock();
 60 | 	deltaTime = 0;
 61 | 	totalTime = 0;
 62 | 	
 63 | 	////////////////////////////////////////////////////////////
 64 | 	// setup arToolkitSource
 65 | 	////////////////////////////////////////////////////////////
 66 | 
 67 | 	arToolkitSource = new THREEx.ArToolkitSource({
 68 | 		sourceType : 'webcam',
 69 | 	});
 70 | 
 71 | 	function onResize()
 72 | 	{
 73 | 		arToolkitSource.onResize()	
 74 | 		arToolkitSource.copySizeTo(renderer.domElement)	
 75 | 		if ( arToolkitContext.arController !== null )
 76 | 		{
 77 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
 78 | 		}	
 79 | 	}
 80 | 
 81 | 	arToolkitSource.init(function onReady(){
 82 | 		onResize()
 83 | 	});
 84 | 	
 85 | 	// handle resize event
 86 | 	window.addEventListener('resize', function(){
 87 | 		onResize()
 88 | 	});
 89 | 	
 90 | 	////////////////////////////////////////////////////////////
 91 | 	// setup arToolkitContext
 92 | 	////////////////////////////////////////////////////////////	
 93 | 
 94 | 	// create atToolkitContext
 95 | 	arToolkitContext = new THREEx.ArToolkitContext({
 96 | 		cameraParametersUrl: 'data/camera_para.dat',
 97 | 		detectionMode: 'mono'
 98 | 	});
 99 | 	
100 | 	// copy projection matrix to camera when initialization complete
101 | 	arToolkitContext.init( function onCompleted(){
102 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
103 | 	});
104 | 
105 | 	////////////////////////////////////////////////////////////
106 | 	// setup markerRoots
107 | 	////////////////////////////////////////////////////////////
108 | 
109 | 	// build markerControls
110 | 	markerRoot1 = new THREE.Group();
111 | 	scene.add(markerRoot1);
112 | 	
113 | 	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
114 | 		type : 'pattern',
115 | 		patternUrl : "data/hiro.patt",
116 | 	})
117 | 
118 | 	// interpolates from last position to create smoother transitions when moving.
119 | 	// parameter lerp values near 0 are slow, near 1 are fast (instantaneous).
120 | 	let smoothedRoot = new THREE.Group();
121 | 	scene.add(smoothedRoot);
122 | 	smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot, {
123 | 		lerpPosition: 0.8,
124 | 		lerpQuaternion: 0.8,
125 | 		lerpScale: 1,
126 | 		// minVisibleDelay: 1,
127 | 		// minUnvisibleDelay: 1,
128 | 	});
129 | 
130 | 	let geometry1	= new THREE.CubeGeometry(1,1,1);
131 | 	let material1	= new THREE.MeshNormalMaterial({
132 | 		transparent : true,
133 | 		opacity: 0.5,
134 | 		side: THREE.DoubleSide
135 | 	}); 
136 | 	
137 | 	mesh1 = new THREE.Mesh( geometry1, material1 );
138 | 	mesh1.position.y = 0.5;
139 | 	
140 | 	// markerRoot1.add( mesh1 );
141 | 	smoothedRoot.add( mesh1 );
142 | }
143 | 
144 | 
145 | function update()
146 | {
147 | 	// update artoolkit on every frame
148 | 	if ( arToolkitSource.ready !== false )
149 | 		arToolkitContext.update( arToolkitSource.domElement );
150 | 		
151 | 	// additional code for smoothed controls
152 | 	smoothedControls.update(markerRoot1);
153 | }
154 | 
155 | 
156 | function render()
157 | {
158 | 	renderer.render( scene, camera );
159 | }
160 | 
161 | 
162 | function animate()
163 | {
164 | 	requestAnimationFrame(animate);
165 | 	deltaTime = clock.getDelta();
166 | 	totalTime += deltaTime;
167 | 	update();
168 | 	render();
169 | }
170 | 
171 | </script>
172 | 
173 | </body>
174 | </html>


--------------------------------------------------------------------------------
/stencil-test.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<script src='js/keyboard.js'></script>
  6 | 	<!-- include three.js library -->
  7 | 	<script src='js/three.js'></script>
  8 | 	<script src='js/stats.min.js'></script>
  9 | </head>
 10 | 
 11 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 12 | 
 13 | <!-- 
 14 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 15 | -->
 16 | 
 17 | <script>
 18 | 
 19 | var scene, camera, renderer, clock, deltaTime, totalTime, keyboard, stats;
 20 | 
 21 | var mover, plane;
 22 | 
 23 | initialize();
 24 | animate();
 25 | 
 26 | function initialize()
 27 | {
 28 | 	scene = new THREE.Scene();
 29 | 				
 30 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
 31 | 	
 32 | 	mover = new THREE.Group();
 33 | 	mover.add( camera );
 34 | 	mover.position.set(0, 2, 8);
 35 | 	scene.add( mover );
 36 | 
 37 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.00 );
 38 | 	scene.add( ambientLight );
 39 | 	
 40 | 	// let pointLight = new THREE.PointLight();
 41 | 	// camera.add( pointLight );
 42 | 	
 43 | 	renderer = new THREE.WebGLRenderer({
 44 | 		antialias : true,
 45 | 		alpha: false
 46 | 	});
 47 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 48 | 	renderer.setSize( window.innerWidth, window.innerHeight );
 49 | 	renderer.domElement.style.position = 'absolute'
 50 | 	renderer.domElement.style.top  = '0px'
 51 | 	renderer.domElement.style.left = '0px'
 52 | 	document.body.appendChild( renderer.domElement );
 53 | 	window.addEventListener( 'resize', onWindowResize, false );
 54 | 
 55 | 	clock = new THREE.Clock();
 56 | 	deltaTime = 0;
 57 | 	totalTime = 0;
 58 | 	
 59 | 	stats = new Stats();
 60 | 	document.body.appendChild( stats.dom );
 61 | 	
 62 | 	keyboard = new Keyboard();
 63 | 	
 64 | 	let loader = new THREE.TextureLoader();
 65 | 	
 66 | 	// textures from http://www.humus.name/
 67 | 	let skyMaterialArray1 = [
 68 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/beach/posx.jpg"), side: THREE.BackSide } ),
 69 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/beach/negx.jpg"), side: THREE.BackSide } ),
 70 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/beach/posy.jpg"), side: THREE.BackSide } ),
 71 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/beach/negy.jpg"), side: THREE.BackSide } ),
 72 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/beach/posz.jpg"), side: THREE.BackSide } ),
 73 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/beach/negz.jpg"), side: THREE.BackSide } ),
 74 | 	];
 75 | 	let skyMesh1 = new THREE.Mesh(
 76 | 		new THREE.CubeGeometry(500,500,500),
 77 | 		skyMaterialArray1 );
 78 | 	scene.add(skyMesh1);
 79 | 	
 80 | 	// floor
 81 | 	let floorGeometry = new THREE.PlaneGeometry(10,10);
 82 | 	let floorMaterial = new THREE.MeshBasicMaterial({ 
 83 | 		map: loader.load( 'images/color-grid.png' )
 84 | 	});
 85 | 	let floorMesh = new THREE.Mesh( floorGeometry, floorMaterial );
 86 | 	floorMesh.rotation.x = -Math.PI/2;
 87 | 	scene.add( floorMesh );
 88 | 	
 89 | 	let cubeGeometry = new THREE.BoxGeometry(1,1,1);
 90 | 	let materialArray = [
 91 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/xpos.png") } ),
 92 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/xneg.png") } ),
 93 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/ypos.png") } ),
 94 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/yneg.png") } ),
 95 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/zpos.png") } ),
 96 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/zneg.png") } ),
 97 | 	];
 98 | 	let cubeMesh = new THREE.Mesh( cubeGeometry, materialArray );
 99 | 	cubeMesh.position.y = 0.5;
100 | 	scene.add( cubeMesh );
101 | 	
102 | 	plane = new THREE.Mesh(
103 | 		new THREE.PlaneGeometry(2,2),
104 | 		new THREE.MeshBasicMaterial({
105 | 			map: loader.load("images/sphere-colored.png"),
106 | 			side: THREE.DoubleSide
107 | 		})
108 | 	);
109 | 	plane.position.set(1, 1, 2);
110 | 	scene.add(plane);
111 | 	
112 | 	plane.layers.set(1);
113 | 	camera.layers.enable(1);
114 | }
115 | 
116 | function update()
117 | {
118 | 	stats.update();
119 | 	keyboard.update();
120 | 	
121 | 	let translateSpeed = 1.0; // units per second
122 | 	let distance = translateSpeed * deltaTime;
123 | 	let rotateSpeed = Math.PI/6; // radians per second
124 | 	let angle = rotateSpeed * deltaTime;
125 | 	
126 | 	if (keyboard.isKeyPressed("W"))
127 | 		mover.translateZ( -distance );
128 | 	if (keyboard.isKeyPressed("S"))
129 | 		mover.translateZ( distance );
130 | 		
131 | 	if (keyboard.isKeyPressed("A"))
132 | 		mover.translateX( -distance );
133 | 	if (keyboard.isKeyPressed("D"))
134 | 		mover.translateX( distance );
135 | 		
136 | 	if (keyboard.isKeyPressed("R"))
137 | 		mover.translateY( distance );
138 | 	if (keyboard.isKeyPressed("F"))
139 | 		mover.translateY( -distance );
140 | 		
141 | 	if (keyboard.isKeyPressed("Q"))
142 | 		mover.rotateY( angle );
143 | 	if (keyboard.isKeyPressed("E"))
144 | 		mover.rotateY( -angle );
145 | 		
146 | 	if (keyboard.isKeyPressed("T"))
147 | 		mover.children[0].rotateX( angle );
148 | 	if (keyboard.isKeyPressed("G"))
149 | 		mover.children[0].rotateX( -angle );
150 | }
151 | 
152 | function render()
153 | {
154 | 	let gl = renderer.context;
155 | 	
156 | 	gl.enable(gl.DEPTH_TEST);
157 | 	gl.enable(gl.STENCIL_TEST);
158 | 	
159 | 	// do not clear buffers before each render
160 | 	renderer.autoClear = false;
161 | 	// clear buffers now: color, depth, stencil 
162 | 	renderer.clear(true,true,true);
163 | 	
164 | 	// goal: write 1s to stencil buffer in position of plane
165 | 
166 | 	// activate only layer 1, which only contains the plane
167 | 	camera.layers.set(1); 
168 | 	
169 | 	/*
170 | 	glStencilFunc specifies a test to apply to each pixel of the stencil buffer
171 | 
172 | 	glStencilFunc(OP, ref, mask)
173 | 	creates the test: (ref & mask) OP (stencil & mask)
174 | 	parameters:
175 | 		OP: GL_NEVER, GL_ALWAYS, GL_EQUAL, GL_NOTEQUAL, 
176 | 		    GL_LESS, GL_LEQUAL, GL_GEQUAL, GL_GREATER
177 | 		ref: a fixed integer used in the comparison
178 | 		mask: a mask applied to both ref and the stencil pixel; use 0xFF to disable 
179 | 	*/
180 | 	// always true (always passes); ref = 1.
181 | 	gl.stencilFunc(gl.ALWAYS, 1, 0xff);
182 | 	
183 | 	/*
184 | 	glStencilOp specifies the action to apply depending on the test results from glStencilFunc
185 | 
186 | 	glStencilOp(sFail, sPass_dFail, sPass_dPassOrDisabled)
187 | 	sFail: the test from glStencilFunc failed
188 | 	sPass_dFail: the test from glStencilFunc passed, but the depth buffer test failed
189 | 	sPass_dPassOrDisabled: the test from glStencilFunc passed, and the depth buffer passed or is disabled
190 | 	*/
191 | 	gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
192 | 	gl.stencilMask(0xff);
193 | 	
194 | 	// during render, do not modify the color or depth buffers (thus only the stencil buffer will be affected)
195 | 	gl.colorMask(false,false,false,false);
196 | 	gl.depthMask(false);
197 | 	
198 | 	renderer.render( scene, camera );
199 | 	
200 | 	// SECOND PASS
201 | 	
202 | 	// need to clear the depth buffer, in case of occlusion by other objects
203 | 	renderer.clear(false, true, false);
204 | 	
205 | 	// now modify all the buffers again
206 | 	gl.colorMask(true,true,true,true);
207 | 	gl.depthMask(true);
208 | 	
209 | 	// just draw where stencil buffer = 1
210 | 	// fragments are only rendered if they pass both the depth test 
211 | 	//  *and* the stencil test (as specified by glStencilFunc)
212 | 	gl.stencilFunc(gl.EQUAL, 1, 0xff);
213 | 	
214 | 	gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
215 | 	
216 | 	camera.layers.set(0); // layer 0 contains everything but plane
217 | 	renderer.render(scene,camera);
218 | }
219 | 
220 | function animate()
221 | {
222 | 	requestAnimationFrame(animate);
223 | 	deltaTime = clock.getDelta();
224 | 	totalTime += deltaTime;
225 | 	update();
226 | 	render();
227 | }
228 | 
229 | function onWindowResize() 
230 | {
231 | 	// camera.aspect = window.innerWidth / window.innerHeight;
232 | 	// camera.updateProjectionMatrix();
233 | 	renderer.setSize( window.innerWidth, window.innerHeight );
234 | }
235 | 
236 | </script>
237 | 
238 | </body>
239 | </html>


--------------------------------------------------------------------------------
/synchronized-relative-movement.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<script src='js/keyboard.js'></script>
  6 | 	<!-- include three.js library -->
  7 | 	<script src='js/three.js'></script>
  8 | </head>
  9 | 
 10 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 11 | 
 12 | <!-- 
 13 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 14 | -->
 15 | 
 16 | <script>
 17 | 
 18 | var scene, camera, renderer, clock, deltaTime, totalTime, keyboard;
 19 | 
 20 | var mover, secondMover, plane, secondPlane;
 21 | 
 22 | initialize();
 23 | animate();
 24 | 
 25 | function initialize()
 26 | {
 27 | 	scene = new THREE.Scene();
 28 | 				
 29 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
 30 | 	camera.position.set(0, 6, 8);
 31 | 	camera.lookAt( scene.position );	
 32 | 	scene.add( camera );
 33 | 
 34 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.00 );
 35 | 	scene.add( ambientLight );
 36 | 	
 37 | 	// let pointLight = new THREE.PointLight();
 38 | 	// camera.add( pointLight );
 39 | 	
 40 | 	renderer = new THREE.WebGLRenderer({
 41 | 		antialias : true,
 42 | 		alpha: false
 43 | 	});
 44 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 45 | 	renderer.setSize( window.innerWidth, window.innerHeight );
 46 | 	renderer.domElement.style.position = 'absolute'
 47 | 	renderer.domElement.style.top  = '0px'
 48 | 	renderer.domElement.style.left = '0px'
 49 | 	document.body.appendChild( renderer.domElement );
 50 | 	window.addEventListener( 'resize', onWindowResize, false );
 51 | 
 52 | 	clock = new THREE.Clock();
 53 | 	deltaTime = 0;
 54 | 	totalTime = 0;
 55 | 	
 56 | 	keyboard = new Keyboard();
 57 | 	
 58 | 	let loader = new THREE.TextureLoader();
 59 | 	
 60 | 	// floor
 61 | 	let floorGeometry = new THREE.PlaneGeometry(20,20);
 62 | 	let floorMaterial = new THREE.MeshBasicMaterial({ 
 63 | 		map: loader.load( 'images/color-grid.png' )
 64 | 	});
 65 | 	let floorMesh = new THREE.Mesh( floorGeometry, floorMaterial );
 66 | 	floorMesh.rotation.x = -Math.PI/2;
 67 | 	scene.add( floorMesh );
 68 | 	
 69 | 	let cubeGeometry = new THREE.BoxGeometry(1,1,1);
 70 | 	let materialArray = [
 71 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/xpos.png") } ),
 72 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/xneg.png") } ),
 73 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/ypos.png") } ),
 74 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/yneg.png") } ),
 75 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/zpos.png") } ),
 76 | 		new THREE.MeshBasicMaterial( { map: loader.load("images/zneg.png") } ),
 77 | 	];
 78 | 	let cubeMesh = new THREE.Mesh( cubeGeometry, materialArray );
 79 | 	
 80 | 	mover = new THREE.Group();
 81 | 	mover.add( cubeMesh );
 82 | 	mover.position.set(-3, 0.5, 2);
 83 | 	scene.add( mover );
 84 | 	
 85 | 	secondMover = new THREE.Group();
 86 | 	secondMover.add( new THREE.Mesh(cubeGeometry, materialArray) );
 87 | 	scene.add(secondMover);
 88 | 	
 89 | 	plane = new THREE.Mesh(
 90 | 		new THREE.PlaneGeometry(1,1),
 91 | 		new THREE.MeshBasicMaterial({map:loader.load("images/sphere-colored.png")})
 92 | 	);
 93 | 	plane.position.set(-4, 0.5, 1);
 94 | 	plane.rotation.y = Math.PI/4
 95 | 	scene.add(plane);
 96 | 	
 97 | 	secondPlane = new THREE.Mesh(
 98 | 		new THREE.PlaneGeometry(1,1),
 99 | 		new THREE.MeshBasicMaterial({map:loader.load("images/sphere-colored.png")})
100 | 	);
101 | 	secondPlane.position.set(4, 0.5, 3);
102 | 	secondPlane.rotation.y = -Math.PI/4;
103 | 	scene.add(secondPlane);
104 | }
105 | 
106 | function update()
107 | {
108 | 	// the following does not work; need to take into account local rotation before add/sub
109 | 	// let relativePosition = mover.position.clone().sub( plane.position );
110 | 	// secondMover.position.copy( relativePosition.add(secondPlane.position) );
111 | 	
112 | 	let relativePosition = plane.worldToLocal( mover.position.clone() );
113 | 	secondMover.position.copy( secondPlane.localToWorld( relativePosition ) );
114 | 	
115 | 	let relativeRotation = mover.quaternion.clone().multiply( plane.quaternion.clone().inverse() );	
116 | 	secondMover.quaternion.copy( relativeRotation.multiply(secondPlane.quaternion) ); 
117 | 	
118 | 	keyboard.update();
119 | 	
120 | 	let translateSpeed = 0.5; // units per second
121 | 	let distance = translateSpeed * deltaTime;
122 | 	let rotateSpeed = Math.PI/3; // radians per second
123 | 	let angle = rotateSpeed * deltaTime;
124 | 	
125 | 	if (keyboard.isKeyPressed("W"))
126 | 		mover.translateZ( -distance );
127 | 	if (keyboard.isKeyPressed("S"))
128 | 		mover.translateZ( distance );
129 | 		
130 | 	if (keyboard.isKeyPressed("A"))
131 | 		mover.translateX( -distance );
132 | 	if (keyboard.isKeyPressed("D"))
133 | 		mover.translateX( distance );
134 | 		
135 | 	if (keyboard.isKeyPressed("R"))
136 | 		mover.translateY( distance );
137 | 	if (keyboard.isKeyPressed("F"))
138 | 		mover.translateY( -distance );
139 | 		
140 | 	if (keyboard.isKeyPressed("Q"))
141 | 		mover.rotateY( angle );
142 | 	if (keyboard.isKeyPressed("E"))
143 | 		mover.rotateY( -angle );
144 | 		
145 | 	if (keyboard.isKeyPressed("T"))
146 | 		mover.children[0].rotateX( angle );
147 | 	if (keyboard.isKeyPressed("G"))
148 | 		mover.children[0].rotateX( -angle );
149 | 	
150 | 	
151 | 	//mesh.rotation.y += 0.01;
152 | }
153 | 
154 | function render()
155 | {
156 | 	renderer.render( scene, camera );
157 | }
158 | 
159 | function animate()
160 | {
161 | 	requestAnimationFrame(animate);
162 | 	deltaTime = clock.getDelta();
163 | 	totalTime += deltaTime;
164 | 	update();
165 | 	render();
166 | }
167 | 
168 | function onWindowResize() 
169 | {
170 | 	camera.aspect = window.innerWidth / window.innerHeight;
171 | 	camera.updateProjectionMatrix();
172 | 	renderer.setSize( window.innerWidth, window.innerHeight );
173 | }
174 | 
175 | </script>
176 | 
177 | </body>
178 | </html>


--------------------------------------------------------------------------------
/texture.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | 	<!-- include jsartookit -->
  8 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
  9 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 10 | 	<!-- include threex.artoolkit -->
 11 | 	<script src="threex/threex-artoolkitsource.js"></script>
 12 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 13 | 	<script src="threex/threex-arbasecontrols.js"></script>
 14 | 	<script src="threex/threex-armarkercontrols.js"></script>
 15 | </head>
 16 | 
 17 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 18 | 
 19 | <!-- 
 20 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 21 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 22 | -->
 23 | 
 24 | <script>
 25 | 
 26 | var scene, camera, renderer, clock, deltaTime, totalTime;
 27 | 
 28 | var arToolkitSource, arToolkitContext;
 29 | 
 30 | var markerRoot1;
 31 | 
 32 | var mesh1;
 33 | 
 34 | initialize();
 35 | animate();
 36 | 
 37 | function initialize()
 38 | {
 39 | 	scene = new THREE.Scene();
 40 | 
 41 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
 42 | 	scene.add( ambientLight );
 43 | 				
 44 | 	camera = new THREE.Camera();
 45 | 	scene.add(camera);
 46 | 
 47 | 	renderer = new THREE.WebGLRenderer({
 48 | 		antialias : true,
 49 | 		alpha: true
 50 | 	});
 51 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 52 | 	renderer.setSize( 640, 480 );
 53 | 	renderer.domElement.style.position = 'absolute'
 54 | 	renderer.domElement.style.top = '0px'
 55 | 	renderer.domElement.style.left = '0px'
 56 | 	document.body.appendChild( renderer.domElement );
 57 | 
 58 | 	clock = new THREE.Clock();
 59 | 	deltaTime = 0;
 60 | 	totalTime = 0;
 61 | 	
 62 | 	////////////////////////////////////////////////////////////
 63 | 	// setup arToolkitSource
 64 | 	////////////////////////////////////////////////////////////
 65 | 
 66 | 	arToolkitSource = new THREEx.ArToolkitSource({
 67 | 		sourceType : 'webcam',
 68 | 	});
 69 | 
 70 | 	function onResize()
 71 | 	{
 72 | 		arToolkitSource.onResize()	
 73 | 		arToolkitSource.copySizeTo(renderer.domElement)	
 74 | 		if ( arToolkitContext.arController !== null )
 75 | 		{
 76 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
 77 | 		}	
 78 | 	}
 79 | 
 80 | 	arToolkitSource.init(function onReady(){
 81 | 		onResize()
 82 | 	});
 83 | 	
 84 | 	// handle resize event
 85 | 	window.addEventListener('resize', function(){
 86 | 		onResize()
 87 | 	});
 88 | 	
 89 | 	////////////////////////////////////////////////////////////
 90 | 	// setup arToolkitContext
 91 | 	////////////////////////////////////////////////////////////	
 92 | 
 93 | 	// create atToolkitContext
 94 | 	arToolkitContext = new THREEx.ArToolkitContext({
 95 | 		cameraParametersUrl: 'data/camera_para.dat',
 96 | 		detectionMode: 'mono'
 97 | 	});
 98 | 	
 99 | 	// copy projection matrix to camera when initialization complete
100 | 	arToolkitContext.init( function onCompleted(){
101 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
102 | 	});
103 | 
104 | 	////////////////////////////////////////////////////////////
105 | 	// setup markerRoots
106 | 	////////////////////////////////////////////////////////////
107 | 
108 | 	// build markerControls
109 | 	markerRoot1 = new THREE.Group();
110 | 	scene.add(markerRoot1);
111 | 	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
112 | 		type: 'pattern', patternUrl: "data/hiro.patt",
113 | 	})
114 | 
115 | 	let geometry1 = new THREE.PlaneBufferGeometry(1,1, 4,4);
116 | 	let loader = new THREE.TextureLoader();
117 | 	let texture = loader.load( 'images/earth.jpg', render );
118 | 	let material1 = new THREE.MeshBasicMaterial( { map: texture } );
119 | 	
120 | 	mesh1 = new THREE.Mesh( geometry1, material1 );
121 | 	mesh1.rotation.x = -Math.PI/2;
122 | 	
123 | 	markerRoot1.add( mesh1 );
124 | }
125 | 
126 | 
127 | function update()
128 | {
129 | 	// update artoolkit on every frame
130 | 	if ( arToolkitSource.ready !== false )
131 | 		arToolkitContext.update( arToolkitSource.domElement );
132 | }
133 | 
134 | 
135 | function render()
136 | {
137 | 	renderer.render( scene, camera );
138 | }
139 | 
140 | 
141 | function animate()
142 | {
143 | 	requestAnimationFrame(animate);
144 | 	deltaTime = clock.getDelta();
145 | 	totalTime += deltaTime;
146 | 	update();
147 | 	render();
148 | }
149 | 
150 | </script>
151 | 
152 | </body>
153 | </html>


--------------------------------------------------------------------------------
/threex/threex-arbasecontrols.js:
--------------------------------------------------------------------------------
 1 | var THREEx = THREEx || {}
 2 | 
 3 | THREEx.ArBaseControls = function(object3d){
 4 | 	this.id = THREEx.ArBaseControls.id++
 5 | 
 6 | 	this.object3d = object3d
 7 | 	this.object3d.matrixAutoUpdate = false;
 8 | 	this.object3d.visible = false
 9 | 
10 | 	// Events to honor
11 | 	// this.dispatchEvent({ type: 'becameVisible' })
12 | 	// this.dispatchEvent({ type: 'markerVisible' })	// replace markerFound
13 | 	// this.dispatchEvent({ type: 'becameUnVisible' })
14 | }
15 | 
16 | THREEx.ArBaseControls.id = 0
17 | 
18 | Object.assign( THREEx.ArBaseControls.prototype, THREE.EventDispatcher.prototype );
19 | 
20 | //////////////////////////////////////////////////////////////////////////////
21 | //		Functions
22 | //////////////////////////////////////////////////////////////////////////////
23 | /**
24 |  * error catching function for update()
25 |  */
26 | THREEx.ArBaseControls.prototype.update = function(){
27 | 	console.assert(false, 'you need to implement your own update')
28 | }
29 | 
30 | /**
31 |  * error catching function for name()
32 |  */
33 | THREEx.ArBaseControls.prototype.name = function(){
34 | 	console.assert(false, 'you need to implement your own .name()')
35 | 	return 'Not yet implemented - name()'
36 | }
37 | 


--------------------------------------------------------------------------------
/threex/threex-arsmoothedcontrols.js:
--------------------------------------------------------------------------------
  1 | var THREEx = THREEx || {}
  2 | 
  3 | /**
  4 |  * - lerp position/quaternino/scale
  5 |  * - minDelayDetected
  6 |  * - minDelayUndetected
  7 |  * @param {[type]} object3d   [description]
  8 |  * @param {[type]} parameters [description]
  9 |  */
 10 | THREEx.ArSmoothedControls = function(object3d, parameters){
 11 | 	var _this = this
 12 | 	
 13 | 	THREEx.ArBaseControls.call(this, object3d)
 14 | 	
 15 | 	// copy parameters
 16 | 	this.object3d.visible = false
 17 | 	
 18 | 	this._lastLerpStepAt = null
 19 | 	this._visibleStartedAt = null
 20 | 	this._unvisibleStartedAt = null
 21 | 
 22 | 	// handle default parameters
 23 | 	parameters = parameters || {}
 24 | 	this.parameters = {
 25 | 		// lerp coeficient for the position - between [0,1] - default to 1
 26 | 		lerpPosition: 0.8,
 27 | 		// lerp coeficient for the quaternion - between [0,1] - default to 1
 28 | 		lerpQuaternion: 0.2,
 29 | 		// lerp coeficient for the scale - between [0,1] - default to 1
 30 | 		lerpScale: 0.7,
 31 | 		// delay for lerp fixed steps - in seconds - default to 1/120
 32 | 		lerpStepDelay: 1/60,
 33 | 		// minimum delay the sub-control must be visible before this controls become visible - default to 0 seconds
 34 | 		minVisibleDelay: 0.0,
 35 | 		// minimum delay the sub-control must be unvisible before this controls become unvisible - default to 0 seconds
 36 | 		minUnvisibleDelay: 0.2,
 37 | 	}
 38 | 	
 39 | 	//////////////////////////////////////////////////////////////////////////////
 40 | 	//		setParameters
 41 | 	//////////////////////////////////////////////////////////////////////////////
 42 | 	setParameters(parameters)
 43 | 	function setParameters(parameters){
 44 | 		if( parameters === undefined )	return
 45 | 		for( var key in parameters ){
 46 | 			var newValue = parameters[ key ]
 47 | 
 48 | 			if( newValue === undefined ){
 49 | 				console.warn( "THREEx.ArSmoothedControls: '" + key + "' parameter is undefined." )
 50 | 				continue
 51 | 			}
 52 | 
 53 | 			var currentValue = _this.parameters[ key ]
 54 | 
 55 | 			if( currentValue === undefined ){
 56 | 				console.warn( "THREEx.ArSmoothedControls: '" + key + "' is not a property of this material." )
 57 | 				continue
 58 | 			}
 59 | 
 60 | 			_this.parameters[ key ] = newValue
 61 | 		}
 62 | 	}
 63 | }
 64 | 	
 65 | THREEx.ArSmoothedControls.prototype = Object.create( THREEx.ArBaseControls.prototype );
 66 | THREEx.ArSmoothedControls.prototype.constructor = THREEx.ArSmoothedControls;
 67 | 
 68 | //////////////////////////////////////////////////////////////////////////////
 69 | //		update function
 70 | //////////////////////////////////////////////////////////////////////////////
 71 | 
 72 | THREEx.ArSmoothedControls.prototype.update = function(targetObject3d){
 73 | 	var object3d = this.object3d
 74 | 	var parameters = this.parameters
 75 | 	var wasVisible = object3d.visible
 76 | 	var present = performance.now()/1000
 77 | 
 78 | 
 79 | 	//////////////////////////////////////////////////////////////////////////////
 80 | 	//		handle object3d.visible with minVisibleDelay/minUnvisibleDelay
 81 | 	//////////////////////////////////////////////////////////////////////////////
 82 | 	if( targetObject3d.visible === false )	this._visibleStartedAt = null
 83 | 	if( targetObject3d.visible === true )	this._unvisibleStartedAt = null
 84 | 
 85 | 	if( targetObject3d.visible === true && this._visibleStartedAt === null )	this._visibleStartedAt = present
 86 | 	if( targetObject3d.visible === false && this._unvisibleStartedAt === null )	this._unvisibleStartedAt = present
 87 | 
 88 | 	if( wasVisible === false && targetObject3d.visible === true ){
 89 | 		var visibleFor = present - this._visibleStartedAt
 90 | 		if( visibleFor >= this.parameters.minVisibleDelay ){
 91 | 			object3d.visible = true
 92 | 			snapDirectlyToTarget()
 93 | 		}
 94 | 		// console.log('visibleFor', visibleFor)
 95 | 	}
 96 | 
 97 | 	if( wasVisible === true && targetObject3d.visible === false ){
 98 | 		var unvisibleFor = present - this._unvisibleStartedAt
 99 | 		if( unvisibleFor >= this.parameters.minUnvisibleDelay ){
100 | 			object3d.visible = false			
101 | 		}
102 | 	}
103 | 	
104 | 	//////////////////////////////////////////////////////////////////////////////
105 | 	//		apply lerp on positon/quaternion/scale
106 | 	//////////////////////////////////////////////////////////////////////////////
107 | 
108 | 	// apply lerp steps - require fix time steps to behave the same no matter the fps
109 | 	if( this._lastLerpStepAt === null ){
110 | 		applyOneSlerpStep()
111 | 		this._lastLerpStepAt = present
112 | 	}else{
113 | 		var nStepsToDo = Math.floor( (present - this._lastLerpStepAt)/this.parameters.lerpStepDelay )
114 | 		for(var i = 0; i < nStepsToDo; i++){
115 | 			applyOneSlerpStep()
116 | 			this._lastLerpStepAt += this.parameters.lerpStepDelay
117 | 		}
118 | 	}
119 | 
120 | 	// disable the lerp by directly copying targetObject3d position/quaternion/scale
121 | 	if( false ){		
122 | 		snapDirectlyToTarget()
123 | 	}
124 | 
125 | 	// update the matrix
126 | 	this.object3d.updateMatrix()
127 | 
128 | 	//////////////////////////////////////////////////////////////////////////////
129 | 	//		honor becameVisible/becameUnVisible event
130 | 	//////////////////////////////////////////////////////////////////////////////
131 | 	// honor becameVisible event
132 | 	if( wasVisible === false && object3d.visible === true ){
133 | 		this.dispatchEvent({ type: 'becameVisible' })
134 | 	}
135 | 	// honor becameUnVisible event
136 | 	if( wasVisible === true && object3d.visible === false ){
137 | 		this.dispatchEvent({ type: 'becameUnVisible' })
138 | 	}
139 | 	return
140 | 
141 | 	function snapDirectlyToTarget(){
142 | 		object3d.position.copy( targetObject3d.position )
143 | 		object3d.quaternion.copy( targetObject3d.quaternion )
144 | 		object3d.scale.copy( targetObject3d.scale )
145 | 	}	
146 | 	
147 | 	function applyOneSlerpStep(){
148 | 		object3d.position.lerp(targetObject3d.position, parameters.lerpPosition)
149 | 		object3d.quaternion.slerp(targetObject3d.quaternion, parameters.lerpQuaternion)
150 | 		object3d.scale.lerp(targetObject3d.scale, parameters.lerpScale)
151 | 	}
152 | }
153 | 


--------------------------------------------------------------------------------
/video.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | 	<!-- include jsartookit -->
  8 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
  9 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 10 | 	<!-- include threex.artoolkit -->
 11 | 	<script src="threex/threex-artoolkitsource.js"></script>
 12 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 13 | 	<script src="threex/threex-arbasecontrols.js"></script>
 14 | 	<script src="threex/threex-armarkercontrols.js"></script>
 15 | </head>
 16 | 
 17 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 18 | 
 19 | <video id="video" autoplay loop crossOrigin="anonymous" webkit-playsinline style="display:none">
 20 | 	<source src="video/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
 21 | 	<source src="video/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 22 | </video>
 23 | 		
 24 | <!-- 
 25 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 26 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 27 | -->
 28 | 
 29 | <script>
 30 | 
 31 | var scene, camera, renderer, clock, deltaTime, totalTime;
 32 | 
 33 | var arToolkitSource, arToolkitContext;
 34 | 
 35 | var markerRoot1;
 36 | 
 37 | var mesh1;
 38 | 
 39 | initialize();
 40 | animate();
 41 | 
 42 | function initialize()
 43 | {
 44 | 	scene = new THREE.Scene();
 45 | 
 46 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
 47 | 	scene.add( ambientLight );
 48 | 				
 49 | 	camera = new THREE.Camera();
 50 | 	scene.add(camera);
 51 | 
 52 | 	renderer = new THREE.WebGLRenderer({
 53 | 		antialias : true,
 54 | 		alpha: true
 55 | 	});
 56 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 57 | 	renderer.setSize( 640, 480 );
 58 | 	renderer.domElement.style.position = 'absolute'
 59 | 	renderer.domElement.style.top = '0px'
 60 | 	renderer.domElement.style.left = '0px'
 61 | 	document.body.appendChild( renderer.domElement );
 62 | 
 63 | 	clock = new THREE.Clock();
 64 | 	deltaTime = 0;
 65 | 	totalTime = 0;
 66 | 	
 67 | 	////////////////////////////////////////////////////////////
 68 | 	// setup arToolkitSource
 69 | 	////////////////////////////////////////////////////////////
 70 | 
 71 | 	arToolkitSource = new THREEx.ArToolkitSource({
 72 | 		sourceType : 'webcam',
 73 | 	});
 74 | 
 75 | 	function onResize()
 76 | 	{
 77 | 		arToolkitSource.onResize()	
 78 | 		arToolkitSource.copySizeTo(renderer.domElement)	
 79 | 		if ( arToolkitContext.arController !== null )
 80 | 		{
 81 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
 82 | 		}	
 83 | 	}
 84 | 
 85 | 	arToolkitSource.init(function onReady(){
 86 | 		onResize()
 87 | 	});
 88 | 	
 89 | 	// handle resize event
 90 | 	window.addEventListener('resize', function(){
 91 | 		onResize()
 92 | 	});
 93 | 	
 94 | 	////////////////////////////////////////////////////////////
 95 | 	// setup arToolkitContext
 96 | 	////////////////////////////////////////////////////////////	
 97 | 
 98 | 	// create atToolkitContext
 99 | 	arToolkitContext = new THREEx.ArToolkitContext({
100 | 		cameraParametersUrl: 'data/camera_para.dat',
101 | 		detectionMode: 'mono'
102 | 	});
103 | 	
104 | 	// copy projection matrix to camera when initialization complete
105 | 	arToolkitContext.init( function onCompleted(){
106 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
107 | 	});
108 | 
109 | 	////////////////////////////////////////////////////////////
110 | 	// setup markerRoots
111 | 	////////////////////////////////////////////////////////////
112 | 
113 | 	// build markerControls
114 | 	markerRoot1 = new THREE.Group();
115 | 	scene.add(markerRoot1);
116 | 	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
117 | 		type: 'pattern', patternUrl: "data/hiro.patt",
118 | 	})
119 | 
120 | 	let geometry1 = new THREE.PlaneBufferGeometry(2,2, 4,4);
121 | 
122 | 	let video = document.getElementById( 'video' );
123 | 	let texture = new THREE.VideoTexture( video );
124 | 	texture.minFilter = THREE.LinearFilter;
125 | 	texture.magFilter = THREE.LinearFilter;
126 | 	texture.format = THREE.RGBFormat;
127 | 	let material1 = new THREE.MeshBasicMaterial( { map: texture } );
128 | 	
129 | 	mesh1 = new THREE.Mesh( geometry1, material1 );
130 | 	mesh1.rotation.x = -Math.PI/2;
131 | 	
132 | 	markerRoot1.add( mesh1 );
133 | }
134 | 
135 | 
136 | function update()
137 | {
138 | 	// update artoolkit on every frame
139 | 	if ( arToolkitSource.ready !== false )
140 | 		arToolkitContext.update( arToolkitSource.domElement );
141 | }
142 | 
143 | 
144 | function render()
145 | {
146 | 	renderer.render( scene, camera );
147 | }
148 | 
149 | 
150 | function animate()
151 | {
152 | 	requestAnimationFrame(animate);
153 | 	deltaTime = clock.getDelta();
154 | 	totalTime += deltaTime;
155 | 	update();
156 | 	render();
157 | }
158 | 
159 | </script>
160 | 
161 | </body>
162 | </html>


--------------------------------------------------------------------------------
/video/sintel.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/video/sintel.mp4


--------------------------------------------------------------------------------
/video/sintel.ogv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguru-git/AR-Examples/c05f51cee5ec4df212aca686f89698d321c2e978/video/sintel.ogv


--------------------------------------------------------------------------------
/water-effect-AR.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | 	<!-- include jsartookit -->
  8 | 	<script src="jsartoolkit5/artoolkit.min.js"></script>
  9 | 	<script src="jsartoolkit5/artoolkit.api.js"></script>
 10 | 	<!-- include threex.artoolkit -->
 11 | 	<script src="threex/threex-artoolkitsource.js"></script>
 12 | 	<script src="threex/threex-artoolkitcontext.js"></script>
 13 | 	<script src="threex/threex-arbasecontrols.js"></script>
 14 | 	<script src="threex/threex-armarkercontrols.js"></script>
 15 | 
 16 | </head>
 17 | 
 18 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 19 | 
 20 | <!-- 
 21 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 22 |   Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
 23 | -->
 24 | 
 25 | <!-- ---------------- Custom Shader Code ------------------------ -->
 26 | <script id="vertexShader" type="x-shader/x-vertex">
 27 | uniform float time;
 28 | varying vec2 textureUV;
 29 | uniform sampler2D baseTexture;
 30 | void main() 
 31 | { 
 32 |     textureUV = uv;
 33 | 	vec2 repeatUV = textureUV * vec2(4.0, 1.0);
 34 | 	float sideDisplacement = 0.0;
 35 | 	// side displacement only applied near edge of texture
 36 | 	if (repeatUV.y < 0.15)
 37 | 	{
 38 | 		float angle = atan(position.y, position.x);
 39 | 		float s1 = sin(8.3 * angle);
 40 | 		float s2 = sin(7.1 * angle);
 41 | 		sideDisplacement = 0.08 * s1 * s1 * abs(sin(0.65*time)) + 0.09 * s2 * s2 * abs(sin(0.74*time));
 42 | 	}
 43 | 	vec3 newPosition = position + normal * sideDisplacement;
 44 |     gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
 45 | }
 46 | </script>
 47 | 
 48 | <script id="fragmentShader" type="x-shader/x-vertex"> 
 49 | uniform float time;
 50 | uniform sampler2D baseTexture;
 51 | varying vec2 textureUV;
 52 | void main() 
 53 | {
 54 | 	vec2 repeatUV = textureUV * vec2(4.0, 1.0);
 55 | 	// displacement creates scrolling effect on texture
 56 | 	vec2 displaceUV = repeatUV + vec2(0.0, time/20.0);
 57 | 	float alpha = 1.0;
 58 | 	// transparency only applied near edge of texture
 59 | 	if (repeatUV.y < 0.315)
 60 | 		alpha = 1.0/0.315 * repeatUV.y;
 61 | 	vec4 tintColor = texture2D( baseTexture, displaceUV ) * vec4( 1.0, 1.0, 1.0, alpha );
 62 | 	gl_FragColor = tintColor;
 63 | }  
 64 | </script>
 65 | <!-- ----------------------------------------------------------- -->
 66 | 
 67 | <script>
 68 | 
 69 | var scene, camera, renderer, clock, deltaTime, totalTime;
 70 | 
 71 | var arToolkitSource, arToolkitContext;
 72 | 
 73 | var markerRoot1;
 74 | 
 75 | var material1, mesh1;
 76 | 
 77 | initialize();
 78 | animate();
 79 | 
 80 | function initialize()
 81 | {
 82 | 	scene = new THREE.Scene();
 83 | 				
 84 | 	camera = new THREE.Camera();
 85 | 	scene.add( camera );
 86 | 
 87 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.00 );
 88 | 	scene.add( ambientLight );
 89 | 		
 90 | 	renderer = new THREE.WebGLRenderer({
 91 | 		antialias : true,
 92 | 		alpha: true
 93 | 	});
 94 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 95 | 	renderer.setSize( 640, 480 );
 96 | 	renderer.domElement.style.position = 'absolute'
 97 | 	renderer.domElement.style.top  = '0px'
 98 | 	renderer.domElement.style.left = '0px'
 99 | 	document.body.appendChild( renderer.domElement );
100 | 
101 | 	clock = new THREE.Clock();
102 | 	deltaTime = 0;
103 | 	totalTime = 0;
104 | 	
105 | 	////////////////////////////////////////////////////////////
106 | 	// setup arToolkitSource
107 | 	////////////////////////////////////////////////////////////
108 | 
109 | 	arToolkitSource = new THREEx.ArToolkitSource({
110 | 		sourceType : 'webcam',
111 | 	});
112 | 
113 | 	function onResize()
114 | 	{
115 | 		arToolkitSource.onResize()	
116 | 		arToolkitSource.copySizeTo(renderer.domElement)	
117 | 		if ( arToolkitContext.arController !== null )
118 | 		{
119 | 			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
120 | 		}	
121 | 	}
122 | 
123 | 	arToolkitSource.init(function onReady(){
124 | 		onResize()
125 | 	});
126 | 	
127 | 	// handle resize event
128 | 	window.addEventListener('resize', function(){
129 | 		onResize()
130 | 	});
131 | 	
132 | 	////////////////////////////////////////////////////////////
133 | 	// setup arToolkitContext
134 | 	////////////////////////////////////////////////////////////	
135 | 
136 | 	// create atToolkitContext
137 | 	arToolkitContext = new THREEx.ArToolkitContext({
138 | 		cameraParametersUrl: 'data/camera_para.dat',
139 | 		detectionMode: 'mono'
140 | 	});
141 | 	
142 | 	// copy projection matrix to camera when initialization complete
143 | 	arToolkitContext.init( function onCompleted(){
144 | 		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
145 | 	});
146 | 
147 | 	////////////////////////////////////////////////////////////
148 | 	// setup markerRoots
149 | 	////////////////////////////////////////////////////////////
150 | 
151 | 	// build markerControls
152 | 	markerRoot1 = new THREE.Group();
153 | 	markerRoot1.name = 'marker1';
154 | 	scene.add(markerRoot1);
155 | 	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
156 | 		type : 'pattern',
157 | 		patternUrl : "data/hiro.patt",
158 | 	})
159 | 	
160 | 	let loader = new THREE.TextureLoader();
161 | 		
162 | 	// water
163 | 	
164 | 	let geometry1 = new THREE.TorusGeometry(1,1, 64, 256); // radius, tube radius
165 | 	let texture1 = loader.load( 'images/water-2.jpg' );
166 | 	// let texture = loader.load( 'images/color-grid.png' );	
167 | 	texture1.wrapS = THREE.RepeatWrapping;
168 | 	texture1.wrapT = THREE.RepeatWrapping;
169 | 	texture1.repeat.set(8,2);
170 | 		
171 | 	// shader-based material
172 | 	material1 = new THREE.ShaderMaterial({
173 | 		uniforms: {
174 | 			time: { value: 1.0 },
175 | 			baseTexture: { value: texture1 },
176 | 		},
177 | 		vertexShader: document.getElementById( 'vertexShader' ).textContent,
178 | 		fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
179 | 		transparent: true,
180 | 	});
181 | 	
182 | 	mesh1 = new THREE.Mesh( geometry1, material1 );
183 | 	mesh1.rotation.x = -Math.PI/2;
184 | 	mesh1.scale.z = 0.10;
185 | 	
186 | 	markerRoot1.add( mesh1 );
187 | 	
188 | 	// the inside of the hole
189 | 	let geometry2	= new THREE.CylinderGeometry(1,1, 4, 32,1);
190 | 	let texture2 = loader.load( 'images/tiles.jpg', render );
191 | 	texture2.wrapS = THREE.RepeatWrapping;
192 | 	texture2.wrapT = THREE.RepeatWrapping;
193 | 	texture2.repeat.set(4,2);
194 | 	let material2	= new THREE.MeshBasicMaterial({
195 | 		transparent : true,
196 | 		map: texture2,
197 | 		side: THREE.BackSide
198 | 	}); 
199 | 	mesh2 = new THREE.Mesh( geometry2, material2 );
200 | 	mesh2.position.y = -2;
201 | 	markerRoot1.add( mesh2 );
202 | 	
203 | 	// the invisibility cloak (ring; has circular hole)
204 | 	let geometry0 = new THREE.RingGeometry(1,9, 32);
205 | 	let material0 = new THREE.MeshBasicMaterial({
206 | 		// map: loader.load( 'images/color-grid.png' ), // for testing placement
207 | 		colorWrite: false
208 | 	});
209 | 	let mesh0 = new THREE.Mesh( geometry0, material0 );
210 | 	mesh0.rotation.x = -Math.PI/2;
211 | 	markerRoot1.add(mesh0);	
212 | 	
213 | 	
214 | }
215 | 
216 | function update()
217 | {
218 | 	material1.uniforms.time.value += deltaTime;
219 | 	// update artoolkit on every frame
220 | 	if ( arToolkitSource.ready !== false )
221 | 		arToolkitContext.update( arToolkitSource.domElement );
222 | }
223 | 
224 | function render()
225 | {
226 | 	renderer.render( scene, camera );
227 | }
228 | 
229 | function animate()
230 | {
231 | 	requestAnimationFrame(animate);
232 | 	deltaTime = clock.getDelta();
233 | 	totalTime += deltaTime;
234 | 	update();
235 | 	render();
236 | }
237 | 
238 | 
239 | </script>
240 | 
241 | </body>
242 | </html>


--------------------------------------------------------------------------------
/water-effect.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  4 | 	<title>Hello, world!</title>
  5 | 	<!-- include three.js library -->
  6 | 	<script src='js/three.js'></script>
  7 | </head>
  8 | 
  9 | <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 10 | 
 11 | <!-- 
 12 |   Example created by Lee Stemkoski: https://github.com/stemkoski
 13 | -->
 14 | 
 15 | <!-- ---------------- Custom Shader Code ------------------------ -->
 16 | <script id="vertexShader" type="x-shader/x-vertex">
 17 | uniform float time;
 18 | varying vec2 textureUV;
 19 | uniform sampler2D baseTexture;
 20 | void main() 
 21 | { 
 22 |     textureUV = uv;
 23 | 	vec2 repeatUV = textureUV * vec2(4.0, 1.0);
 24 | 	float sideDisplacement = 0.0;
 25 | 	// side displacement only applied near edge of texture
 26 | 	if (repeatUV.y < 0.15)
 27 | 	{
 28 | 		float angle = atan(position.y, position.x);
 29 | 		float s1 = sin(8.3 * angle);
 30 | 		float s2 = sin(7.1 * angle);
 31 | 		sideDisplacement = 0.08 * s1 * s1 * abs(sin(0.65*time)) + 0.09 * s2 * s2 * abs(sin(0.74*time));
 32 | 	}
 33 | 	vec3 newPosition = position + normal * sideDisplacement;
 34 |     gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
 35 | }
 36 | </script>
 37 | 
 38 | <script id="fragmentShader" type="x-shader/x-vertex"> 
 39 | uniform float time;
 40 | uniform sampler2D baseTexture;
 41 | varying vec2 textureUV;
 42 | void main() 
 43 | {
 44 | 	vec2 repeatUV = textureUV * vec2(4.0, 1.0);
 45 | 	// displacement creates scrolling effect on texture
 46 | 	vec2 displaceUV = repeatUV + vec2(0.0, time/20.0);
 47 | 	float alpha = 1.0;
 48 | 	// transparency only applied near edge of texture
 49 | 	if (repeatUV.y < 0.15)
 50 | 		alpha = 1.0/0.15 * repeatUV.y;
 51 | 	vec4 tintColor = texture2D( baseTexture, displaceUV ) * vec4( 1.0, 1.0, 1.0, alpha );
 52 | 	gl_FragColor = tintColor;
 53 | }  
 54 | </script>
 55 | <!-- ----------------------------------------------------------- -->
 56 | 
 57 | <script>
 58 | 
 59 | var scene, camera, renderer, clock, deltaTime, totalTime;
 60 | 
 61 | var arToolkitSource, arToolkitContext;
 62 | 
 63 | var markerRoot1;
 64 | 
 65 | var material1, mesh1;
 66 | 
 67 | initialize();
 68 | animate();
 69 | 
 70 | function initialize()
 71 | {
 72 | 	scene = new THREE.Scene();
 73 | 				
 74 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
 75 | 	camera.position.set(0, 2, 4);
 76 | 	camera.lookAt( scene.position );	
 77 | 	scene.add( camera );
 78 | 
 79 | 	let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.00 );
 80 | 	scene.add( ambientLight );
 81 | 	
 82 | 	renderer = new THREE.WebGLRenderer({
 83 | 		antialias : true,
 84 | 		alpha: false
 85 | 	});
 86 | 	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 87 | 	renderer.setSize( window.innerWidth, window.innerHeight );
 88 | 	renderer.domElement.style.position = 'absolute'
 89 | 	renderer.domElement.style.top  = '0px'
 90 | 	renderer.domElement.style.left = '0px'
 91 | 	document.body.appendChild( renderer.domElement );
 92 | 	window.addEventListener( 'resize', onWindowResize, false );
 93 | 
 94 | 	clock = new THREE.Clock();
 95 | 	deltaTime = 0;
 96 | 	totalTime = 0;
 97 | 		
 98 | 	let geometry1 = new THREE.TorusGeometry(1.25,1.25, 64, 256); // radius, tube radius
 99 | 	
100 | 	let loader = new THREE.TextureLoader();
101 | 	let texture = loader.load( 'images/water-2.jpg' );
102 | 	// let texture = loader.load( 'images/color-grid.png' );
103 | 	
104 | 	// repeat texture
105 | 	texture.wrapS = THREE.RepeatWrapping;
106 | 	texture.wrapT = THREE.RepeatWrapping;
107 | 	texture.repeat.set(8,2);
108 | 		
109 | 	// Shader-based material
110 | 	material1 = new THREE.ShaderMaterial({
111 | 		uniforms: {
112 | 			time: { value: 1.0 },
113 | 			baseTexture: { value: texture },
114 | 		},
115 | 		vertexShader: document.getElementById( 'vertexShader' ).textContent,
116 | 		fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
117 | 		transparent: true,
118 | 	});
119 | 	
120 | 	mesh1 = new THREE.Mesh( geometry1, material1 );
121 | 	mesh1.rotation.x = -Math.PI/2;
122 | 	mesh1.scale.z = 0.10;
123 | 	
124 | 	scene.add( mesh1 );
125 | 	
126 | 	// floor
127 | 	let floorG = new THREE.PlaneGeometry(10,10,1,1);
128 | 	let floorT = loader.load( 'images/sand.jpg' );
129 | 	let floorM = new THREE.MeshBasicMaterial({map: floorT});
130 | 	let floor = new THREE.Mesh(floorG, floorM);
131 | 	floor.rotation.x = -Math.PI/2;
132 | 	scene.add(floor);
133 | }
134 | 
135 | function update()
136 | {
137 | 	material1.uniforms.time.value += deltaTime;
138 | }
139 | 
140 | function render()
141 | {
142 | 	renderer.render( scene, camera );
143 | }
144 | 
145 | function animate()
146 | {
147 | 	requestAnimationFrame(animate);
148 | 	deltaTime = clock.getDelta();
149 | 	totalTime += deltaTime;
150 | 	update();
151 | 	render();
152 | }
153 | 
154 | function onWindowResize() 
155 | {
156 | 	camera.aspect = window.innerWidth / window.innerHeight;
157 | 	camera.updateProjectionMatrix();
158 | 	renderer.setSize( window.innerWidth, window.innerHeight );
159 | }
160 | 
161 | </script>
162 | 
163 | </body>
164 | </html>


--------------------------------------------------------------------------------