Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webvr_lorenzattractor.html 4.6 KB
Newer Older
P
Add WebVR example  
paulmasson 已提交
1 2 3 
<!DOCTYPE html>
<html lang="en">
	<head>
M
WebVR examples clean up.  
Mr.doob 已提交
4 
		<title>three.js webvr - lorenz attractor</title>
P
Add WebVR example  
paulmasson 已提交
5 6 
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
M
WebXR: Updated tokens  
Mugen87 已提交
7 8 9 10 
		<!-- Origin Trial Token, feature = WebXR Device API (For Chrome M69+), origin = https://threejs.org, expires = 2019-01-23 -->
		<meta http-equiv="origin-trial" data-feature="WebXR Device API (For Chrome M69+)" data-expires="2019-01-23" content="ApibcCZfaeEIkwpe6CSIKZXC8ODly5nYX+QlUSgwhUUlMN1/Ko7dr5XUwZDFl9SiEGtOFFe2csLwnNg33ZBh+QMAAABTeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU02OSIsImV4cGlyeSI6MTU0ODIwMTU5OX0=">
		<!-- Origin Trial Token, feature = WebXR Gamepad Support, origin = https://threejs.org, expires = 2019-01-23 -->
		<meta http-equiv="origin-trial" data-feature="WebXR Gamepad Support" data-expires="2019-01-23" content="Agt5pp1xG96NMH+7RdcD7jvbkJiJTagqfKtC+28x/TBeQSh4tF7ad7uXL9Clqbts0vivamPTTkRkNdyfJtEezQ4AAABYeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkdhbWVwYWRTdXBwb3J0IiwiZXhwaXJ5IjoxNTQ4MjAxNTk5fQ==">
P
Add WebVR example  
paulmasson 已提交
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 
		<style>
			body {
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>

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

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

		<script>
M
Cleaned webvr_lorenzattractor example.  
Mr.doob 已提交
26 27 28 29 30 31 
			var camera, scene, renderer;
			var attractor, light;

			var x = 15 * Math.random();
			var y = 15 * Math.random();
			var z = 15 * Math.random();
P
Add WebVR example  
paulmasson 已提交
32
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
33 34 
			var scale = .02; // for reducing overall displayed size
			var speed = 5; // integer, increase for faster visualization
P
Add WebVR example  
paulmasson 已提交
35 36 37 38 39 

			var steps = 100000;
			var current = 1;
			var shown = 10000;
P
Reduce size and reposition  
paulmasson 已提交
40 
			var beta = 8 / 3;
P
Add WebVR example  
paulmasson 已提交
41 42 43 44 45 46 47 48 
			var rho = 28;
			var sigma = 10;

			var dt = .005;

			init();
			animate();
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
49 50 51 
			function draw() {

				var geometry = attractor.geometry;
P
Add WebVR example  
paulmasson 已提交
52 53 54 55 56 57 58 59 60 61 62 63 64 65 

				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;
P
Reduce size and reposition  
paulmasson 已提交
66 
					geometry.attributes.position.set( [ scale * x, scale * y, scale * z ], 0 );
P
Add WebVR example  
paulmasson 已提交
67
M
Cleaned webvr_lorenzattractor example.  
Mr.doob 已提交
68 69 70 
					light.color.setHSL( current / steps, 1, .5 );

					geometry.attributes.color.set( light.color.toArray(), 0 );
P
Add WebVR example  
paulmasson 已提交
71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 

				}

				if ( current < steps + shown ) {

					current ++;

				} else {

					current = 0;

				}

			}

			function init() {

				scene = new THREE.Scene();
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
90 
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
P
Add WebVR example  
paulmasson 已提交
91 92 93 

				//
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
94 
				var geometry = new THREE.BufferGeometry();
P
Add WebVR example  
paulmasson 已提交
95 96 

				var positions = new Float32Array( 3 * shown );
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
97
P
Add WebVR example  
paulmasson 已提交
98 99 
				for ( var i = 0; i < positions.length; i += 3 ) {
P
Reduce size and reposition  
paulmasson 已提交
100 
					positions.set( [ scale * x, scale * y, scale * z ], i );
P
Add WebVR example  
paulmasson 已提交
101 102 

				}
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
103
P
Add WebVR example  
paulmasson 已提交
104 105 106 
				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

				var colors = new Float32Array( 3 * shown );
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
107
P
Add WebVR example  
paulmasson 已提交
108 109 110 111 112 
				for ( var i = 0; i < positions.length; i += 3 ) {

					colors.set( [ 1, 0, 0 ], i );

				}
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
113
P
Add WebVR example  
paulmasson 已提交
114 115 116 117 
				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );

				var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
118 119 120 121 122 123 124 
				attractor = new THREE.Line( geometry, material );
				attractor.position.set( 0, 1.5, - 2 );
				attractor.frustumCulled = false; // critical to avoid blackouts!
				scene.add( attractor );

				//
M
Cleaned webvr_lorenzattractor example.  
Mr.doob 已提交
125 
				light = new THREE.PointLight( 0xffffff, 1 );
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
126 127 128 129 130 131 132 133 134 
				light.distance = 2;
				attractor.add( light );

				var ground = new THREE.Mesh(
					new THREE.PlaneBufferGeometry( 10, 10 ),
					new THREE.MeshPhongMaterial()
				);
				ground.geometry.rotateX( - 90 * Math.PI / 180 );
				scene.add( ground );
P
Add WebVR example  
paulmasson 已提交
135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 

				//

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				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() {
P
Update animation  
Paul Masson 已提交
163 
				renderer.setAnimationLoop( render );
P
Add WebVR example  
paulmasson 已提交
164 165 166 167 168 

			}

			function render() {
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
169 
				for ( var i = 0; i < speed; i ++ ) draw();
P
Add WebVR example  
paulmasson 已提交
170
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
171 172 173 
				attractor.geometry.attributes.position.needsUpdate = true;
				attractor.geometry.attributes.color.needsUpdate = true;
				attractor.rotation.z += .001;
P
Add WebVR example  
paulmasson 已提交
174 175 176 177 178 179 180 181 

				renderer.render( scene, camera );

			}

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