Improved webvr_lorenzattractor example.

examples/webvr_lorenzattractor.html

@@ -25,10 +25,10 @@
 
 		<script>
 
-			var camera, scene, renderer, x, y, z, c, geometry;
+			var camera, scene, renderer, x, y, z, c;
 
-			var scale = .015; // for reducing overall displayed size
-			var multiplier = 5; // integer, increase for faster visualization
+			var scale = .02; // for reducing overall displayed size
+			var speed = 5; // integer, increase for faster visualization
 
 			var steps = 100000;
 			var current = 1;
@@ -43,7 +43,9 @@
 			init();
 			animate();
 
-			function move() {
+			function draw() {
+
+				var geometry = attractor.geometry;
 
 				geometry.attributes.position.array.copyWithin( 3 );
 				geometry.attributes.color.array.copyWithin( 3 );
@@ -80,10 +82,8 @@
 			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 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
 
 				//
 
@@ -93,37 +93,56 @@
 
 				c = new THREE.Color();
 
-				geometry = new THREE.BufferGeometry();
+				var 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 );
+				attractor = new THREE.Line( geometry, material );
+				attractor.position.set( 0, 1.5, - 2 );
+				attractor.frustumCulled = false; // critical to avoid blackouts!
+				scene.add( attractor );
+
+				//
+
+				var light = new THREE.PointLight( 0xffffff, 1 );
+				light.color = c;
+				light.distance = 2;
+				attractor.add( light );
+
+				// scene.add( new THREE.PointLightHelper( light ))
+
+				var ground = new THREE.Mesh(
+					new THREE.PlaneBufferGeometry( 10, 10 ),
+					new THREE.MeshPhongMaterial()
+				);
+				ground.geometry.rotateX( - 90 * Math.PI / 180 );
+				scene.add( ground );
 
 				//
 
 				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 );
 
@@ -152,16 +171,11 @@
 
 			function render() {
 
-				scene.rotation.z += .001;
-
-				for ( var i = 0; i < multiplier; i ++ ) {
-
-					move();
-
-				}
+				for ( var i = 0; i < speed; i ++ ) draw();
 
-				geometry.attributes.position.needsUpdate = true;
-				geometry.attributes.color.needsUpdate = true;
+				attractor.geometry.attributes.position.needsUpdate = true;
+				attractor.geometry.attributes.color.needsUpdate = true;
+				attractor.rotation.z += .001;
 
 				renderer.render( scene, camera );