parent
75352e2929
commit
fe746cba79
|
@ -1,7 +1,7 @@
|
||||||
window.onload = ->
|
window.onload = ->
|
||||||
# Studio
|
# Studio
|
||||||
if window.Studio
|
if window.Studio
|
||||||
window.Studio.init '.studio-canvas', 320, 240
|
window.Studio.init '.studio-canvas', 640, 480
|
||||||
window.modalManager.studio = window.Studio
|
window.modalManager.studio = window.Studio
|
||||||
|
|
||||||
# Textures
|
# Textures
|
||||||
|
@ -43,7 +43,7 @@ window.onload = ->
|
||||||
target = $(this).attr 'data-target'
|
target = $(this).attr 'data-target'
|
||||||
$(target).toggle 'fast'
|
$(target).toggle 'fast'
|
||||||
|
|
||||||
# TESTS
|
# Objects
|
||||||
$('[data-studio="change-texture"]').click ->
|
$('.btn-addobject').click ->
|
||||||
texture = $(this).attr('data-texture')
|
obj = $('.object-list').val()
|
||||||
window.Studio.changeTexture texture
|
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: []
|
||||||
_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
|
# Methods
|
||||||
checkWebGLsupport: ->
|
checkWebGLsupport: ->
|
||||||
return !!window.WebGLRenderingContext;
|
return !!window.WebGLRenderingContext;
|
||||||
|
@ -52,18 +102,6 @@ Studio =
|
||||||
|
|
||||||
@onCameraChange @_cameraType
|
@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: ->
|
reset: ->
|
||||||
cancelAnimationFrame @_animationFrame
|
cancelAnimationFrame @_animationFrame
|
||||||
@renderer.domElement.remove()
|
@renderer.domElement.remove()
|
||||||
|
@ -73,6 +111,7 @@ Studio =
|
||||||
if not @checkWebGLsupport()
|
if not @checkWebGLsupport()
|
||||||
return false
|
return false
|
||||||
|
|
||||||
|
# Renderer
|
||||||
@domElement = document.querySelector dom
|
@domElement = document.querySelector dom
|
||||||
@_dom = dom
|
@_dom = dom
|
||||||
|
|
||||||
|
@ -81,14 +120,25 @@ Studio =
|
||||||
|
|
||||||
@domElement.appendChild @renderer.domElement
|
@domElement.appendChild @renderer.domElement
|
||||||
|
|
||||||
|
# Scene
|
||||||
@scene = new THREE.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
|
# test
|
||||||
@light = new THREE.DirectionalLight 0xffffff
|
@light = new THREE.DirectionalLight 0xffffff
|
||||||
@light.position.set(1, 20, 60).normalize()
|
@light.position.set(1, 20, 60).normalize()
|
||||||
@light.intensity = 1.6
|
@light.intensity = 1.6
|
||||||
@scene.add @light
|
@scene.add @light
|
||||||
|
|
||||||
|
@objectManager.studio = @
|
||||||
|
|
||||||
#@object = new THREE.Mesh new THREE.CubeGeometry(16, 16, 16), new THREE.MeshNormalMaterial()
|
#@object = new THREE.Mesh new THREE.CubeGeometry(16, 16, 16), new THREE.MeshNormalMaterial()
|
||||||
|
|
||||||
#@scene.add @object
|
#@scene.add @object
|
||||||
|
|
|
@ -11,3 +11,6 @@
|
||||||
|
|
||||||
.valing-top
|
.valing-top
|
||||||
vertical-align: top
|
vertical-align: top
|
||||||
|
|
||||||
|
#objects table
|
||||||
|
margin-bottom: 0
|
||||||
|
|
|
@ -21,6 +21,7 @@
|
||||||
<!-- Handlebars -->
|
<!-- Handlebars -->
|
||||||
<script type="text/javascript" src="/static/lib/handlebars.1.0.rc4.js"></script>
|
<script type="text/javascript" src="/static/lib/handlebars.1.0.rc4.js"></script>
|
||||||
<!-- Studio -->
|
<!-- 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/cameras.js"></script>
|
||||||
<script type="text/javascript" src="/static/js/studio.js"></script>
|
<script type="text/javascript" src="/static/js/studio.js"></script>
|
||||||
<script type="text/javascript" src="/static/js/modals.js"></script>
|
<script type="text/javascript" src="/static/js/modals.js"></script>
|
||||||
|
@ -83,7 +84,7 @@
|
||||||
<h3 class="margin-none">Textures</h3>
|
<h3 class="margin-none">Textures</h3>
|
||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
<div class="texture-list">
|
<div class="texture-list">
|
||||||
{% for item in textures %}
|
{#{% for item in textures %}
|
||||||
<div class="item" data-type="texture" data-name="{{ item.name }}"
|
<div class="item" data-type="texture" data-name="{{ item.name }}"
|
||||||
data-texture="/static/textures/{{ item.get_image() }}"
|
data-texture="/static/textures/{{ item.get_image() }}"
|
||||||
data-studio="change-texture">
|
data-studio="change-texture">
|
||||||
|
@ -91,7 +92,7 @@
|
||||||
<img src="/static/textures/{{ item.get_image(2) }}" />
|
<img src="/static/textures/{{ item.get_image(2) }}" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}#}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center"><span class="texture-name badge">Mouseover a texture</span></div>
|
<div class="text-center"><span class="texture-name badge">Mouseover a texture</span></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -137,11 +138,15 @@
|
||||||
<h4 class="margin-none">Objects</h4>
|
<h4 class="margin-none">Objects</h4>
|
||||||
<div id="objects" class="text-right">
|
<div id="objects" class="text-right">
|
||||||
<hr />
|
<hr />
|
||||||
<select name="select" class="flatui object">
|
<select name="object-list" class="flatui object-list">
|
||||||
</select>
|
</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>
|
<i class="icon-plus"></i>
|
||||||
</button>
|
</button>
|
||||||
|
<table class="table">
|
||||||
|
<tbody class="entities-list">
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="well">
|
<div class="well">
|
||||||
|
@ -158,6 +163,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% include "studio/modals.html" %}
|
{% include "studio/modals.html" %}
|
||||||
|
{% include "studio/templates.html" %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block footer %}{% endblock %}
|
{% block footer %}{% endblock %}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<!-- MODALS -->
|
<!-- MODALS TEMPLATES -->
|
||||||
|
|
||||||
<!-- CONFIRM -->
|
<!-- CONFIRM -->
|
||||||
<script id="modal-template-confirm" type="text/x-handlebars-template">
|
<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