Canvas の三次元描画機能を利用して、リサジュー図形を表示し、マウスで回転操作する機能を紹介します。
x = 振幅 * sin( 振動数 * t + 位相 )
y = 振幅 * sin( 振動数 * t + 位相 )
z = 振幅 * sin( 振動数 * t + 位相 )
以下の ▶ Run ボタンを押して下さい。
マウスのドラッグ操作やタッチ操作で図形を回転させることが出来ます。
マウスに複数のボタンがあれば、移動やズームも行えます。
２本指タッチやピンチ操作でも、移動やズームが行えます。
HTML5 の WebGL を利用し、そこに三次元図形を描きます。
このプログラムは、三次元の描画に three.js を、図形の回転操作に OrthographicTrackballControls.js ライブラリを利用しています。
three.js ライブラリを利用しているため、実行する毎に Canvas 要素を追加しています。
そのため、プログラムを編集して、再実行する前に、Cls ボタンで画面消去(追加要素の削除)をして下さい。
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 i, t;
var x, y, z;
for(i=1; i<=3600; ++i) {
t = (Math.PI / 180) * i;
x = 100 * Math.sin(2*t+0);
y = 100 * Math.sin(4.1*t+Math.PI/2);
z = 100 * Math.sin(6.1*t+0.5);
geometry.vertices.push(new THREE.Vector3(x, y, z));
}
var material = new THREE.LineBasicMaterial({ color: 0x009999});
var lines = new THREE.Line(geometry, material);
scene.add(lines);
( function renderloop () {
jscrequestanimationid = requestAnimationFrame(renderloop);
controls.update();
renderer.render(scene, camera);
} )();