More examples, elementFactory width/height

Signed-off-by: Jan Fischer <info@bitworking.de>
bitworking · Jul 9, 2014 · cab27c9 · cab27c9
1 parent 1231d04
commit cab27c9
Show file tree

Hide file tree

Showing 10 changed files with 303 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -32,6 +32,7 @@ engine.update().render();
 * Animation system
 * Use textures/uvw coordinates from obj file
 * Billboard element
+* Speed/memory optimization
 
 ### More infos
 http://css3d.bitworking.de/
diff --git a/examples/example03.html b/examples/example03.html
@@ -41,8 +41,10 @@
     }
 
     .slider {
+        /*
         width: 960px;
-        height: 300px;        
+        height: 300px; 
+        */
     }
 
     #footer {

diff --git a/examples/example04.html b/examples/example04.html
@@ -6,6 +6,10 @@
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
     <style>
+    * {
+        /*cursor: none;*/
+    }    
+
     body {        
         margin: 0;
         font-family: sans-serif;
@@ -175,7 +179,7 @@
 
         function updateScene(deltaTime)
         {          
-           engineDeltaTime = deltaTime;
+            engineDeltaTime = deltaTime;
             if (fpsUpdate == 60) {
                 document.getElementById('fps').innerHTML = 'FPS: '+ (deltaTimeCounter).toFixed(2);
                 fpsUpdate = 0;

diff --git a/examples/example06.html b/examples/example06.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <title></title>
+    <script src="../release/css3d.min.js"></script>
+
+
+    <style>
+    body {        
+        margin: 0;
+        font-family: sans-serif;
+    }
+
+    #container {
+        width: 500px;
+        height: 500px;
+        margin: auto auto;
+        margin-top: 300px;
+        position: relative;
+    }    
+
+    .cube {
+        background-color: #999;
+    }
+
+    </style>
+    </head>
+    <body>
+
+        <div id="container">
+
+        </div>
+
+        <script>
+
+        var container = document.getElementById('container');
+
+        // init engine and scene
+        var engine = new css3d(container);
+        var scene = new css3d.scene();        
+
+        var cube01 = css3d.elementFactory.cube(container, scene, 300, null, 'cube');
+
+        var cube02 = css3d.elementFactory.cube(container, scene, 200, null, 'cube');
+        cube02.setTranslation(-600, 0, 0);
+        cube02.setParent(cube01);
+
+        var cube03 = css3d.elementFactory.cube(container, scene, 100, null, 'cube');
+        cube03.setTranslation(-200, 0, 0);
+        cube03.setParent(cube02);              
+
+        // add scene to engine
+        engine.setScene(scene);
+
+        if (!engine.browserSupports3d) {
+            alert('This browser does not support CSS 3D');
+        }     
+
+        var axis = new css3d.vector3(0.2, 1, 0).normalize();
+        var angle = 0;
+
+        engine.onRender = updateScene;
+        engine.startRender();
+
+        function updateScene(deltaTime)
+        {          
+            cube01.setRotation(axis, -angle);
+            cube02.setRotation(axis, -angle*2);
+            cube03.setRotation(axis, -angle*3);
+            angle += 0.01;
+        }
+
+        </script>
+
+    </body>
+</html>
diff --git a/examples/example07.html b/examples/example07.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <title></title>
+    <script src="../release/css3d.min.js"></script>
+
+
+    <style>
+    body {        
+        margin: 0;
+        font-family: sans-serif;
+        overflow: hidden;
+    }
+
+    #container {
+        width: 500px;
+        height: 500px;
+        margin: auto auto;
+        margin-top: 300px;
+        position: relative;
+    }    
+
+    .skybox {
+        background-image: url('../textures/skybox.png');
+        position: absolute;        
+    }
+
+    .skybox.skybox-back {
+        background-position: -1024px -1024px;
+    }
+
+    .skybox.skybox-front {
+        background-position: -3072px -1024px;
+    }
+
+    .skybox.skybox-left {
+        background-position: 0px -1024px;
+    }
+
+    .skybox.skybox-right {
+        background-position: -2048px -1024px;
+    }
+
+    .skybox.skybox-top {
+        background-position: -1024px 0px;
+    }
+
+    .skybox.skybox-bottom {
+        background-position: -1024px -2048px;
+    }
+
+
+    </style>
+    </head>
+    <body>
+
+        <div id="container">
+
+        </div>
+
+        <script>
+
+        var container = document.getElementById('container');
+
+        // init engine and scene
+        var engine = new css3d(container);
+        var scene = new css3d.scene();  
+        scene.getCamera().setTranslation(0, 0, 0);
+
+        var skybox = css3d.elementFactory.skybox(container, scene, 1024, null, 'skybox');
+
+        // add scene to engine
+        engine.setScene(scene);
+
+        if (!engine.browserSupports3d) {
+            alert('This browser does not support CSS 3D');
+        }     
+
+        var axis = new css3d.vector3(0.2, 1, 0).normalize();
+        var angle = 0;
+
+        var engineDeltaTime = 0;
+
+        engine.onRender = updateScene;
+        engine.update().render();
+
+
+        function updateScene(deltaTime)
+        {          
+            engineDeltaTime = deltaTime;
+        }
+
+        /* mouse events */
+
+        var cameraRotationX = 0;
+        var cameraRotationY = 0;
+        var cameraRotationAxis = new css3d.vector3(0, -1, 0).normalize();
+
+        var lastXY = null;
+
+        document.onmousedown = function(evt)
+        {
+            lastXY = null;
+            document.addEventListener('mousemove', onMouseMove);
+            engine.startRender();
+        };
+
+        document.onmouseup = function(evt)
+        {
+            document.removeEventListener('mousemove', onMouseMove);
+            engine.stopRender();
+        };
+
+        function onMouseMove(evt)
+        {
+            var x = evt.pageX;
+            var y = evt.pageY;
+            var relX, relY;
+
+            if (null == lastXY) {
+                lastXY = [x, y];
+                return;
+            }
+
+            relX = x - lastXY[0];
+            relY = lastXY[1] - y;
+
+            cameraRotationX += (relY/100 * engineDeltaTime);
+            cameraRotationY += (relX/100 * engineDeltaTime);
+
+            scene.getCamera().setRotationXYZ(-cameraRotationX, -cameraRotationY, 0);            
+
+            lastXY = [x, y];
+
+        }
+
+        </script>
+
+    </body>
+</html>
diff --git a/release/css3d.js b/release/css3d.js
@@ -44,7 +44,7 @@ var css3d = (function(document)
         this._renderId = null;
         this._lastCalledTime = 0;
 
-        this.version = '1.0';
+        this.version = '0.9';
         this.browserSupports3d = this._init();
         this.onRender = null;        
     };
@@ -1748,26 +1748,38 @@ css3d.elementFactory = {
 
         var backDiv = document.createElement('div');
         backDiv.style.position = 'absolute';
+        backDiv.style.width = size+'px';
+        backDiv.style.height = size+'px';
         container.appendChild(backDiv);
 
         var frontDiv = document.createElement('div');
         frontDiv.style.position = 'absolute';
+        frontDiv.style.width = size+'px';
+        frontDiv.style.height = size+'px';
         container.appendChild(frontDiv);
 
         var leftDiv = document.createElement('div');
         leftDiv.style.position = 'absolute';
+        leftDiv.style.width = size+'px';
+        leftDiv.style.height = size+'px';
         container.appendChild(leftDiv);
 
         var rightDiv = document.createElement('div');
         rightDiv.style.position = 'absolute';
+        rightDiv.style.width = size+'px';
+        rightDiv.style.height = size+'px';
         container.appendChild(rightDiv);
 
         var topDiv = document.createElement('div');
         topDiv.style.position = 'absolute';
+        topDiv.style.width = size+'px';
+        topDiv.style.height = size+'px';
         container.appendChild(topDiv);
 
         var bottomDiv = document.createElement('div');
         bottomDiv.style.position = 'absolute';
+        bottomDiv.style.width = size+'px';
+        bottomDiv.style.height = size+'px';
         container.appendChild(bottomDiv);
 
         if (id) {
@@ -1876,27 +1888,39 @@ css3d.elementFactory = {
 
         var backDiv = document.createElement('div');
         backDiv.style.position = 'absolute';
+        backDiv.style.width = width+'px';
+        backDiv.style.height = height+'px';
         container.appendChild(backDiv);
 
         var frontDiv = document.createElement('div');
         frontDiv.style.position = 'absolute';
+        frontDiv.style.width = width+'px';
+        frontDiv.style.height = height+'px';
         container.appendChild(frontDiv);
 
         var leftDiv = document.createElement('div');
         leftDiv.style.position = 'absolute';
+        leftDiv.style.width = depth+'px';
+        leftDiv.style.height = height+'px';
         container.appendChild(leftDiv);
 
         var rightDiv = document.createElement('div');
         rightDiv.style.position = 'absolute';
+        rightDiv.style.width = depth+'px';
+        rightDiv.style.height = height+'px';
         container.appendChild(rightDiv);
 
         if (addTopAndBottom) {
             var topDiv = document.createElement('div');
             topDiv.style.position = 'absolute';
+            topDiv.style.width = width+'px';
+            topDiv.style.height = depth+'px';
             container.appendChild(topDiv);
 
             var bottomDiv = document.createElement('div');
             bottomDiv.style.position = 'absolute';
+            bottomDiv.style.width = width+'px';
+            bottomDiv.style.height = depth+'px';
             container.appendChild(bottomDiv);
         }
 
@@ -2242,32 +2266,44 @@ css3d.elementFactory = {
      */
     skybox : function(container, scene, size, id, className)
     {
-        var translation = size/2;
+        var translation = (size-2)/2;
 
         var elementGroup = new css3d.element();
 
         var backDiv = document.createElement('div');
         backDiv.style.position = 'absolute';
+        backDiv.style.width = size+'px';
+        backDiv.style.height = size+'px';
         container.appendChild(backDiv);
 
         var frontDiv = document.createElement('div');
         frontDiv.style.position = 'absolute';
+        frontDiv.style.width = size+'px';
+        frontDiv.style.height = size+'px';
         container.appendChild(frontDiv);
 
         var leftDiv = document.createElement('div');
         leftDiv.style.position = 'absolute';
+        leftDiv.style.width = size+'px';
+        leftDiv.style.height = size+'px';
         container.appendChild(leftDiv);
 
         var rightDiv = document.createElement('div');
         rightDiv.style.position = 'absolute';
+        rightDiv.style.width = size+'px';
+        rightDiv.style.height = size+'px';
         container.appendChild(rightDiv);
 
         var topDiv = document.createElement('div');
         topDiv.style.position = 'absolute';
+        topDiv.style.width = size+'px';
+        topDiv.style.height = size+'px';
         container.appendChild(topDiv);
 
         var bottomDiv = document.createElement('div');
         bottomDiv.style.position = 'absolute';
+        bottomDiv.style.width = size+'px';
+        bottomDiv.style.height = size+'px';
         container.appendChild(bottomDiv);
 
         if (id) {

diff --git a/release/css3d.min.js b/release/css3d.min.js