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

Got something to add? You can just leave a comment.

  • 이노메이커 이노메이커

    참 대단합니다. 이런걸 어떻게 생각하고 구현을 했는지..정말로..감탄이 절로 나오네요.

    reply edit

  • 자바스크립트의 밥그릇이 점점 커지고 있습니다 ^^

    reply edit

  • 처자 처자

    딱한가지 아쉬운점 ...
    메모리를 너무 많이 잡아먹네요.
    그것만 아니면 최고인데

    reply edit

  • 아무레도 썸네일 이미지를 별도로 들고 있는 구조가 아니어서 그런가 봅니다. 일정크기 이상이 되었을 경우 원본 이미지로 대체하는 설계로 메모리 문제를 일정부분 해결할 수도 있겠군요.

    reply edit

Your Reaction Time!

captcha

avatar