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
  • 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()
  • 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






DEMO 二维码访问: