Rev. 2.73

Sprite3D.jsCSS 3D Transforms 속성을 이용하여 3D를 구현하는 작은 자바스크립트 3D 엔진 라이브러리입니다. 체이닝 형식의 섹시한 구문을 사용하여 HTML 요소(<div>)를 간단하게 3D 객체로 래핑할 수 있습니다. CSS 3D Transforms 속성은 태생부터가 하드웨어-엑셀레이션(hardware-acceleration)을 염두에 두어 만들어졌기 때문에 WebGL에 버금가는 성능을 보여줍니다.

다음과 같은 문법으로 3D 객체를 생성합니다.:

new Sprite3D()
	.setPosition(x,y,z)
	.setRotation(rx,ry,rz)
	.setClassName('class')
	.update();

정말 간단한 3D 메소드들:

	setPosition(x,y,z) setX(x) setY(y) setZ(z) 
	move(x,y,z) moveX(x) moveY(y) moveZ(z) 
	setRotation(x,y,z) setRotationX(x) setRotationY(y) setRotationZ(z)
	rotate(x,y,z) rotateX(x) rotateY(y) rotateZ(z)
	setScale(x,y,z) setScaleX(x) setScaleY(y) setScaleZ(z)

WebGL(OpenGL ES 2.0의 자바스크립트 바인딩) 스팩이 오징어로 보이네요 :)

재미있는 점은 모바일 브라우저에서도 하드웨어 가속이 되는 3D를 구현할 수 있게 된다는 사실입니다.(아직 모바일 브라우저에서는 WebGL이 지원되지 않고 있습니다.) WebGL이 활성화된 <canvas>요소를 필요로하지 않는다는 얘기죠. 또한, HTML 요소를 그대로 이용하기 때문에 시멘티컬한 웹 페이지를 제공할 수 있게 된다는 것입니다. 검색도 되면서 CSS로 스타일링 할 수 있는 3D 컨텐츠는 좀 매력적이지 않나요? 아래는 Sprite3D.js로 작성된 예제인 Carton Box입니다.

Sprite3D.js는 특정 자바스크립트 라이브러리에 종속적이지 않습니다. 따라서 어떠한 환경에서든지 사용할 수 있으며 MIT Licence이고 WebKit 계열(Chrome, Safari, iOS, Android 4, BlackBerry), Firefox 10 그리고 Internet Explorer 10에서 정상적으로 사용할 수 있습니다.

Comments

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

Your Reaction Time!

captcha

avatar