Added orthographic and perspective camera (working)

minecraftcodex/studio/static/coffee/studio.coffee

@@ -9,6 +9,8 @@ Studio =
 
     camera: null
 
+    animating: false
+
     lights: []
     _lights: {}
     
@@ -19,6 +21,29 @@ Studio =
     checkWebGLsupport: ->
         return !!window.WebGLRenderingContext;
 
+    # ChangeCamera
+    onCameraChange: (cameraType) ->
+        if "#{cameraType}Camera" of StudioObjects
+            @camera = StudioObjects["#{cameraType}Camera"].init @width, @height
+            if not @animating
+                @animate()
+
+    # Animation
+    animate: ->
+        if @scene and @camera
+            @renderer.render @scene, @camera
+
+            requestAnimationFrame =>
+                @animate()
+
+    setSize: (width, height) ->
+        @width = parseInt width
+        @height = parseInt height
+
+        @renderer.setSize @width, @height
+        @domElement.style.width = "#{@width}px"
+        @domElement.style.height = "#{@height}px"
+
     init: (dom, width, height) ->
         if not @checkWebGLsupport()
             return false
@@ -26,9 +51,58 @@ Studio =
         @domElement = document.querySelector dom
 
         @renderer = new THREE.WebGLRenderer()
-        @renderer.setSize width, height
+        @setSize width, height
 
         @domElement.appendChild @renderer.domElement
 
+        @scene = new THREE.Scene()
+
+        # test
+        @object = new THREE.Mesh new THREE.CubeGeometry(16, 16, 16), new THREE.MeshNormalMaterial()
+
+        @scene.add @object
+        # /test
+
+        @animate()
+
+#
+#   CAMERAS
+#
+orthograpicCamera = 
+    _self: null
+    _left: 0
+    _right: 0
+    _top: 0
+    _bottom: 0
+
+    _near: -1000
+    _far: 1000
+
+    init: (width, height) ->
+        @_left = width / -2
+        @_right = width / 2
+        @_top = height / 2
+        @_bottom = height / -2
+        @_near = width * -2
+        @_far = width * 2
+        camera = new THREE.OrthographicCamera @_left, @_right, @_top, @_bottom, @_near, @_far
+        @_self = camera
+
+
+perspectiveCamera = 
+    _fov: 45
+    _aspectRatio: 0
+    _near: 1
+    _far: 1000
+
+    init: (width, height) ->
+        @_aspectRatio = width / height
+        camera = new THREE.PerspectiveCamera @_fov, @_aspectRatio, @_near, @_far
+        camera.position.z = 40
+        @_self = camera
+
 
 window.Studio = Studio
+window.StudioObjects =
+    'orthographicCamera': orthograpicCamera
+    'perspectiveCamera': perspectiveCamera

minecraftcodex/studio/static/lib/flatui/less/flat-ui.less

@@ -2,7 +2,7 @@
 
 // Loading custom fonts
 //@import url("https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,400italic,300");
-@import "icon-font";
+//@import "icon-font";
 
 // Loading config with variables (changing them leads to changing a color scheme)
 @import "config";

minecraftcodex/studio/static/sass/_panels.sass

@@ -6,13 +6,14 @@
         display: inline-block
 
     .panel-canvas
-        display: block
+        width: 100%
-        margin: 0 auto
-        width: $canvas-width
 
         .studio-canvas
-            width: $canvas-width
+            border: 2px solid #dce4ec
+            display: block
             height: $canvas-width
+            margin: 0 auto
+            width: $canvas-width
 
     .panel-left
         left: 10px

minecraftcodex/studio/templates/studio/main.html

@@ -52,6 +52,11 @@ window.onload = function() {
         }
     })
     $("select.flatui").selectpicker({style: 'btn-primary', menuStyle: 'dropdown-inverse'});
+
+    $("select.camera-type").change(function() {
+	mcstudio.onCameraChange($(this).val())
+    })
+    $("select.camera-type").change()
 }
 </script>
 {% endblock %}
@@ -67,7 +72,7 @@ window.onload = function() {
                         <li class="dropdown">
                             <a href="#" class="dropdown-toggle"
                                data-toggle="dropdown">
-                                File
+				Creation
                                 <i class="icon-caret-down"></i>
                             </a>
                             <ul class="dropdown-menu">
@@ -99,7 +104,7 @@ window.onload = function() {
             <div class="texture-name pull-right"></div>
             <h3 class="margin-none">Textures</h3>
             <div class="text-center">
-                <input type="text" class="texture-search" placeholder="Search textures" />
+		<input type="text" class="texture-search" placeholder="Search..." />
             </div>
             <hr class="margin-none"/>
             <div class="texture-list">
@@ -114,9 +119,7 @@ window.onload = function() {
         </div>
     </div>
     <div class="panel panel-canvas">
-        <div class="well">
+	<div class="studio-canvas"></div>
-            <div class="studio-canvas"></div>
-        </div>
     </div>
     <div class="panel panel-right">
         <div class="well">
@@ -127,11 +130,13 @@ window.onload = function() {
             </button>
             <h3 class="margin-none">Camera</h3>
             <div id="camera" class="collapse in">
-
+		<div class="text-right">
-            <select name="select" class="flatui">
+		    Type:
-                <option value="meh1">Orthogonal</option>
+		    <select name="select" class="flatui camera-type ">
-                <option value="meh2">Perspective</option>
+			<option value="orthographic">Orthographic</option>
-            </select>
+			<option value="perspective">Perspective</option>
+		    </select>
+		</div>
 
             {#<label class="radio">
                 <span class="icons">
@@ -160,7 +165,7 @@ window.onload = function() {
             </button>
             <h3 class="margin-none">Objects</h3>
             <div id="objects" class="collapse in">
-                here things
+		// TODO
             </div>
             <hr />
             <button type="button"