From 607a4d0b7ea16654712a278d02d413029dfbfd89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Felipe=20Mart=C3=ADn?= Date: Thu, 30 May 2013 16:41:14 +0200 Subject: [PATCH] Added orthographic and perspective camera (working) --- .../studio/static/coffee/studio.coffee | 76 ++++++++++++++++++- .../static/lib/flatui/less/flat-ui.less | 2 +- .../studio/static/sass/_panels.sass | 9 ++- .../studio/templates/studio/main.html | 27 ++++--- 4 files changed, 97 insertions(+), 17 deletions(-) diff --git a/minecraftcodex/studio/static/coffee/studio.coffee b/minecraftcodex/studio/static/coffee/studio.coffee index 643d791..3d6aafe 100644 --- a/minecraftcodex/studio/static/coffee/studio.coffee +++ b/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 diff --git a/minecraftcodex/studio/static/lib/flatui/less/flat-ui.less b/minecraftcodex/studio/static/lib/flatui/less/flat-ui.less index 91587ce..b8904f0 100755 --- a/minecraftcodex/studio/static/lib/flatui/less/flat-ui.less +++ b/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"; diff --git a/minecraftcodex/studio/static/sass/_panels.sass b/minecraftcodex/studio/static/sass/_panels.sass index 828546c..dca1d5d 100644 --- a/minecraftcodex/studio/static/sass/_panels.sass +++ b/minecraftcodex/studio/static/sass/_panels.sass @@ -6,13 +6,14 @@ display: inline-block .panel-canvas - display: block - margin: 0 auto - width: $canvas-width + width: 100% .studio-canvas - width: $canvas-width + border: 2px solid #dce4ec + display: block height: $canvas-width + margin: 0 auto + width: $canvas-width .panel-left left: 10px diff --git a/minecraftcodex/studio/templates/studio/main.html b/minecraftcodex/studio/templates/studio/main.html index 227eba2..aadd86d 100644 --- a/minecraftcodex/studio/templates/studio/main.html +++ b/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() } {% endblock %} @@ -67,7 +72,7 @@ window.onload = function() {
  • - File + Creation