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

View File

@ -36,6 +36,24 @@ window.onload = ->
camera = $(@).val()
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()
# Toggles

View File

@ -43,7 +43,7 @@
<i class="icon-caret-down"></i>
</a>
<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><a href="{{ url('homepage') }}">Exit</a></li>
</ul>
@ -151,18 +151,18 @@
<input type="text" value="0" class="span5 text-center disabled camera-y"
disabled="disabled" />
<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>
<button class="btn btn-small icon-minus"></button>
<button class="btn btn-small icon-minus btn-camera-y-minus"></button>
</div>
</div>
<div class="span4 text-center">
<input type="text" value="0" class="span5 text-center disabled camera-z"
disabled="disabled" />
<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>
<button class="btn btn-small icon-minus"></button>
<button class="btn btn-small icon-minus btn-camera-z-minus"></button>
</div>
</div>
</div>