clemos/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    requires :
npm install webvr-polyfill
http-server --cors .
ngrok http 8080

then navigate to https://xxxx.ngrok.io/examples/webvr_rollercoaster.html

  
## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webvr - roller coaster</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<!-- Origin Trial Token, feature = WebVR (For Chrome M59+), origin = https://threejs.org, expires = 2017-09-03 -->
		<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M59+)" data-expires="2017-09-03" content="Aqj+6XPnxHoSxQj/CDjGXhzrVFeP12/Pgvj7rfqFqVzodYX0ZXJNHTJIvCVExQfvip+Zq9GES+SOQ/zJlpceZgcAAABNeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJWUjEuMSIsImV4cGlyeSI6MTUwNDQ2NDIwNn0=">
		<style>
			body {
				margin: 0px;
				color: #fff;
				font-family: Monospace;
				background-color: #444;
				overflow: hidden;
			}
			a {
				color: #00f;
			}
		</style>
	</head>
	<body>

		<script src="/node_modules/webvr-polyfill/build/webvr-polyfill.min.js"></script>

		<script src="../build/three.js"></script>

		<script src="js/RollerCoaster.js"></script>

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

		<script>

			WEBVR.checkAvailability().catch( function( message ) {
				document.body.appendChild( WEBVR.getMessageContainer( message ) );
			} );

			var video = document.createElement('video');
			video.width    = 512;
			video.height   = 256;
			video.autoplay = true;
			video.style.position = "absolute";
			video.style.zIndex = "2000";
			video.style.width = "320px";
			video.style.height = "240px";
			video.style.border = "5px solid red";

			//document.body.appendChild(video);

			try{
				var constraints = {
					video : {
						width : 320,
						height: 240
					},
					audio : true
				};
				// var constraints = {
				// 	video: facingMode: { exact: "environment" }
				// };
				navigator.mediaDevices.getUserMedia(constraints).then( function(stream){
					console.log('got video',stream);
					stream.onaddtrack = function(t){
						console.log('track added',t);
					}

				  video.src = webkitURL.createObjectURL(stream);
				}).catch( function(error){
				  alert("Failed to get a stream due to error" );
				});
			} catch(e){
				alert("Error getting user media " + e);
			}

			var videoTexture = new THREE.VideoTexture( video );
			videoTexture.minFilter = THREE.LinearFilter;
			//videoTexture.magFilter = THREE.LinearFilter;
			//videoTexture.format = THREE.RGBFormat;
			var videoMaterial   = new THREE.MeshLambertMaterial({
			  map : videoTexture
			});

			//

			var renderer = new THREE.WebGLRenderer( { antialias: false } );
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			renderer.vr.enabled = true;

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

			var light = new THREE.HemisphereLight( 0xfff0f0, 0x606066 );
			light.position.set( 1, 1, 1 );
			scene.add( light );

			var train = new THREE.Object3D();
			scene.add( train );

			var camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 500 );
			train.add( camera );

			// environment

			var geometry = new THREE.PlaneBufferGeometry( 500, 500, 15, 15 );
			geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );

			var positions = geometry.attributes.position.array;
			var vertex = new THREE.Vector3();

			for ( var i = 0; i < positions.length; i += 3 ) {

				vertex.fromArray( positions, i );

				vertex.x += Math.random() * 10 - 5;
				vertex.z += Math.random() * 10 - 5;

				var distance = ( vertex.distanceTo( scene.position ) / 5 ) - 25;
				vertex.y = Math.random() * Math.max( 0, distance );

				vertex.toArray( positions, i );

			}

			geometry.computeVertexNormals();

			var material = new THREE.MeshLambertMaterial( {
				color: 0x407000
			} );
			var material = videoMaterial;

			var mesh = new THREE.Mesh( geometry, material );
			scene.add( mesh );

			var geometry = new TreesGeometry( mesh );
			var material = new THREE.MeshBasicMaterial( {
				side: THREE.DoubleSide, vertexColors: THREE.VertexColors
			} );
			var mesh = new THREE.Mesh( geometry, material );
			scene.add( mesh );

			var geometry = new SkyGeometry();
			var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
			var mesh = new THREE.Mesh( geometry, material );
			scene.add( mesh );

			//

			var PI2 = Math.PI * 2;

			var curve = ( function () {

				var vector = new THREE.Vector3();
				var vector2 = new THREE.Vector3();

				return {

					getPointAt: function ( t ) {

						t = t * PI2;

						var x = Math.sin( t * 3 ) * Math.cos( t * 4 ) * 50;
						var y = Math.sin( t * 10 ) * 2 + Math.cos( t * 17 ) * 2 + 5;
						var z = Math.sin( t ) * Math.sin( t * 4 ) * 50;

						return vector.set( x, y, z ).multiplyScalar( 2 );

					},

					getTangentAt: function ( t ) {

						var delta = 0.0001;
						var t1 = Math.max( 0, t - delta );
						var t2 = Math.min( 1, t + delta );

						return vector2.copy( this.getPointAt ( t2 ) )
							.sub( this.getPointAt( t1 ) ).normalize();

					}

				};

			} )();

			var geometry = new RollerCoasterGeometry( curve, 1500 );
			var material = new THREE.MeshPhongMaterial( {
				vertexColors: THREE.VertexColors
			} );
			var mesh = new THREE.Mesh( geometry, material );
			scene.add( mesh );

			var geometry = new RollerCoasterLiftersGeometry( curve, 100 );
			var material = new THREE.MeshPhongMaterial();
			var mesh = new THREE.Mesh( geometry, material );
			mesh.position.y = 0.1;
			scene.add( mesh );

			var geometry = new RollerCoasterShadowGeometry( curve, 500 );
			var material = new THREE.MeshBasicMaterial( {
				color: 0x305000, depthWrite: false, transparent: true
			} );
			var mesh = new THREE.Mesh( geometry, material );
			mesh.position.y = 0.1;
			scene.add( mesh );

			var funfairs = [];

			//

			var geometry = new THREE.CylinderBufferGeometry( 10, 10, 5, 15 );
			var material = new THREE.MeshLambertMaterial( {
				color: 0xff8080,
				//flatShading: true // Lambert does not support flat shading
			} );
			var mesh = new THREE.Mesh( geometry, material );
			mesh.position.set( - 80, 10, - 70 );
			mesh.rotation.x = Math.PI / 2;
			scene.add( mesh );

			funfairs.push( mesh );

			var geometry = new THREE.CylinderBufferGeometry( 5, 6, 4, 10 );
			var material = new THREE.MeshLambertMaterial( {
				color: 0x8080ff,
				//flatShading: true // Lambert does not support flat shading
			} );
			var mesh = new THREE.Mesh( geometry, material );
			mesh.position.set( 50, 2, 30 );
			scene.add( mesh );

			funfairs.push( mesh );

			//

			WEBVR.getVRDisplay( function ( display ) {

				renderer.vr.setDevice( display );

				document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );

			} );

			//

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

			function onWindowResize() {

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

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

			}

			//

			var position = new THREE.Vector3();
			var tangent = new THREE.Vector3();

			var lookAt = new THREE.Vector3();

			var velocity = 0;
			var progress = 0;

			var prevTime = performance.now();

			function render() {


				//console.log('video ready state', video.readyState);
				//if( video.readyState === video.HAVE_ENOUGH_DATA ){
				//  videoTexture.needsUpdate = true;
				//}

				var time = performance.now();
				var delta = time - prevTime;

				for ( var i = 0; i < funfairs.length; i ++ ) {

					funfairs[ i ].rotation.y = time * 0.0004;

				}

				//

				progress += velocity;
				progress = progress % 1;

				position.copy( curve.getPointAt( progress ) );
				position.y += 0.3;

				train.position.copy( position );

				tangent.copy( curve.getTangentAt( progress ) );

				velocity -= tangent.y * 0.0000001 * delta;
				velocity = Math.max( 0.00004, Math.min( 0.0002, velocity ) );

				train.lookAt( lookAt.copy( position ).sub( tangent ) );

				//

				renderer.render( scene, camera );

				prevTime = time;

			}

			renderer.animate( render );

		</script>

	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>three.js webvr - roller coaster</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<!-- Origin Trial Token, feature = WebVR (For Chrome M59+), origin = https://threejs.org, expires = 2017-09-03 -->
	<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M59+)" data-expires="2017-09-03" content="Aqj+6XPnxHoSxQj/CDjGXhzrVFeP12/Pgvj7rfqFqVzodYX0ZXJNHTJIvCVExQfvip+Zq9GES+SOQ/zJlpceZgcAAABNeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJWUjEuMSIsImV4cGlyeSI6MTUwNDQ2NDIwNn0=">
	<style>
	body {
	margin: 0px;
	color: #fff;
	font-family: Monospace;
	background-color: #444;
	overflow: hidden;
	}
	a {
	color: #00f;
	}
	</style>
	</head>
	<body>

	<script src="/node_modules/webvr-polyfill/build/webvr-polyfill.min.js"></script>

	<script src="../build/three.js"></script>

	<script src="js/RollerCoaster.js"></script>

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

	<script>

	WEBVR.checkAvailability().catch( function( message ) {
	document.body.appendChild( WEBVR.getMessageContainer( message ) );
	} );

	var video = document.createElement('video');
	video.width = 512;
	video.height = 256;
	video.autoplay = true;
	video.style.position = "absolute";
	video.style.zIndex = "2000";
	video.style.width = "320px";
	video.style.height = "240px";
	video.style.border = "5px solid red";

	//document.body.appendChild(video);

	try{
	var constraints = {
	video : {
	width : 320,
	height: 240
	},
	audio : true
	};
	// var constraints = {
	// video: facingMode: { exact: "environment" }
	// };
	navigator.mediaDevices.getUserMedia(constraints).then( function(stream){
	console.log('got video',stream);
	stream.onaddtrack = function(t){
	console.log('track added',t);
	}

	video.src = webkitURL.createObjectURL(stream);
	}).catch( function(error){
	alert("Failed to get a stream due to error" );
	});
	} catch(e){
	alert("Error getting user media " + e);
	}

	var videoTexture = new THREE.VideoTexture( video );
	videoTexture.minFilter = THREE.LinearFilter;
	//videoTexture.magFilter = THREE.LinearFilter;
	//videoTexture.format = THREE.RGBFormat;
	var videoMaterial = new THREE.MeshLambertMaterial({
	map : videoTexture
	});

	//

	var renderer = new THREE.WebGLRenderer( { antialias: false } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	renderer.vr.enabled = true;

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

	var light = new THREE.HemisphereLight( 0xfff0f0, 0x606066 );
	light.position.set( 1, 1, 1 );
	scene.add( light );

	var train = new THREE.Object3D();
	scene.add( train );

	var camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 500 );
	train.add( camera );

	// environment

	var geometry = new THREE.PlaneBufferGeometry( 500, 500, 15, 15 );
	geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );

	var positions = geometry.attributes.position.array;
	var vertex = new THREE.Vector3();

	for ( var i = 0; i < positions.length; i += 3 ) {

	vertex.fromArray( positions, i );

	vertex.x += Math.random() * 10 - 5;
	vertex.z += Math.random() * 10 - 5;

	var distance = ( vertex.distanceTo( scene.position ) / 5 ) - 25;
	vertex.y = Math.random() * Math.max( 0, distance );

	vertex.toArray( positions, i );

	}

	geometry.computeVertexNormals();

	var material = new THREE.MeshLambertMaterial( {
	color: 0x407000
	} );
	var material = videoMaterial;

	var mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

	var geometry = new TreesGeometry( mesh );
	var material = new THREE.MeshBasicMaterial( {
	side: THREE.DoubleSide, vertexColors: THREE.VertexColors
	} );
	var mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

	var geometry = new SkyGeometry();
	var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
	var mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

	//

	var PI2 = Math.PI * 2;

	var curve = ( function () {

	var vector = new THREE.Vector3();
	var vector2 = new THREE.Vector3();

	return {

	getPointAt: function ( t ) {

	t = t * PI2;

	var x = Math.sin( t * 3 ) * Math.cos( t * 4 ) * 50;
	var y = Math.sin( t * 10 ) * 2 + Math.cos( t * 17 ) * 2 + 5;
	var z = Math.sin( t ) * Math.sin( t * 4 ) * 50;

	return vector.set( x, y, z ).multiplyScalar( 2 );

	},

	getTangentAt: function ( t ) {

	var delta = 0.0001;
	var t1 = Math.max( 0, t - delta );
	var t2 = Math.min( 1, t + delta );

	return vector2.copy( this.getPointAt ( t2 ) )
	.sub( this.getPointAt( t1 ) ).normalize();

	}

	};

	} )();

	var geometry = new RollerCoasterGeometry( curve, 1500 );
	var material = new THREE.MeshPhongMaterial( {
	vertexColors: THREE.VertexColors
	} );
	var mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

	var geometry = new RollerCoasterLiftersGeometry( curve, 100 );
	var material = new THREE.MeshPhongMaterial();
	var mesh = new THREE.Mesh( geometry, material );
	mesh.position.y = 0.1;
	scene.add( mesh );

	var geometry = new RollerCoasterShadowGeometry( curve, 500 );
	var material = new THREE.MeshBasicMaterial( {
	color: 0x305000, depthWrite: false, transparent: true
	} );
	var mesh = new THREE.Mesh( geometry, material );
	mesh.position.y = 0.1;
	scene.add( mesh );

	var funfairs = [];

	//

	var geometry = new THREE.CylinderBufferGeometry( 10, 10, 5, 15 );
	var material = new THREE.MeshLambertMaterial( {
	color: 0xff8080,
	//flatShading: true // Lambert does not support flat shading
	} );
	var mesh = new THREE.Mesh( geometry, material );
	mesh.position.set( - 80, 10, - 70 );
	mesh.rotation.x = Math.PI / 2;
	scene.add( mesh );

	funfairs.push( mesh );

	var geometry = new THREE.CylinderBufferGeometry( 5, 6, 4, 10 );
	var material = new THREE.MeshLambertMaterial( {
	color: 0x8080ff,
	//flatShading: true // Lambert does not support flat shading
	} );
	var mesh = new THREE.Mesh( geometry, material );
	mesh.position.set( 50, 2, 30 );
	scene.add( mesh );

	funfairs.push( mesh );

	//

	WEBVR.getVRDisplay( function ( display ) {

	renderer.vr.setDevice( display );

	document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );

	} );

	//

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

	function onWindowResize() {

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

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

	}

	//

	var position = new THREE.Vector3();
	var tangent = new THREE.Vector3();

	var lookAt = new THREE.Vector3();

	var velocity = 0;
	var progress = 0;

	var prevTime = performance.now();

	function render() {


	//console.log('video ready state', video.readyState);
	//if( video.readyState === video.HAVE_ENOUGH_DATA ){
	// videoTexture.needsUpdate = true;
	//}

	var time = performance.now();
	var delta = time - prevTime;

	for ( var i = 0; i < funfairs.length; i ++ ) {

	funfairs[ i ].rotation.y = time * 0.0004;

	}

	//

	progress += velocity;
	progress = progress % 1;

	position.copy( curve.getPointAt( progress ) );
	position.y += 0.3;

	train.position.copy( position );

	tangent.copy( curve.getTangentAt( progress ) );

	velocity -= tangent.y * 0.0000001 * delta;
	velocity = Math.max( 0.00004, Math.min( 0.0002, velocity ) );

	train.lookAt( lookAt.copy( position ).sub( tangent ) );

	//

	renderer.render( scene, camera );

	prevTime = time;

	}

	renderer.animate( render );

	</script>

	</body>
	</html>