three.jpでアニメーションを作って見みました。

コードの長さの割に、派手な画面を作ることができていいですね。

まずは、アニメーションをご覧あれ。

ポイントとなるコードはこちら。

function motion_cube(){

	var width = screen.availWidth;
	var height = screen.availHeight * 1.5;
	var cube = [];
	var cubex = [];
	var cubey = [];
	var cubez = [];
	var count = 500;
	var loop = 0;

	// scene
	var scene = new THREE.Scene();

	// mesh
	for( loop=0; loop < count; loop++ ){
		var geometry = new THREE.BoxGeometry(10, 10, 10);
		var material = new THREE.MeshLambertMaterial({color: 0xffffff})
		cube[loop] = new THREE.Mesh(geometry, material);
		cube[loop].position.set(r(500), r(500), r(500));
		scene.add(cube[loop]);
	}

	// light
	var light = new THREE.DirectionalLight(0xffffff, 1);
	light.position.set(0, 100, 30);
	scene.add(light);

	var ambient = new THREE.AmbientLight(0x333333);
	scene.add(ambient);

	// camera
	var camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
	camera.position.set(200, 200, 650);

	for( loop=0; loop < count; loop++ ){
		cubex[loop] = r(2) + 1;
		cubey[loop] = r(2) + 1;
		cubez[loop] = r(2) + 1;
	}

	// rendering
	var renderer = new THREE.WebGLRenderer();
	renderer.setSize(width, height);
	renderer.setClearColor(0xffffff, 0.8);
	console.log(renderer.domElement);
	document.getElementById('stage').appendChild(renderer.domElement);

	function render(){
		requestAnimationFrame(render);
		for( loop=0; loop < count; loop++ ){
			cube[loop].rotation.x += cubex[loop] * Math.PI / 100;
			cube[loop].rotation.y += cubey[loop] * Math.PI / 100;
			cube[loop].rotation.z += cubez[loop] * Math.PI / 100;
		}
		renderer.render(scene, camera);
	}
	render();

	function r(n){
		return Math.floor(Math.random() * (n + 1));
	}

}