Added possibility to move the camera with the interface controls
This commit is contained in:
parent
89d16e6dc0
commit
3a698e90f1
|
@ -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 =
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue