Merge pull request #14154 from paulmasson/webvr

Proposed WebVR example

Merge pull request #14154 from paulmasson/webvr
Proposed WebVR example
610d0853 · Mr.doob · GitHub · c6617579 · c9a4cd8e · 610d0853
隐藏空白更改
内联并排

Showing with 172 addition and 0 deletion

examples/webvr_lorenz_attractor.html examples/webvr_lorenz_attractor.html +172 -0

未找到文件。
--- a/examples/webvr_lorenz_attractor.html
+++ b/examples/webvr_lorenz_attractor.html
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webvr - Lorenz attractor</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 M62+), origin = https://threejs.org, expires = 2018-06-19 -->
+		<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M62+)" data-expires="2018-06-19" content="Alxt96tYGgIr9l6EXU0eeI360zcmzOY6Kuo3kcTfBGIRDOQbgFIZKRQ1joExQ74WZr1einsE+cUMHgSclNHCQQ4AAABQeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJWUjEuMU02MiIsImV4cGlyeSI6MTUyOTM5NzgyOH0=">
+		<!-- Origin Trial Token, feature = WebXR Device API, origin = https://threejs.org, expires = 2018-06-15 -->
+		<meta http-equiv="origin-trial" data-feature="WebXR Device API" data-expires="2018-06-15" content="AtJH9g6nn0B87bnjJt+9m1joZXEYDmLSlRvtMr5qJD52hMcm3S86S7jg5I7y2I5cgQglE0rzsXzti5DECQLb8QkAAABQeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZSIsImV4cGlyeSI6MTUyOTA4NDY2OH0=">
+		<!-- Origin Trial Token, feature = WebXR Gamepad Support, origin = https://threejs.org, expires = 2018-06-15 -->
+		<meta http-equiv="origin-trial" data-feature="WebXR Gamepad Support" data-expires="2018-06-15" content="Aihhr0yXkVlCKF0DIpTbH8WX7ZmEexUhI/95+t8aoLfvBkePMiZ/iOoDPU3xefyfuczkDahH1L6eiPvRsuzITAAAAABYeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkdhbWVwYWRTdXBwb3J0IiwiZXhwaXJ5IjoxNTI5MDg0NjY4fQ==">
+		<style>
+			body {
+				margin: 0px;
+				overflow: hidden;
+			}
+		</style>
+	</head>
+	<body>
+
+		<script src="../build/three.js"></script>
+
+		<script src="js/vr/WebVR.js"></script>
+
+		<script>
+
+			var camera, scene, renderer, x, y, z, c, geometry;
+
+			var scale = .015; // for reducing overall displayed size
+			var multiplier = 5; // integer, increase for faster visualization
+
+			var steps = 100000;
+			var current = 1;
+			var shown = 10000;
+
+			var beta = 8 / 3;
+			var rho = 28;
+			var sigma = 10;
+
+			var dt = .005;
+
+			init();
+			animate();
+
+			function move() {
+
+				geometry.attributes.position.array.copyWithin( 3 );
+				geometry.attributes.color.array.copyWithin( 3 );
+
+				if ( current < steps ) {
+
+					var dx = sigma * ( y - x ) * dt;
+					var dy = ( x * ( rho - z ) - y ) * dt;
+					var dz = ( x * y - beta * z ) * dt;
+
+					x += dx;
+					y += dy;
+					z += dz;
+
+					geometry.attributes.position.set( [ scale * x, scale * y, scale * z ], 0 );
+
+					c.setHSL( current / steps, 1, .5 );
+					geometry.attributes.color.set( [ c.r, c.g, c.b ], 0 );
+
+				}
+
+				if ( current < steps + shown ) {
+
+					current ++;
+
+				} else {
+
+					current = 0;
+
+				}
+
+			}
+
+			function init() {
+
+				scene = new THREE.Scene();
+				scene.position.set( 0, 1.5, - 1 );
+
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 2 );
+				camera.lookAt( 0, 1.5, - 1 );
+
+				//
+
+				x = 15 * Math.random();
+				y = 15 * Math.random();
+				z = 15 * Math.random();
+
+				c = new THREE.Color();
+
+				geometry = new THREE.BufferGeometry();
+
+				var positions = new Float32Array( 3 * shown );
+				for ( var i = 0; i < positions.length; i += 3 ) {
+
+					positions.set( [ scale * x, scale * y, scale * z ], i );
+
+				}
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+
+				var colors = new Float32Array( 3 * shown );
+				for ( var i = 0; i < positions.length; i += 3 ) {
+
+					colors.set( [ 1, 0, 0 ], i );
+
+				}
+				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
+
+				var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
+
+				var line = new THREE.Line( geometry, material );
+				line.frustumCulled = false; // critical to avoid blackouts!
+				scene.add( line );
+
+				//
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.autoClear = false;
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.shadowMap.enabled = true;
+				renderer.vr.enabled = true;
+				document.body.appendChild( renderer.domElement );
+
+				document.body.appendChild( WEBVR.createButton( renderer ) );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				renderer.animate( render );
+
+			}
+
+			function render() {
+
+				scene.rotation.z += .001;
+
+				for ( var i = 0; i < multiplier; i ++ ) {
+
+					move();
+
+				}
+
+				geometry.attributes.position.needsUpdate = true;
+				geometry.attributes.color.needsUpdate = true;
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+	</body>
+</html>