Three.js サンプルのまとめ

これまでのサンプルをまとめてみた。

円柱、Ambient color、アニメーション、ブログ埋め込みを使っている。

ソースは、こちら、

var ThreeCanvas = document.getElementById("ThreeCanvas");
var Width = ThreeCanvas.clientWidth;
var Height = ThreeCanvas.clientHeight;  
var ThreeCamera = new THREE.PerspectiveCamera( 45 , Width / Height , 1 , 10000 );
var ThreeRenderer = new THREE.WebGLRenderer({antialias: true});
var ThreeScene = new THREE.Scene();
var Distance = 3000;
function onLoad() {
    ThreeRenderer.setSize(Width, Height );
	ThreeCanvas.appendChild(ThreeRenderer.domElement);
	ThreeRenderer.setClearColorHex(0xFFFFFF, 1.0);

	var light = new THREE.PointLight(0xFFFFFF, 1.0, 0);
	light.position.set( 100, 100, 200 );
	ThreeScene.add(light);
	var ambientLight = new THREE.AmbientLight(0x888888);
	ThreeScene.add(ambientLight);

	ThreeScene.add(ThreeCamera);
	ThreeCamera.position.z = 100;
	ThreeCamera.up.x = 0;
	ThreeCamera.up.y = 0;
	ThreeCamera.up.z = 1;
 
	var col = 0xff0000;
  	var mat = new THREE.MeshLambertMaterial({ color:col, ambient:col, opacity:1.0 });
	var cyl = createCylinder(0,0,100,10, 100,100,0,10, col, false); 
	ThreeScene.add(cyl);
	cyl = createCylinder(0,0,100,10, -100,100,0,10, col, false); 
	ThreeScene.add(cyl);
	cyl = createCylinder(0,0,100,10, 100,-100,0,10, col, false); 
	ThreeScene.add(cyl);
	cyl = createCylinder(0,0,100,10, -100,-100,0,10, col, false); 
	ThreeScene.add(cyl);
	cyl = createCylinder(100,100,0,10, -100,100,0,10, col, false); 
	ThreeScene.add(cyl);
	cyl = createCylinder(100,100,0,10, 100,-100,0,10, col, false); 
	ThreeScene.add(cyl);
	cyl = createCylinder(100,-100,0,10, -100,-100,0,10, col, false); 
	ThreeScene.add(cyl);
	cyl = createCylinder(-100,100,0,10, -100,-100,0,10, col, false); 
	ThreeScene.add(cyl);
	window.requestAnimationFrame(loop);
}
function loop() {
	Distance -= 5;
	ThreeCamera.position.x = Distance;
	ThreeCamera.position.z = 0.1*Distance;
	ThreeCamera.lookAt( {x:0, y:0, z:85 } );

	ThreeRenderer.clear();
	ThreeRenderer.render(ThreeScene, ThreeCamera);
	window.requestAnimationFrame(loop);
}
function createCylinder(x0,y0,z0,r0, x1,y1,z1,r1, col, open)
{
    var v = new THREE.Vector3(x0-x1, y0-y1, z0-z1);
	var len = v.length();
	var material = new THREE.MeshLambertMaterial({ color:col, ambient:col, opacity:1.0 });
	var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(r0, r1, len, 0, 0, open), material);
	cylinder.overdraw = true;

	if (len > 0.001) {
		cylinder.rotation.z = Math.acos(v.y/len);
		cylinder.rotation.y = 0.5*Math.PI + Math.atan2(v.x, v.z);
		cylinder.eulerOrder = 'YZX';
	}
    
	cylinder.position.x = (x1+x0)/2;
	cylinder.position.y = (y1+y0)/2;
	cylinder.position.z = (z1+z0)/2;
    
	return cylinder;
}
onLoad();