daoshengmu/webxr_vr_cubes.html

## webxr_vr_cubes.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js vr - cubes</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>

		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> vr - interactive cubes
		</div>

		<script src="js/vr/HelioWebXRPolyfill.js"></script>

		<script type="module">

			import * as THREE from '../build/three.module.js';

			import { BoxLineGeometry } from './jsm/geometries/BoxLineGeometry.js';
			import { VRButton } from './jsm/webxr/VRButton.js';
			import { XRControllerModelFactory } from './jsm/webxr/XRControllerModelFactory.js';

			var clock = new THREE.Clock();

			var container;
			var camera, scene, raycaster, renderer;

			var room;

			var controller, controllerGrip, tempMatrix = new THREE.Matrix4();
			var INTERSECTED;

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x505050 );

				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
				camera.position.set( 0, 1.6, 3 );
				scene.add( camera );

				room = new THREE.LineSegments(
					new BoxLineGeometry( 6, 6, 6, 10, 10, 10 ).translate( 0, 3, 0 ),
					new THREE.LineBasicMaterial( { color: 0x808080 } )
				);
				scene.add( room );

				scene.add( new THREE.HemisphereLight( 0x606060, 0x404040 ) );

				var light = new THREE.DirectionalLight( 0xffffff );
				light.position.set( 1, 1, 1 ).normalize();
				scene.add( light );

				var geometry = new THREE.BoxBufferGeometry( 0.15, 0.15, 0.15 );

				for ( var i = 0; i < 1; i ++ ) {

					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xff0000 } ) );

					object.position.x = 0;
					object.position.y = 3;
					object.position.z = -1;
					room.add( object );

				}

				raycaster = new THREE.Raycaster();

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.outputEncoding = THREE.sRGBEncoding;
				renderer.xr.enabled = true;
				container.appendChild( renderer.domElement );


				controller = renderer.xr.getController( 0 );
				controller.addEventListener( 'connected', function ( event ) {

					this.add( buildController( event.data ) );

				} );
				controller.addEventListener( 'disconnected', function () {

					this.remove( this.children[ 0 ] );

				} );
				scene.add( controller );

				var controllerModelFactory = new XRControllerModelFactory();

				controllerGrip = renderer.xr.getControllerGrip( 0 );
				controllerGrip.add( controllerModelFactory.createControllerModel( controllerGrip ) );
				scene.add( controllerGrip );

				window.addEventListener( 'resize', onWindowResize, false );

				//

				document.body.appendChild( VRButton.createButton( renderer, {referenceSpaceType: 'local'}));

			}

			function buildController( data ) {

				switch ( data.targetRayMode ) {

					case 'tracked-pointer':

						var geometry = new THREE.BufferGeometry();
						geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 1 ], 3 ) );
						geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( [ 0.5, 0.5, 0.5, 0, 0, 0 ], 3 ) );

						var material = new THREE.LineBasicMaterial( { vertexColors: true, blending: THREE.AdditiveBlending } );

						return new THREE.Line( geometry, material );

					case 'gaze':

						var geometry = new THREE.RingBufferGeometry( 0.02, 0.04, 32 ).translate( 0, 0, - 1 );
						var material = new THREE.MeshBasicMaterial( { opacity: 0.5, transparent: true } );
						return new THREE.Mesh( geometry, material );

				}

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			//

			function animate() {

				renderer.setAnimationLoop( render );

			}

			function render() {

				renderer.render( scene, camera );

			}

		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>three.js vr - cubes</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>

	<div id="info">
	<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> vr - interactive cubes
	</div>

	<script src="js/vr/HelioWebXRPolyfill.js"></script>

	<script type="module">

	import * as THREE from '../build/three.module.js';

	import { BoxLineGeometry } from './jsm/geometries/BoxLineGeometry.js';
	import { VRButton } from './jsm/webxr/VRButton.js';
	import { XRControllerModelFactory } from './jsm/webxr/XRControllerModelFactory.js';

	var clock = new THREE.Clock();

	var container;
	var camera, scene, raycaster, renderer;

	var room;

	var controller, controllerGrip, tempMatrix = new THREE.Matrix4();
	var INTERSECTED;

	init();
	animate();

	function init() {

	container = document.createElement( 'div' );
	document.body.appendChild( container );

	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0x505050 );

	camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
	camera.position.set( 0, 1.6, 3 );
	scene.add( camera );

	room = new THREE.LineSegments(
	new BoxLineGeometry( 6, 6, 6, 10, 10, 10 ).translate( 0, 3, 0 ),
	new THREE.LineBasicMaterial( { color: 0x808080 } )
	);
	scene.add( room );

	scene.add( new THREE.HemisphereLight( 0x606060, 0x404040 ) );

	var light = new THREE.DirectionalLight( 0xffffff );
	light.position.set( 1, 1, 1 ).normalize();
	scene.add( light );

	var geometry = new THREE.BoxBufferGeometry( 0.15, 0.15, 0.15 );

	for ( var i = 0; i < 1; i ++ ) {

	var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xff0000 } ) );

	object.position.x = 0;
	object.position.y = 3;
	object.position.z = -1;
	room.add( object );

	}

	raycaster = new THREE.Raycaster();

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.outputEncoding = THREE.sRGBEncoding;
	renderer.xr.enabled = true;
	container.appendChild( renderer.domElement );


	controller = renderer.xr.getController( 0 );
	controller.addEventListener( 'connected', function ( event ) {

	this.add( buildController( event.data ) );

	} );
	controller.addEventListener( 'disconnected', function () {

	this.remove( this.children[ 0 ] );

	} );
	scene.add( controller );

	var controllerModelFactory = new XRControllerModelFactory();

	controllerGrip = renderer.xr.getControllerGrip( 0 );
	controllerGrip.add( controllerModelFactory.createControllerModel( controllerGrip ) );
	scene.add( controllerGrip );

	window.addEventListener( 'resize', onWindowResize, false );

	//

	document.body.appendChild( VRButton.createButton( renderer, {referenceSpaceType: 'local'}));

	}

	function buildController( data ) {

	switch ( data.targetRayMode ) {

	case 'tracked-pointer':

	var geometry = new THREE.BufferGeometry();
	geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 1 ], 3 ) );
	geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( [ 0.5, 0.5, 0.5, 0, 0, 0 ], 3 ) );

	var material = new THREE.LineBasicMaterial( { vertexColors: true, blending: THREE.AdditiveBlending } );

	return new THREE.Line( geometry, material );

	case 'gaze':

	var geometry = new THREE.RingBufferGeometry( 0.02, 0.04, 32 ).translate( 0, 0, - 1 );
	var material = new THREE.MeshBasicMaterial( { opacity: 0.5, transparent: true } );
	return new THREE.Mesh( geometry, material );

	}

	}

	function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

	}

	//

	function animate() {

	renderer.setAnimationLoop( render );

	}

	function render() {

	renderer.render( scene, camera );

	}

	</script>
	</body>
	</html>