Added possibility to move the camera with the interface controls

This commit is contained in:
Felipe Martín 2013-06-03 13:52:00 +02:00
parent 89d16e6dc0
commit 3a698e90f1
3 changed files with 36 additions and 9 deletions

View File

@ -15,10 +15,18 @@ class Camera
@_position.y += y @_position.y += y
@_position.z += z @_position.z += z
@_self.position = @_position @_self.position = @_position
$('input.camera-x').val @_position.x $('input.camera-x').val @_position.x
$('input.camera-y').val @_position.y $('input.camera-y').val @_position.y
$('input.camera-z').val @_position.z $('input.camera-z').val @_position.z
goTo: (x, y, z) ->
@_position.x = x
@_position.y = y
@_position.z = z
@_self.position = @_position
$('input.camera-x').val @_position.x
$('input.camera-y').val @_position.y
$('input.camera-z').val @_position.z
class orthograpicCamera extends Camera class orthograpicCamera extends Camera
_self: null _self: null
@ -39,6 +47,7 @@ class orthograpicCamera extends Camera
@_far = width * 2 @_far = width * 2
camera = new THREE.OrthographicCamera @_left, @_right, @_top, @_bottom, @_near, @_far camera = new THREE.OrthographicCamera @_left, @_right, @_top, @_bottom, @_near, @_far
@_self = camera @_self = camera
@goTo 0, 0, 0
class perspectiveCamera extends Camera class perspectiveCamera extends Camera
@ -50,8 +59,8 @@ class perspectiveCamera extends Camera
init: (width, height) -> init: (width, height) ->
@_aspectRatio = width / height @_aspectRatio = width / height
camera = new THREE.PerspectiveCamera @_fov, @_aspectRatio, @_near, @_far camera = new THREE.PerspectiveCamera @_fov, @_aspectRatio, @_near, @_far
camera.position.z = 40
@_self = camera @_self = camera
@goTo 0, 0, 40
window.StudioCameras = window.StudioCameras =

View File

@ -36,6 +36,24 @@ window.onload = ->
camera = $(@).val() camera = $(@).val()
window.Studio.onCameraChange camera window.Studio.onCameraChange camera
$('.btn-camera-x-plus').click ->
window.Studio.camera.move 1, 0, 0
$('.btn-camera-x-minus').click ->
window.Studio.camera.move -1, 0, 0
$('.btn-camera-y-plus').click ->
window.Studio.camera.move 0, 1, 0
$('.btn-camera-y-minus').click ->
window.Studio.camera.move 0, -1, 0
$('.btn-camera-z-plus').click ->
window.Studio.camera.move 0, 0, 1
$('.btn-camera-z-minus').click ->
window.Studio.camera.move 0, 0, -1
$(':radio[name="cameraType"]:first').click() $(':radio[name="cameraType"]:first').click()
# Toggles # Toggles

View File

@ -43,7 +43,7 @@
<i class="icon-caret-down"></i> <i class="icon-caret-down"></i>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#" onclick="javascript:mcstudio.reset()">New</a></li> <li><a href="#" onclick="javascript:Studio.reset()">New</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="{{ url('homepage') }}">Exit</a></li> <li><a href="{{ url('homepage') }}">Exit</a></li>
</ul> </ul>
@ -151,18 +151,18 @@
<input type="text" value="0" class="span5 text-center disabled camera-y" <input type="text" value="0" class="span5 text-center disabled camera-y"
disabled="disabled" /> disabled="disabled" />
<div> <div>
<button class="btn btn-small icon-plus"></button> <button class="btn btn-small icon-plus btn-camera-y-plus"></button>
<span class="label label-info valing-top">Y</span> <span class="label label-info valing-top">Y</span>
<button class="btn btn-small icon-minus"></button> <button class="btn btn-small icon-minus btn-camera-y-minus"></button>
</div> </div>
</div> </div>
<div class="span4 text-center"> <div class="span4 text-center">
<input type="text" value="0" class="span5 text-center disabled camera-z" <input type="text" value="0" class="span5 text-center disabled camera-z"
disabled="disabled" /> disabled="disabled" />
<div> <div>
<button class="btn btn-small icon-plus"></button> <button class="btn btn-small icon-plus btn-camera-z-plus"></button>
<span class="label label-info valing-top">Z</span> <span class="label label-info valing-top">Z</span>
<button class="btn btn-small icon-minus"></button> <button class="btn btn-small icon-minus btn-camera-z-minus"></button>
</div> </div>
</div> </div>
</div> </div>