Permalink
Browse files

added more stuff to the v2

fixed stuff in box()
added automatic id/className handling in constructors
added interactivity to boxExample
  • Loading branch information...
1 parent 054153e commit 9913fe8e8be4b0426f89dc4d34971124ab64978e @boblemarin committed Apr 16, 2012
View
4 examples2/Sprite3D2.html
@@ -56,14 +56,14 @@
<body>
-<script src="js/Sprite3D.js" type="text/javascript" charset="utf-8"></script>
+<script src="js/Sprite3D3.js" type="text/javascript" charset="utf-8"></script>
<script>
(function(){
var stage = Sprite3D.stage();
- var d = stage.addChild(
+ var d = stage.appendChild(
new Sprite3D()
.set("id", "white")
.transformOrigin(0,0)
View
21 examples2/basicExample.html
@@ -56,17 +56,17 @@
</style>
- <script src="js/Sprite3D.js" type="text/javascript"></script>
+ <script src="js/Sprite3D3.js" type="text/javascript"></script>
<script type="text/javascript">
function init() {
- if ( false )
+ if ( true )
{
// short version
- Sprite3D.stage().addChild(
- new Sprite3D()
- .className("image")
+ Sprite3D.stage().appendChild(
+ Sprite3D.create()
+ .set("className","image")
.origin( 200, 250, 0 )
.rotationX( -20 )
.update()
@@ -106,15 +106,6 @@
</script>
</head>
<body onload="init();">
- <script type="text/javascript">
- var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
- document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
- </script>
- <script type="text/javascript">
- try {
- var pageTracker = _gat._getTracker("UA-9528692-4");
- pageTracker._trackPageview();
- } catch(err) {}</script>
- <a href="http://minimal.be/lab/Sprite3D/"><img src="img/banner.png" style="border:0;position:absolute;right:0;top:0" alt="built width Sprite3D.js" /></a>
+
</body>
</html>
View
7 examples2/basicHierarchyExample.html
@@ -131,8 +131,11 @@
);
// wait for click or touch
- container.addEventListener( "mousedown", startRotation );
- container.addEventListener( "touchstart", startRotation );
+ //container.addEventListener( "mousedown", startRotation );
+ //container.addEventListener( "touchstart", startRotation );
+
+
+ setInterval( move, 1000 / 40 );
}
function startRotation(e,s) {
View
101 examples2/boxExample.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <!--
+ Sprite3D.js example file
+ Visit the internets for documentation, updates and examples.
+ https://github.com/boblemarin/Sprite3D.js
+ http://minimal.be/lab/Sprite3D
+
+ Copyright (c) 2010 boblemarin http://www.minimal.be
+
+ Permission is hereby granted, free of charge, to any person
+ obtaining a copy of this software and associated documentation
+ files (the "Software"), to deal in the Software without
+ restriction, including without limitation the rights to use,
+ copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the
+ Software is furnished to do so, subject to the following
+ conditions:
+
+ The above copyright notice and this permission notice shall be
+ included in all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ OTHER DEALINGS IN THE SOFTWARE.
+ -->
+ <meta charset="utf-8" />
+ <meta name='HandheldFriendly' content='True' />
+ <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0' />
+ <title>Sprite3D.js - Basics - Box</title>
+
+ <style>
+
+html, body { height: 100%; }
+
+body {
+ background-color: white;
+ color: black;
+
+ margin: 0px;
+ padding: 0px;
+ overflow: hidden;
+}
+
+.box1 {
+ -webkit-transition: all .4s ease-in-out;
+}
+
+.box1 .front { background: rgba(255,0,0,0.55); }
+.box1 .back { background: rgba(0,255,0,0.55); }
+.box1 .left { background: rgba(0,0,255,0.55); }
+.box1 .right { background: rgba(255,255,0,0.55); }
+.box1 .bottom { background: rgba(255,0,255,0.55); }
+.box1 .top { background: rgba(0,255,255,0.55); }
+
+</style>
+
+ </head>
+ <body>
+ <script src="js/Sprite3D3.js" type="text/javascript"></script>
+ <script type="text/javascript">
+ (function() {
+
+ // create the main container
+ var stage = Sprite3D.stage();
+
+ // "verbose" version
+ var box = Sprite3D.box( 200, 200, 200, ".box1" );
+// box.className = "box1";
+ box.rotation( -15, 15, 0 )
+ box.update();
+ stage.appendChild(box);
+
+ // compact version
+ // var box = stage.appendChild( Sprite3D.box(200).set("className","box1").rotation(-15,15,0).update() );
+
+
+
+ // add some basic interaction (move on click)
+ box.addEventListener( "click", onBoxClick, false );
+
+ function onBoxClick(e){
+ // NOTE :
+ // In this listener function, "this" holds the reference to the box object,
+ // and "e.target" points to the cube's face that was clicked
+
+ // let's add some *relative* rotation, and it will result
+ // in a nice animation thanks to the CSS transition defined above
+ this.rotate( Math.random()*40-20, Math.random()*40-20, 0 ).update();
+ }
+ })();
+ </script>
+
+ </body>
+</html>
View
110 examples2/boxExample2.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <!--
+ Sprite3D.js example file
+ Visit the internets for documentation, updates and examples.
+ https://github.com/boblemarin/Sprite3D.js
+ http://minimal.be/lab/Sprite3D
+
+ Copyright (c) 2010 boblemarin http://www.minimal.be
+
+ Permission is hereby granted, free of charge, to any person
+ obtaining a copy of this software and associated documentation
+ files (the "Software"), to deal in the Software without
+ restriction, including without limitation the rights to use,
+ copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the
+ Software is furnished to do so, subject to the following
+ conditions:
+
+ The above copyright notice and this permission notice shall be
+ included in all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ OTHER DEALINGS IN THE SOFTWARE.
+ -->
+ <meta charset="utf-8" />
+ <meta name='HandheldFriendly' content='True' />
+ <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0' />
+ <title>Sprite3D.js - Basics - Box</title>
+
+ <style>
+
+html, body { height: 100%; }
+
+body {
+ background-color: white;
+ color: black;
+ margin: 0px;
+ padding: 0px;
+ overflow: hidden;
+}
+
+.box1 {
+ line-height: 160px;
+ text-align: center;
+ font-size: 40px;
+ font-family: Futura;
+ -webkit-transition: all .2s ease-in-out;
+}
+
+.box1 .front { background: rgba(255,0,0,0.55); }
+.box1 .back { background: rgba(0,255,0,0.55); }
+.box1 .left { background: rgba(0,0,255,0.55); }
+.box1 .right { background: rgba(255,255,0,0.55); }
+.box1 .bottom { background: rgba(255,0,255,0.55); }
+.box1 .top { background: rgba(0,255,255,0.55); }
+
+</style>
+
+ <script src="js/Sprite3D3.js" type="text/javascript"></script>
+ <script type="text/javascript">
+
+function init() {
+
+ var stage = Sprite3D.stage(),
+ rx=0,ry=0,rz=0;
+
+ var box = Sprite3D.box(
+ 200,200,200 );
+ /*Math.random()*400+50,
+ Math.random()*400+50,
+ Math.random()*400+50 );*/
+ box.className = "box1";
+ box.rotate(
+ rx+=Math.random()*7-3.5,
+ ry+=Math.random()*7-3.5,
+ 0
+ ).update();
+ stage.appendChild(box);
+
+ function addTheBox() {
+ //stage.innerHTML = "";
+ box.rotate(
+ rx+=Math.random()*7-3.5,
+ ry+=Math.random()*7-3.5,
+ 0
+ ).scale(
+ 0.25+Math.random()*4,
+ 0.25+Math.random()*4,
+ 0.25+Math.random()*4
+ ).update();
+ }
+
+ setInterval( addTheBox, 250 );
+}
+
+
+
+ </script>
+ </head>
+ <body onload="init();">
+ </body>
+</html>
View
73 examples2/creationExample.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <!--
+ Sprite3D.js example file
+ Visit the internets for documentation, updates and examples.
+ https://github.com/boblemarin/Sprite3D.js
+ http://minimal.be/lab/Sprite3D
+
+ Copyright (c) 2010 boblemarin http://www.minimal.be
+
+ Permission is hereby granted, free of charge, to any person
+ obtaining a copy of this software and associated documentation
+ files (the "Software"), to deal in the Software without
+ restriction, including without limitation the rights to use,
+ copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the
+ Software is furnished to do so, subject to the following
+ conditions:
+
+ The above copyright notice and this permission notice shall be
+ included in all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ OTHER DEALINGS IN THE SOFTWARE.
+ -->
+ <meta charset="utf-8" />
+ <meta name='HandheldFriendly' content='True' />
+ <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0' />
+ <title>Sprite3D.js - Basics - Box</title>
+
+ <style>
+
+html, body { height: 100%; }
+
+body {
+ background-color: white;
+ color: black;
+
+ margin: 0px;
+ padding: 0px;
+ overflow: hidden;
+}
+
+.image {
+ background-image: url('img/html5_logo.png');
+ width: 400px;
+ height: 500px;
+}
+
+</style>
+
+ </head>
+ <body>
+ <script src="js/Sprite3D3.js" type="text/javascript"></script>
+ <script type="text/javascript">
+ (function() {
+
+ // create the main container
+ var stage = Sprite3D.stage();
+
+ var sprite = Sprite3D.create( ".image" );
+ })();
+ </script>
+
+ </body>
+</html>
View
109 examples2/js/Sprite3D3.js
@@ -51,7 +51,7 @@ var Sprite3D = Sprite3D || {
if (element){
c = element;
s = element.style;
- if(s.position == "static" ) s.position = "relative";
+ if(s.position === "static" ) s.position = "relative";
} else {
c = document.createElement("div");
s = c.style;
@@ -70,48 +70,108 @@ var Sprite3D = Sprite3D || {
return this.create(c);
},
- /********* [PUBLIC STATIC] cube() ***********/
- box: function(width,height,depth) {
+ /********* [PUBLIC STATIC] box() ***********/
+ box: function(width,height,depth,idOrClassName) {
// init if needed
if ( !this._isInit ) this._init();
// create container element
var box = this.create();
+ if ( arguments.length === 1 ) {
+ height = width;
+ depth = width;
+ } else if ( arguments.length === 2 && typeof(arguments[1]) === "string" ) {
+ height = width;
+ depth = width;
+ this._handleStringArgument(box,arguments[1]);
+ } else if ( idOrClassName && typeof(idOrClassName) === "string" ) {
+ this._handleStringArgument(box,idOrClassName);
+ }
+
// add faces
- box.addChild( Sprite3D.create().set("className","front").position( -80, -80, 80).update() );
- box.addChild( Sprite3D.create().set("className","back").position( -80, -80, -80).rotationY(180).update() );
- box.addChild( Sprite3D.create().set("className","left").position( -160, -80, 0).rotationY(-90).update() );
- box.addChild( Sprite3D.create().set("className","right").position( 0, -80, 0).rotationY(90).update() );
- box.addChild( Sprite3D.create().set("className","top").position( -80, 0, 0).rotationX(90).update() );
- box.addChild( Sprite3D.create().set("className","bottom").position( -80, -160, 0).rotationX(-90).update() );
+ var hwidth = width*.5,
+ hheight = height*.5,
+ hdepth = depth*.5;
+
+ box.appendChild( Sprite3D.create().set("className","front").position( -hwidth, -hheight, hdepth).size(width,height).update() );
+ box.appendChild( Sprite3D.create().set("className","back").position( -hwidth, -hheight, -hdepth).size(width,height).rotationY(180).update() );
+ box.appendChild( Sprite3D.create().set("className","left").position( -hwidth-hdepth, -hheight, 0).size(depth,height).rotationY(-90).update() );
+ box.appendChild( Sprite3D.create().set("className","right").position( hwidth-hdepth, -hheight, 0).size(depth,height).rotationY(90).update() );
+ box.appendChild( Sprite3D.create().set("className","bottom").position( -hwidth, hheight-hdepth, 0).size(width,depth).rotationX(-90).update() );
+ box.appendChild( Sprite3D.create().set("className","top").position( -hwidth, -hheight-hdepth, 0).size(width,depth).rotationX(90).update() );
return box;
},
+ /********* [PRIVATE STATIC] _handleStringArgument() ***********/
+ _handleStringArgument: function( element, str ){
+ switch( str[0] ) {
+ case ".":
+ element.className = str.substr(1);
+ break;
+ case "#":
+ element.id = str.substr(1);
+ break;
+ default:
+ element.id = str;
+ break;
+ }
+ },
+
/********* [PUBLIC STATIC] create() ***********/
create: function(element){
// init Sprite3D if needed
if ( !this._isInit ) this._init();
+
// create or tweak html element
- if ( arguments.length == 0 ) {
+ if ( arguments.length === 0 ) {
element = document.createElement("div");
element.style.margin = "0px";
element.style.padding = "0px";
element.style.position = "absolute";
- } else if ( element.style.position == "static" ) element.style.position = "relative";
- //FF10 empty DIV fix
- if ( element.localName == "div" && element.innerHTML == "" ) element.innerHTML = "&nbsp;";
- else console.log("not adding content, localname == " + element.localName );
- // prepare for 3D positionning
+ } else if ( typeof(element) === "string" ) {
+ var str = element;
+ element = document.createElement("div");
+ element.style.margin = "0px";
+ element.style.padding = "0px";
+ element.style.position = "absolute";
+ this._handleStringArgument(element,str);
+ } else if ( element.style.position == "static" ) {
+ element.style.position = "relative";
+ }
element.style[ this._browserPrefix + "TransformStyle" ] = "preserve-3d";
element.style[ this._transformProperty ] = "translateZ(0px)";
- // extend element with 3D properties
+
+ //FF10 empty DIV fix
+ //if ( element.localName == "div" && element.innerHTML == "" ) element.innerHTML = "&nbsp;";
+ //else console.log("not adding content, localname == " + element.localName );
+
+ // extend element with 3D methods
for(prop in this._props) {
if (this._props.hasOwnProperty(prop)){
element[prop] = this._props[prop];
}
}
+
+ // add private properties
+ element._string = [
+ "translate3d(", 0, "px,", 0, "px,", 0, "px) ",
+ "rotateX(", 0, "deg) ",
+ "rotateY(", 0, "deg) ",
+ "rotateY(", 0, "deg) ",
+ "scale3d(", 1, ", ", 1, ", ", 1, ") "
+ ];
+ element._positions = [
+ 1, 3, 5, // x, y, z
+ 8, 11, 14, // rotationX, rotationY, rotationZ
+ 17, 19, 21 // scaleX, scaleY, scaleZ
+ ];
+ element._ox = 0;
+ element._oy = 0;
+ element._oz = 0;
+
+ // return
return element;
},
@@ -124,7 +184,7 @@ var Sprite3D = Sprite3D || {
/********* [PRIVATE STATIC] _init() ***********/
_init: function(){
var d = document.createElement("div"),
- prefixes = ["", "webkit", "Moz", "o", "ms" ],
+ prefixes = ["", "webkit", "Moz", "O", "ms" ],
n = prefixes.length, i;
Sprite3D._isInit = true;
@@ -366,13 +426,20 @@ var Sprite3D = Sprite3D || {
//////////// HTML helper function ////////////
html : function(value) {
if (arguments.length){
- this.domElement.innerHTML = value;
+ this.innerHTML = value;
return this;
}else{
- return this.domElement.innerHTML;
+ return this.innerHTML;
}
return this;
},
+
+ //////////// SIZE helper function ////////////
+ size: function(width, height){
+ this.style.width = Number(width)?width+"px":width;
+ this.style.height = Number(height)?height+"px":height;
+ return this;
+ },
//////////// Spritesheet helper functions ////////////
tileWidth: 0,
@@ -393,12 +460,11 @@ var Sprite3D = Sprite3D || {
return this;
},
-
-
//////////////////////////////////////////////////////////////////
// YOU BETTER NOT MESS WITH THE ABOVE VALUES
//
//
+ /*
_string : [
"translate3d(", 0, "px,", 0, "px,", 0, "px) ",
"rotateX(", 0, "deg) ",
@@ -414,6 +480,7 @@ var Sprite3D = Sprite3D || {
_ox : 0,
_oy : 0,
_oz : 0,
+ */
//
//
//////////////////////////////////////////////////////////////////

0 comments on commit 9913fe8

Please sign in to comment.