Rev. 2.73

3dphotogallery.gif

Gerard Ferrandez씨는 자바스크립트만으로 3D 포토 갤러리를 구현했습니다. 아래와 같은 3D 알고리즘을 사용하여 3차원 공간에 놓여있는 사진들이 마우스 움직임에 카메라 행글이 반응하고 줌인/아웃으로 사진을 조회하는 방법으로 구현되어 매우 독특한 공간감 연출을 시도하고 있습니다. 정말 멋지군요!

/* ==== 3D transform function ==== */
o.calc = function ()
{
	/* ==== ease mouseover ==== */
	this.point3D.z.move(this.point3D.z.target, .5);
	/* ==== assign 3D coords ==== */
	var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;
	var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;
	var z = this.point3D.z.position * tv.camera.zoom.position;
	/* ==== perform rotations ==== */
	var xy = tv.angle.cx * y  - tv.angle.sx * z;
	var xz = tv.angle.sx * y  + tv.angle.cx * z;
	var yz = tv.angle.cy * xz - tv.angle.sy * x;
	var yx = tv.angle.sy * xz + tv.angle.cy * x;
	/* ==== 2D transformation ==== */
	this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
	this.point2D.x = yx * this.point2D.scale;
	this.point2D.y = xy * this.point2D.scale;
	this.point2D.w = Math.round(
	                   Math.max(
	                     0,
	                     this.point2D.scale * tv.camera.zoom.position * .8
	                   )
	                 );
	/* ==== image size ratio ==== */
	if (this.ratioImage > 1)
		this.point2D.h = Math.round(this.point2D.w / this.ratioImage);
	else
	{
		this.point2D.h = this.point2D.w;
		this.point2D.w = Math.round(this.point2D.h * this.ratioImage);
	}
}

* 덧 3D 페이지 네비게이션 또한 볼만합니다.

Comments