|
|
@@ -0,0 +1,172 @@
|
|
|
+<!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>
|
Mr.doob