Sprite3D.js 高性能的跨终端JS 3D框架,但这个框架的资料还不是很多,最近有个项目要在平板上做一个3D展示,找了好多,在iPad上的效果都不好。直到找到这个框架。

这个框架是在 MIT许可证下发布的,不需要依赖其他库,当然也就很方便的和任何一个前端框架集成。

支持WebKit (Chrome, Safari, iOS, Android 4, BlackBerry) 和Firefox 10、Internet Explorer 10 ,他没有使用canvas、webgl,而是使用CSS3来控制DIV,并使用硬件加速。所以性能更好。

  • AS3-style properties :
    	x, y, z
    	rotationX, rotationY, rotationZ
    	scaleX, scaleY, scaleZ
    	width, height
    	alpha
  • Lots of accessor methods :
    	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)
  • AS3-style scenography via the addChild() and removeChild() method, children inheriting of their parent's transformations
  • JS-style method chaining :
    new Sprite3D()
    	.setPosition(x,y,z)
    	.setRotation(rx,ry,rz)
    	.setClassName('class')
    	.update();
  • Basic support for sprite sheets. At this point, all the tiles must have the same size (for one Sprite).
    /* CSS : */
    .spriteClass {
    	background: url("img/sheet.png");
    	width: 32px;
    	height: 64px;
    }
    
    /* JS : */
    // one-time set-up :
    mySprite.setClassName("spriteClass").setTileSize( 32, 64 );
    // then, later :
    mySprite.setTilePosition( 0, 3 );
    
  • Easily manipulate the underlying DOM elements with the domElement and style properties. There's also a bunch of helper methods like setClassName, getClassName, addClassName, removeClassName, setId, getId, setCSS, getCSS and setInnerHTML that let you keep your CSS workflow
  • Check for browser support using the Sprite3D.isSupported() method

具体的我也翻译不来,各位亲们参考着看看就行啦。大家可以去官方网站看看:http://minimal.be/lab/Sprite3D/

下载地址:https://github.com/boblemarin/Sprite3D.js/archive/master.zip

DEMO:

\

http://www.bojinxiaozhu.com/uploadfile/file/sprite3d/

DEMO 二维码访问:

\

DEMO下载