Felipe Martín
parent
75352e2929
commit
fe746cba79
|
|
@ -1,7 +1,7 @@
|
|||
window.onload = ->
|
||||
# Studio
|
||||
if window.Studio
|
||||
window.Studio.init '.studio-canvas', 320, 240
|
||||
window.Studio.init '.studio-canvas', 640, 480
|
||||
window.modalManager.studio = window.Studio
|
||||
|
||||
# Textures
|
||||
|
|
@ -43,7 +43,7 @@ window.onload = ->
|
|||
target = $(this).attr 'data-target'
|
||||
$(target).toggle 'fast'
|
||||
|
||||
# TESTS
|
||||
$('[data-studio="change-texture"]').click ->
|
||||
texture = $(this).attr('data-texture')
|
||||
window.Studio.changeTexture texture
|
||||
# Objects
|
||||
$('.btn-addobject').click ->
|
||||
obj = $('.object-list').val()
|
||||
window.Studio.objectManager.add obj
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
class Entity
|
||||
_object: null
|
||||
|
||||
_id: null
|
||||
|
||||
_visible: true
|
||||
|
||||
_position:
|
||||
x: 0
|
||||
y: 0
|
||||
z: 0
|
||||
|
||||
_rotation:
|
||||
x: 0
|
||||
y: 0
|
||||
z: 0
|
||||
|
||||
_scale:
|
||||
x: 0
|
||||
y: 0
|
||||
z: 0
|
||||
|
||||
class Cube extends Entity
|
||||
name: 'Cube'
|
||||
|
||||
init: (size) ->
|
||||
@_shape = new THREE.CubeGeometry size.x, size.y, size.z
|
||||
@_texture = new THREE.MeshNormalMaterial
|
||||
|
||||
@_object = new THREE.Mesh @_shape, @_texture
|
||||
@
|
||||
|
||||
class Sphere extends Entity
|
||||
name: 'Sphere'
|
||||
|
||||
init: (size) ->
|
||||
@_shape = new THREE.SphereGeometry size.x, size.y, size.z
|
||||
@_texture = new THREE.MeshNormalMaterial
|
||||
|
||||
@_object = new THREE.Mesh @_shape, @_texture
|
||||
@
|
||||
|
||||
|
||||
window.StudioObjects =
|
||||
cube: Cube
|
||||
sphere: Sphere
|
||||
|
|
@ -19,6 +19,56 @@ Studio =
|
|||
objects: []
|
||||
_objects: {}
|
||||
|
||||
# OBJECT MANAGER
|
||||
objectManager:
|
||||
add: (object) ->
|
||||
if object of window.StudioObjects
|
||||
obj = new window.StudioObjects[object]
|
||||
obj.init
|
||||
x: 16
|
||||
y: 16
|
||||
z: 16
|
||||
obj._id = @studio.objects.length + 1
|
||||
@studio.objects.push
|
||||
type: object
|
||||
id: obj._id
|
||||
|
||||
@studio._objects[obj._id] = obj
|
||||
@studio.scene.add @studio._objects[obj._id]._object
|
||||
|
||||
context =
|
||||
object_id: obj._id
|
||||
name: obj.name
|
||||
|
||||
template = Handlebars.compile $('#entity-template-simple').html()
|
||||
html = template(context)
|
||||
$('.entities-list').append(html)
|
||||
@setHandlers $(".entities-list .entity-#{obj._id}")
|
||||
|
||||
|
||||
list: ->
|
||||
return @studio._objects
|
||||
|
||||
setHandlers: (dom) ->
|
||||
_this = @
|
||||
dom.find('.btn-edit').click ->
|
||||
console.log 'edit'
|
||||
|
||||
dom.find('.btn-remove').click ->
|
||||
_this.remove $(@).parents('[data-objectid]').attr('data-objectid')
|
||||
|
||||
dom.find('.check-visible').change ->
|
||||
console.log 'toggle!'
|
||||
|
||||
remove: (object_id) ->
|
||||
if object_id of @studio._objects
|
||||
obj = @studio._objects[object_id]
|
||||
@studio.scene.remove obj._object
|
||||
delete @studio._objects[object_id]
|
||||
$(".entities-list .entity-#{object_id}").remove()
|
||||
|
||||
|
||||
|
||||
# Methods
|
||||
checkWebGLsupport: ->
|
||||
return !!window.WebGLRenderingContext;
|
||||
|
|
@ -52,18 +102,6 @@ Studio =
|
|||
|
||||
@onCameraChange @_cameraType
|
||||
|
||||
# Tests
|
||||
changeTexture: (path) ->
|
||||
@scene.remove @object
|
||||
|
||||
texture = new THREE.ImageUtils.loadTexture path
|
||||
texture.minFilter = THREE.NearestFilter
|
||||
texture.magFilter = THREE.NearestFilter
|
||||
material = new THREE.MeshLambertMaterial map: texture
|
||||
@object = new THREE.Mesh new THREE.CubeGeometry(16, 16, 16), material
|
||||
@object.rotation.set Math.PI/6, (Math.PI/4)*-1, 0
|
||||
@scene.add @object
|
||||
|
||||
reset: ->
|
||||
cancelAnimationFrame @_animationFrame
|
||||
@renderer.domElement.remove()
|
||||
|
|
@ -73,6 +111,7 @@ Studio =
|
|||
if not @checkWebGLsupport()
|
||||
return false
|
||||
|
||||
# Renderer
|
||||
@domElement = document.querySelector dom
|
||||
@_dom = dom
|
||||
|
||||
|
|
@ -81,14 +120,25 @@ Studio =
|
|||
|
||||
@domElement.appendChild @renderer.domElement
|
||||
|
||||
# Scene
|
||||
@scene = new THREE.Scene()
|
||||
|
||||
# Populate
|
||||
|
||||
# Add all objects to object select
|
||||
objectsDom = $('select.object-list')
|
||||
for i of window.StudioObjects
|
||||
obj = window.StudioObjects[i]
|
||||
objectsDom.append "<option value=\"#{i}\">#{obj.name}</option>"
|
||||
|
||||
# test
|
||||
@light = new THREE.DirectionalLight 0xffffff
|
||||
@light.position.set(1, 20, 60).normalize()
|
||||
@light.intensity = 1.6
|
||||
@scene.add @light
|
||||
|
||||
@objectManager.studio = @
|
||||
|
||||
#@object = new THREE.Mesh new THREE.CubeGeometry(16, 16, 16), new THREE.MeshNormalMaterial()
|
||||
|
||||
#@scene.add @object
|
||||
|
|
|
|||
|
|
@ -11,3 +11,6 @@
|
|||
|
||||
.valing-top
|
||||
vertical-align: top
|
||||
|
||||
#objects table
|
||||
margin-bottom: 0
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
<!-- Handlebars -->
|
||||
<script type="text/javascript" src="/static/lib/handlebars.1.0.rc4.js"></script>
|
||||
<!-- Studio -->
|
||||
<script type="text/javascript" src="/static/js/objects.js"></script>
|
||||
<script type="text/javascript" src="/static/js/cameras.js"></script>
|
||||
<script type="text/javascript" src="/static/js/studio.js"></script>
|
||||
<script type="text/javascript" src="/static/js/modals.js"></script>
|
||||
|
|
@ -83,7 +84,7 @@
|
|||
<h3 class="margin-none">Textures</h3>
|
||||
<div class="clearfix"></div>
|
||||
<div class="texture-list">
|
||||
{% for item in textures %}
|
||||
{#{% for item in textures %}
|
||||
<div class="item" data-type="texture" data-name="{{ item.name }}"
|
||||
data-texture="/static/textures/{{ item.get_image() }}"
|
||||
data-studio="change-texture">
|
||||
|
|
@ -91,7 +92,7 @@
|
|||
<img src="/static/textures/{{ item.get_image(2) }}" />
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endfor %}#}
|
||||
</div>
|
||||
<div class="text-center"><span class="texture-name badge">Mouseover a texture</span></div>
|
||||
</div>
|
||||
|
|
@ -137,11 +138,15 @@
|
|||
<h4 class="margin-none">Objects</h4>
|
||||
<div id="objects" class="text-right">
|
||||
<hr />
|
||||
<select name="select" class="flatui object">
|
||||
<select name="object-list" class="flatui object-list">
|
||||
</select>
|
||||
<button class="btn btn-primary btn-round valing-top">
|
||||
<button class="btn btn-primary btn-addobject btn-round valing-top">
|
||||
<i class="icon-plus"></i>
|
||||
</button>
|
||||
<table class="table">
|
||||
<tbody class="entities-list">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="well">
|
||||
|
|
@ -158,6 +163,7 @@
|
|||
</div>
|
||||
</div>
|
||||
{% include "studio/modals.html" %}
|
||||
{% include "studio/templates.html" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block footer %}{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!-- MODALS -->
|
||||
<!-- MODALS TEMPLATES -->
|
||||
|
||||
<!-- CONFIRM -->
|
||||
<script id="modal-template-confirm" type="text/x-handlebars-template">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<!-- STUDIO TEMPLATES -->
|
||||
|
||||
<!-- TMPL -->
|
||||
<script id="entity-template-simple" type="text/x-handlebars-template">
|
||||
<tr class="entity-{{ '{{ object_id }}' }}" data-objectid="{{ '{{ object_id }}' }}">
|
||||
<td>
|
||||
<input type="checkbox" class="check-visible" value="visible">
|
||||
</td>
|
||||
<td>
|
||||
<span class="label">{{ '{{ object_id }}' }}:{{ '{{ name }}' }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-right">
|
||||
<button class="btn btn-info btn-small btn-edit">Edit</button>
|
||||
<button class="btn btn-danger btn-small btn-remove">Remove</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</script>
|
||||
Loading…
Reference in New Issue