webvr_rollercoaster.html 5.8 KB
Newer Older
M
r75  
Mr.doob 已提交
1 2 3
<!DOCTYPE html>
<html lang="en">
	<head>
M
r76  
Mr.doob 已提交
4
		<title>three.js webvr - roller coaster</title>
M
r75  
Mr.doob 已提交
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<style>
			body {
				margin: 0px;
				color: #fff;
				font-family: Monospace;
				background-color: #444;
				overflow: hidden;
			}
			a {
				color: #00f;
			}
		</style>
	</head>
	<body>

M
r76  
Mr.doob 已提交
22
		<script src="../build/three.js"></script>
M
r75  
Mr.doob 已提交
23 24 25

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

M
r82  
Mr.doob 已提交
26
		<script src="js/vr/WebVR.js"></script>
M
r75  
Mr.doob 已提交
27 28 29 30 31 32

		<script>

			var renderer = new THREE.WebGLRenderer( { antialias: true } );
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
M
r88  
Mr.doob 已提交
33
			renderer.vr.enabled = true;
M
r75  
Mr.doob 已提交
34 35
			document.body.appendChild( renderer.domElement );

M
r94  
Mr.doob 已提交
36
			document.body.appendChild( WEBVR.createButton( renderer, { frameOfReferenceType: 'eye-level' } ) );
M
r88  
Mr.doob 已提交
37 38

			//
M
r86  
Mr.doob 已提交
39

M
r75  
Mr.doob 已提交
40
			var scene = new THREE.Scene();
M
r87  
Mr.doob 已提交
41
			scene.background = new THREE.Color( 0xf0f0ff );
M
r75  
Mr.doob 已提交
42 43 44 45 46 47 48 49

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

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

M
r85  
Mr.doob 已提交
50
			var camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 500 );
M
r75  
Mr.doob 已提交
51 52 53 54
			train.add( camera );

			// environment

M
r85  
Mr.doob 已提交
55
			var geometry = new THREE.PlaneBufferGeometry( 500, 500, 15, 15 );
M
r89  
Mr.doob 已提交
56
			geometry.rotateX( - Math.PI / 2 );
M
r75  
Mr.doob 已提交
57

M
r85  
Mr.doob 已提交
58 59
			var positions = geometry.attributes.position.array;
			var vertex = new THREE.Vector3();
M
r75  
Mr.doob 已提交
60

M
r85  
Mr.doob 已提交
61
			for ( var i = 0; i < positions.length; i += 3 ) {
M
r75  
Mr.doob 已提交
62

M
r85  
Mr.doob 已提交
63
				vertex.fromArray( positions, i );
M
r75  
Mr.doob 已提交
64

M
r85  
Mr.doob 已提交
65 66
				vertex.x += Math.random() * 10 - 5;
				vertex.z += Math.random() * 10 - 5;
M
r75  
Mr.doob 已提交
67

M
r85  
Mr.doob 已提交
68
				var distance = ( vertex.distanceTo( scene.position ) / 5 ) - 25;
M
r75  
Mr.doob 已提交
69 70
				vertex.y = Math.random() * Math.max( 0, distance );

M
r85  
Mr.doob 已提交
71 72
				vertex.toArray( positions, i );

M
r75  
Mr.doob 已提交
73 74
			}

M
r85  
Mr.doob 已提交
75 76 77 78 79
			geometry.computeVertexNormals();

			var material = new THREE.MeshLambertMaterial( {
				color: 0x407000
			} );
M
r75  
Mr.doob 已提交
80 81 82 83 84

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

			var geometry = new TreesGeometry( mesh );
M
r85  
Mr.doob 已提交
85 86 87
			var material = new THREE.MeshBasicMaterial( {
				side: THREE.DoubleSide, vertexColors: THREE.VertexColors
			} );
M
r75  
Mr.doob 已提交
88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
			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 ) {

M
r85  
Mr.doob 已提交
109
						t = t * PI2;
M
r75  
Mr.doob 已提交
110

M
r85  
Mr.doob 已提交
111 112 113
						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;
M
r75  
Mr.doob 已提交
114

M
r85  
Mr.doob 已提交
115
						return vector.set( x, y, z ).multiplyScalar( 2 );
M
r75  
Mr.doob 已提交
116 117 118 119 120 121 122 123 124

					},

					getTangentAt: function ( t ) {

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

M
r98  
Mr.doob 已提交
125
						return vector2.copy( this.getPointAt( t2 ) )
M
r85  
Mr.doob 已提交
126
							.sub( this.getPointAt( t1 ) ).normalize();
M
r75  
Mr.doob 已提交
127 128 129 130 131 132 133 134

					}

				};

			} )();

			var geometry = new RollerCoasterGeometry( curve, 1500 );
M
r85  
Mr.doob 已提交
135
			var material = new THREE.MeshPhongMaterial( {
M
r75  
Mr.doob 已提交
136 137 138 139 140 141
				vertexColors: THREE.VertexColors
			} );
			var mesh = new THREE.Mesh( geometry, material );
			scene.add( mesh );

			var geometry = new RollerCoasterLiftersGeometry( curve, 100 );
