Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webxr_vr_lorenzattractor.html 4.1 KB
Newer Older
P
Add WebVR example  
paulmasson 已提交
1 2 3 
<!DOCTYPE html>
<html lang="en">
	<head>
M
Examples: Renamed webvr_* examples to webxr_vr_*  
Mr.doob 已提交
4 
		<title>three.js webxr - 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
Examples: Unified CSS.  
Mr.doob 已提交
7 
		<link type="text/css" rel="stylesheet" href="main.css">
M
WebXR: Update origin trials token.  
Mugen87 已提交
8 9 
		<!-- WebXR Device API (For Chrome M76+), expires 12/04/2019 -->
		<meta http-equiv="origin-trial" content="Aq9LklhCLNUveuCr7QTpGpqwCPG817cYHdVyQuJPOZYk47iRB390lUKa5edVmgS1pZSl8HPspElEC/91Fz55dwIAAABTeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU03NiIsImV4cGlyeSI6MTU3NTQxNzU5OX0=">
P
Add WebVR example  
paulmasson 已提交
10 11 12 
	</head>
	<body>
M
Final working version of the Polyfill  
Morgan Villedieu 已提交
13 
		<script src="js/vr/HelioWebXRPolyfill.js"></script>
P
Add WebVR example  
paulmasson 已提交
14
M
Examples: More module examples.  
Mugen87 已提交
15 
		<script type="module">
M
Examples: Added padding after script tag.  
Mr.doob 已提交
16
M
Examples: Bring namespace back.  
Mr.doob 已提交
17 
			import * as THREE from '../build/three.module.js';
M
Examples: Deprecated WebVR.js and added VRButton.js  
Mr.doob 已提交
18 
			import { VRButton } from './jsm/webxr/VRButton.js';
P
Add WebVR example  
paulmasson 已提交
19
M
Cleaned webvr_lorenzattractor example.  
Mr.doob 已提交
20 21 22 23 24 25 
			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 已提交
26
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
27 28 
			var scale = .02; // for reducing overall displayed size
			var speed = 5; // integer, increase for faster visualization
P
Add WebVR example  
paulmasson 已提交
29 30 31 32 33 

			var steps = 100000;
			var current = 1;
			var shown = 10000;
P
Reduce size and reposition  
paulmasson 已提交
34 
			var beta = 8 / 3;
P
Add WebVR example  
paulmasson 已提交
35 36 37 38 39 40 41 42 
			var rho = 28;
			var sigma = 10;

			var dt = .005;

			init();
			animate();
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
43 44 45 
			function draw() {

				var geometry = attractor.geometry;
P
Add WebVR example  
paulmasson 已提交
46 47 48 49 50 51 52 53 54 55 56 57 58 59 

				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 已提交
60 
					geometry.attributes.position.set( [ scale * x, scale * y, scale * z ], 0 );
P
Add WebVR example  
paulmasson 已提交
61
M
Cleaned webvr_lorenzattractor example.  
Mr.doob 已提交
62 63 64 
					light.color.setHSL( current / steps, 1, .5 );

					geometry.attributes.color.set( light.color.toArray(), 0 );
P
Add WebVR example  
paulmasson 已提交
65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 

				}

				if ( current < steps + shown ) {

					current ++;

				} else {

					current = 0;

				}

			}

			function init() {
M
Examples: Bring namespace back.  
Mr.doob 已提交
82 
				scene = new THREE.Scene();
P
Add WebVR example  
paulmasson 已提交
83
M
Examples: Bring namespace back.  
Mr.doob 已提交
84 
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
M
Improved initial camera in VR examples.  
Mr.doob 已提交
85 
				camera.position.set( 0, 1.6, 1 );
P
Add WebVR example  
paulmasson 已提交
86 87 88 

				//
M
Examples: Bring namespace back.  
Mr.doob 已提交
89 
				var geometry = new THREE.BufferGeometry();
P
Add WebVR example  
paulmasson 已提交
90 91 

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

				}
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
98
M
BufferGeometry: Introduce .setAttribute() and .deleteAttribute().  
Mugen87 已提交
99 
				geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
P
Add WebVR example  
paulmasson 已提交
100 101 

				var colors = new Float32Array( 3 * shown );
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
102
P
Add WebVR example  
paulmasson 已提交
103 104 105 106 107 
				for ( var i = 0; i < positions.length; i += 3 ) {

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

				}
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
108
M
BufferGeometry: Introduce .setAttribute() and .deleteAttribute().  
Mugen87 已提交
109 
				geometry.setAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
P
Add WebVR example  
paulmasson 已提交
110
M
Examples: Bring namespace back.  
Mr.doob 已提交
111 
				var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
P
Add WebVR example  
paulmasson 已提交
112
M
Examples: Bring namespace back.  
Mr.doob 已提交
113 
				attractor = new THREE.Line( geometry, material );
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
114 115 116 117 118 119 
				attractor.position.set( 0, 1.5, - 2 );
				attractor.frustumCulled = false; // critical to avoid blackouts!
				scene.add( attractor );

				//
M
Examples: Bring namespace back.  
Mr.doob 已提交
120 
				light = new THREE.PointLight( 0xffffff, 1 );
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
121 122 123 
				light.distance = 2;
				attractor.add( light );
M
Examples: Bring namespace back.  
Mr.doob 已提交
124 125 126 
				var ground = new THREE.Mesh(
					new THREE.PlaneBufferGeometry( 10, 10 ),
					new THREE.MeshPhongMaterial()
M
Improved webvr_lorenzattractor example.  
Mr.doob 已提交
127 128 129 
				);
				ground.geometry.rotateX( - 90 * Math.PI / 180 );
				scene.add( ground );
P
Add WebVR example  
paulmasson 已提交
130 131 132 

				//
M
Examples: Bring namespace back.  
Mr.doob 已提交
133 
				renderer = new THREE.WebGLRenderer( { antialias: true } );
P
Add WebVR example  
paulmasson 已提交
134 135 136 137 138 
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.vr.enabled = true;
				document.body.appendChild( renderer.domElement );
M
Examples: Deprecated WebVR.js and added VRButton.js  
Mr.doob 已提交
139 
				document.body.appendChild( VRButton.createButton( renderer ) );
P
Add WebVR example  
paulmasson 已提交
140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 

				//

				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 已提交
158 
				renderer.setAnimationLoop( render );
P
Add WebVR example  
paulmasson 已提交
159 160 161 162 163 

			}

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

				renderer.render( scene, camera );

			}

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