Added orthographic and perspective camera (working)
This commit is contained in:
parent
012e682d1f
commit
607a4d0b7e
|
@ -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
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
<div class="studio-canvas"></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">
|
||||
|
||||
<select name="select" class="flatui">
|
||||
<option value="meh1">Orthogonal</option>
|
||||
<option value="meh2">Perspective</option>
|
||||
</select>
|
||||
<div class="text-right">
|
||||
Type:
|
||||
<select name="select" class="flatui camera-type ">
|
||||
<option value="orthographic">Orthographic</option>
|
||||
<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"
|
||||
|
|
Loading…
Reference in New Issue