M
r85  
Mr.doob 已提交
142
			var material = new THREE.MeshPhongMaterial();
M
r75  
Mr.doob 已提交
143
			var mesh = new THREE.Mesh( geometry, material );
M
r85  
Mr.doob 已提交
144
			mesh.position.y = 0.1;
M
r75  
Mr.doob 已提交
145 146 147
			scene.add( mesh );

			var geometry = new RollerCoasterShadowGeometry( curve, 500 );
M
r85  
Mr.doob 已提交
148 149 150
			var material = new THREE.MeshBasicMaterial( {
				color: 0x305000, depthWrite: false, transparent: true
			} );
M
r75  
Mr.doob 已提交
151
			var mesh = new THREE.Mesh( geometry, material );
M
r85  
Mr.doob 已提交
152
			mesh.position.y = 0.1;
M
r75  
Mr.doob 已提交
153 154 155 156 157 158
			scene.add( mesh );

			var funfairs = [];

			//

M
r85  
Mr.doob 已提交
159 160
			var geometry = new THREE.CylinderBufferGeometry( 10, 10, 5, 15 );
			var material = new THREE.MeshLambertMaterial( {
M
r87  
Mr.doob 已提交
161 162
				color: 0xff8080,
				//flatShading: true // Lambert does not support flat shading
M
r85  
Mr.doob 已提交
163
			} );
M
r75  
Mr.doob 已提交
164
			var mesh = new THREE.Mesh( geometry, material );
M
r85  
Mr.doob 已提交
165
			mesh.position.set( - 80, 10, - 70 );
M
r75  
Mr.doob 已提交
166 167 168 169 170
			mesh.rotation.x = Math.PI / 2;
			scene.add( mesh );

			funfairs.push( mesh );

M
r85  
Mr.doob 已提交
171 172
			var geometry = new THREE.CylinderBufferGeometry( 5, 6, 4, 10 );
			var material = new THREE.MeshLambertMaterial( {
M
r87  
Mr.doob 已提交
173 174
				color: 0x8080ff,
				//flatShading: true // Lambert does not support flat shading
M
r85  
Mr.doob 已提交
175
			} );
M
r75  
Mr.doob 已提交
176
			var mesh = new THREE.Mesh( geometry, material );
M
r85  
Mr.doob 已提交
177
			mesh.position.set( 50, 2, 30 );
M
r75  
Mr.doob 已提交
178 179 180 181 182 183
			scene.add( mesh );

			funfairs.push( mesh );

			//

M
r86  
Mr.doob 已提交
184 185 186
			window.addEventListener( 'resize', onWindowResize, false );

			function onWindowResize() {
M
r75  
Mr.doob 已提交
187 188 189 190

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

M
r86  
Mr.doob 已提交
191
				renderer.setSize( window.innerWidth, window.innerHeight );
M
r75  
Mr.doob 已提交
192

M
r86  
Mr.doob 已提交
193
			}
M
r75  
Mr.doob 已提交
194 195 196 197 198 199 200 201 202 203 204

			//

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

			var lookAt = new THREE.Vector3();

			var velocity = 0;
			var progress = 0;

M
r85  
Mr.doob 已提交
205
			var prevTime = performance.now();
M
r79  
Mr.doob 已提交
206

M
r86  
Mr.doob 已提交
207
			function render() {
M
r79  
Mr.doob 已提交
208

M
r86  
Mr.doob 已提交
209
				var time = performance.now();
M
r85  
Mr.doob 已提交
210
				var delta = time - prevTime;
M
r75  
Mr.doob 已提交
211 212 213

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

M
r85  
Mr.doob 已提交
214
					funfairs[ i ].rotation.y = time * 0.0004;
M
r75  
Mr.doob 已提交
215 216 217 218 219

				}

				//

M
r85  
Mr.doob 已提交
220
				progress += velocity;
M
r75  
Mr.doob 已提交
221 222 223
				progress = progress % 1;

				position.copy( curve.getPointAt( progress ) );
M
r85  
Mr.doob 已提交
224
				position.y += 0.3;
M
r75  
Mr.doob 已提交
225 226 227 228 229

				train.position.copy( position );

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

M
r85  
Mr.doob 已提交
230 231
				velocity -= tangent.y * 0.0000001 * delta;
				velocity = Math.max( 0.00004, Math.min( 0.0002, velocity ) );
M
r75  
Mr.doob 已提交
232

M
Mr.doob 已提交
233
				train.lookAt( lookAt.copy( position ).sub( tangent ) );
M
r75  
Mr.doob 已提交
234 235 236

				//

M
r86  
Mr.doob 已提交
237
				renderer.render( scene, camera );
M
r75  
Mr.doob 已提交
238

M
r85  
Mr.doob 已提交
239 240
				prevTime = time;

M
r83  
Mr.doob 已提交
241
			}
M
r75  
Mr.doob 已提交
242

M
r93  
Mr.doob 已提交
243
			renderer.setAnimationLoop( render );
M
r75  
Mr.doob 已提交
244 245 246 247 248

		</script>

	</body>
</html>