three.jsで描くローレンツアトラクタ

README

Lorenz system in javascript with three.js

練習がてらローレンツアトラクタをthree.jsを用いて書いてみた

jsdoit.css

body {
background-color: #151515;
margin: 0px;
overflow: visible;
}
#container {
  text-align:center;
  color:white;
}
#container a {
  color:orange;
}

jsdoit.html

<script src="http://jsrun.it/assets/c/2/3/N/c23NM"></script>
<script src="http://jsrun.it/assets/v/r/x/V/vrxVQ"></script>
<script src="http://jsrun.it/assets/j/9/C/G/j9CGI"></script>


<div id="container">
<a href="http://nyango.bitbucket.org/">home</a><br>
<a href="https://github.com/jamejammy/ParticleTest/tree/gh-pages">source</a><br>
It is a Lorenz system on webgl with three.js.
</div>

jsdoit.js

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var container, stats;

var camera, scene, renderer;

var mesh;

init();
animate();

function init() {

	container = document.getElementById( 'container' );

	//

	camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 5, 3500 );
	camera.position.z = 2250;

	scene = new THREE.Scene();
	scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );

	//

	var particles = 500000;

	var geometry = new THREE.BufferGeometry();

	geometry.addAttribute( 'position', Float32Array, particles, 3 );
	geometry.addAttribute( 'color', Float32Array, particles, 3 );

	var positions = geometry.attributes.position.array;
	var colors = geometry.attributes.color.array;

	var color = new THREE.Color();

	var n = 1000, n2 = n / 2; // particles spread in the cube
	var X,Y,Z;
	X=Math.random();
	Y=Math.random();
	Z=Math.random();
	var p,r,b;
	p=10;r=28;b=8/3.0;
	for ( var i = 0; i < positions.length; i += 3 ) {

		// positions

		var dx = -p*X+p*Y;
		var dy = -X*Z+r*X-Y;
		var dz = X*Y-b*Z;

		var x = X + 0.001*dx;
		var y = Y + 0.001*dy;
		var z = Z + 0.001*dz;
		
		positions[ i ]     = x*n/35 -n2;
		positions[ i + 1 ] = y*n/35 -n2;
		positions[ i + 2 ] = z*n/35 -n2;

		// colors

		var vx =  Math.sin(i/1000.0)*0.5 + 0.6 ;
		var vy =  Math.sin(i/2000.0)*0.5 + 0.6 ;
		var vz =  Math.sin(i/3000.0)*0.5 + 0.6 ;

		color.setRGB( vx, vy, vz );

		colors[ i ]     = color.r;
		colors[ i + 1 ] = color.g;
		colors[ i + 2 ] = color.b;
		X=x;Y=y;Z=z;
	}

	geometry.computeBoundingSphere();

	//

	var material = new THREE.ParticleSystemMaterial( { size: 15, vertexColors: true } );

	particleSystem = new THREE.ParticleSystem( geometry, material );
	scene.add( particleSystem );

	//

	renderer = new THREE.WebGLRenderer( { antialias: false, alpha: false } );
	renderer.setClearColor( scene.fog.color, 1 );
	renderer.setSize( window.innerWidth, window.innerHeight );

	container.appendChild( renderer.domElement );

	//

	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '0px';
	container.appendChild( stats.domElement );

	//

	window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

	windowHalfX = window.innerWidth / 2;
	windowHalfY = window.innerHeight / 2;

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

}

//

var mousedown = false;
renderer.domElement.addEventListener('mousedown', function(e){
  mousedown = true;
  prevPosition = {x: e.pageX, y: e.pageY};
}, false);

renderer.domElement.addEventListener('mousemove', function(e){
  if(!mousedown) return;
  moveDistance = {x: prevPosition.x - e.pageX, y: prevPosition.y - e.pageY};
  particleSystem.rotation.x += moveDistance.y * 0.03;
  particleSystem.rotation.y -= moveDistance.x * 0.03;

  prevPosition = {x: e.pageX, y: e.pageY};
  render();
}, false);

renderer.domElement.addEventListener('mouseup', function(e){
  mousedown = false;
}, false);

function animate() {

	requestAnimationFrame( animate );

	render();
	stats.update();

}

function render() {

	var time = Date.now() * 0.001;

	particleSystem.rotation.z = time * 0.3;
	particleSystem.rotation.x += 0.00001 * 0.3;

	renderer.render( scene, camera );

}