examples/ar_simplest/index.html

<html>
	<head>
		<title>AR simplest example</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body, html {
				padding: 0;
				margin: 0;
				width: 100%;
				height: 100%;
				-webkit-user-select: none;
				user-select: none;
			}
			#target {
				width: 100%;
				height: 100%;
				position: absolute;
			}
			.common-message {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-size: 20px;
			}
		</style>
		<link rel="stylesheet" href="../common.css"/>
		<script src="../libs/three.min.js"></script>
		<script src="../models/TeapotBufferGeometry.js"></script>
<!-- 	
		<script type="module" src="../../polyfill/XRPolyfill.js"></script>
		<script nomodule src="../../dist/webxr-polyfill.js"></script>
 -->		
 		<script src="../../dist/webxr-polyfill.js"></script>
		<script src="../common.js"></script>
		
	</head>
	<body>
		<div id="target" />

		<div onclick="hideMe(this)" id="description">
			<h2>Simplest AR</h2>
			<h5>(click to dismiss)</h5>
			<p>This example displays the Utah Teapot positioned in front of the viewer at head height.</p>
		</div>
		<script>
			/*
			ARSimplestExample shows how to populate the content scene 
			*/
			class ARSimplestExample extends XRExampleBase {
				constructor(domElement){
					super(domElement, false)
				}

				// Called during construction to allow the app to populate the THREE.Scene
				initializeScene(){
					// Add a teapot at about eye level
					const geometry = new THREE.TeapotBufferGeometry(0.1)
					const materialColor = new THREE.Color()
					materialColor.setRGB(1.0, 1.0, 1.0)
					const material = new THREE.MeshLambertMaterial({
						color: materialColor,
						side: THREE.DoubleSide
					})
					const mesh = new THREE.Mesh(geometry, material)
					mesh.position.set(0, 1.4, -1)
					this.floorGroup.add(mesh)

					// Add a box on the floor
					const box = new THREE.Mesh(
						new THREE.BoxBufferGeometry(0.1, 0.1, 0.1),
						new THREE.MeshPhongMaterial({ color: '#DDFFDD' })
					)
					box.position.set(0, 0.05, 0)
					var axesHelper = AxesHelper( 0.2 );
		            this.floorGroup.add( axesHelper );
					this.floorGroup.add(box)

					// Add some lights to the scene
					this.scene.add(new THREE.AmbientLight('#FFF', 0.2))
					const directionalLight = new THREE.DirectionalLight('#FFF', 0.6)
					directionalLight.position.set(0, 10, 0)
					this.scene.add(directionalLight)
				}
			}

			function AxesHelper( size ) {
				size = size || 1;

				var vertices = [
					0, 0, 0,	size, 0, 0,
					0, 0, 0,	0, size, 0,
					0, 0, 0,	0, 0, size
				];

				var colors = [
					1, 0, 0,	1, 0.6, 0,
					0, 1, 0,	0.6, 1, 0,
					0, 0, 1,	0, 0.6, 1
				];

				var geometry = new THREE.BufferGeometry();
				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );

				var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );

				return new THREE.LineSegments(geometry, material);
			}


			window.addEventListener('DOMContentLoaded', () => {
				setTimeout(() => {
					try {
						window.pageApp = new ARSimplestExample(document.getElementById('target'))
					} catch(e) {
						console.error('page error', e)
					}
				}, 1000)
			})
		</script>
	</body>
</html>