dx/dt = -px + py
dy/dt = rx - y - xz
dz/dt = xy - bz
以下の ▶ Run ボタンを押して下さい。
マウスのドラッグ操作やタッチ操作で図形を回転させることが出来ます。
マウスに複数のボタンがあれば、移動やズームも行えます。
２本指タッチやピンチ操作でも、移動やズームが行えます。
HTML5 の WebGL を利用し、そこに三次元図形を描きます。
このプログラムは、三次元の描画に three.js を、図形の回転操作に OrthographicTrackballControls.js ライブラリを利用しています。
three.js ライブラリを利用しているため、実行する毎に Canvas 要素を追加しています。
そのため、プログラムを編集して、再実行する前に、Cls ボタンで画面消去(追加 DOM 要素の削除)して下さい。
var scene = new THREE.Scene();
var width = 640 / 2;
var height = 400 / 2;
var depth = 500;
var camera = new THREE.OrthographicCamera(-width, width, -height, height, -depth, depth);
camera.position.set(0, 0, 50);
var jscreen = document.getElementById('jscscreen');
var controls = new THREE.OrthographicTrackballControls(camera, jscreen);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(2*width, 2*height);
var threed = document.getElementById('jscthreed');
threed.appendChild(renderer.domElement);
var geometry = new THREE.Geometry();
var x = 1;
var y = 1;
var z = 1;
var dx, dy, dz;
for (var i = 0; i < 3000; ++ i) {
dx = -10.0 * x + 10.0 * y;
dy = 28.0 * x - y - x * z;
dz = x * y - 8.0 / 3.0 * z;
x += 0.01 * dx;
y += 0.01 * dy;
z += 0.01 * dz;
geometry.vertices.push(new THREE.Vector3(8 * x, 8 * y, 8 * z));
}
var material = new THREE.LineBasicMaterial({color:0x009999});
line = new THREE.Line(geometry, material);
scene.add( line );
( function renderloop () {
jscrequestanimationid = requestAnimationFrame(renderloop);
controls.update();
renderer.render(scene, camera);
} )();