diff --git a/gui/files/inconsolata.woff b/gui/files/inconsolata.woff new file mode 100644 index 00000000..6170a0bf Binary files /dev/null and b/gui/files/inconsolata.woff differ diff --git a/gui/index.html b/gui/index.html new file mode 100644 index 00000000..e03828ee --- /dev/null +++ b/gui/index.html @@ -0,0 +1,136 @@ + + + three.js gui + + + + + + + + + + + + + + + + diff --git a/gui/js/Code.js b/gui/js/Code.js new file mode 100644 index 00000000..a79f17db --- /dev/null +++ b/gui/js/Code.js @@ -0,0 +1,159 @@ +var Code = function () { + + var _domElement = document.createElement( 'div' ); + _domElement.style.position = 'absolute'; + _domElement.style.backgroundColor = '#f0f0f0'; + _domElement.style.overflow = 'auto'; + + // + + var _html = false; + + var _checkbox = document.createElement( 'input' ); + _checkbox.type = 'checkbox'; + _checkbox.style.margin = '20px 6px 0px 20px'; + _checkbox.addEventListener( 'click', function () { _html = !_html; _update(); }, false ); + _domElement.appendChild( _checkbox ); + + /* + var _checkboxText = document.createElement( 'span' ); + _checkboxText.style.fontFamily = 'Monospace'; + _checkboxText.innerText = 'HTML'; + _domElement.appendChild( _checkboxText ); + */ + + // + + var _code = document.createElement( 'pre' ); + _code.style.color = '#404040'; + _code.style.margin = '20px'; + _code.style.fontSize = '13px'; + _code.style.whiteSpace = 'pre'; // 'pre-wrap' + _domElement.appendChild( _code ); + + // + + var _list = []; + + var _update = function () { + + var string = ''; + + string += [ + + 'var camera, scene, renderer;', + '', + 'init();', + 'animate();', + '', + 'function init() {', + '', + '\tcamera = new THREE.Camera();', + '', + '\tscene = new THREE.Scene();', + '' + + ].join( '\n' ); + + for ( var i = 0, l = _list.length; i < l; i ++ ) { + + string += _list[ i ] + '\n'; + + } + + string += [ + + '', + '\trenderer = new THREE.WebGLRenderer()', + '', + '}', + '', + 'function animate() {', + '', + '\trequestAnimationFrame( animate );', + '\trender();', + '', + '}', + '', + 'function render() {', + '', + '\trenderer.render( scene, camera );', + '', + '}' + + ].join( '\n' ); + + if ( _html ) { + + string = '<!doctype html>\n<html>\n\t<body>\n\t\t<script src=\"js/Three.js\"></script>\n\t\t<script src=\"js/RequestAnimationFrame.js\"></script>\n\t\t<script>\n' + ( '\n' + string ).replace( /\n/gi, '\n\t\t\t' ) + '\n\n\t\t</script>\n\t</body>\n</html>'; + + } + + _code.innerHTML = string; + + } + + // signals + + signals.updated.add( function ( scene ) { + + _list.length = 0; + + for ( var i = 0, l = scene.objects.length; i < l; i ++ ) { + + var object = scene.objects[ i ]; + + if ( object instanceof THREE.Mesh ) { + + var string = ''; + string += '\n\tvar geometry = ' + object.geometry.code + ';'; + string += '\n\tvar material = ' + object.materials[ 0 ].code + ';'; + string += '\n\tvar mesh = new THREE.Mesh( geometry, material );'; + + if ( object.position.x != 0 ) string += '\n\tmesh.position.x = ' + object.position.x + ';'; + if ( object.position.y != 0 ) string += '\n\tmesh.position.y = ' + object.position.y + ';'; + if ( object.position.z != 0 ) string += '\n\tmesh.position.z = ' + object.position.z + ';'; + + if ( object.rotation.x != 0 ) string += '\n\tmesh.rotation.x = ' + object.rotation.x + ';'; + if ( object.rotation.y != 0 ) string += '\n\tmesh.rotation.y = ' + object.rotation.y + ';'; + if ( object.rotation.z != 0 ) string += '\n\tmesh.rotation.z = ' + object.rotation.z + ';'; + + if ( object.scale.x != 1 ) string += '\n\tmesh.scale.x = ' + object.scale.x + ';'; + if ( object.scale.y != 1 ) string += '\n\tmesh.scale.y = ' + object.scale.y + ';'; + if ( object.scale.z != 1 ) string += '\n\tmesh.scale.z = ' + object.scale.z + ';'; + + string += '\n\tscene.addObject( mesh );'; // string += '\n\tscene.add( mesh );'; + + _list.push( string ); + + } + + } + + _update(); + + } ); + + // + + this.getDOMElement = function () { + + return _domElement; + + } + + this.setPosition = function ( x, y ) { + + _domElement.style.left = x + 'px'; + _domElement.style.top = y + 'px'; + + } + + this.setSize = function ( width, height ) { + + _domElement.style.width = width + 'px'; + _domElement.style.height = height + 'px'; + + } + +} diff --git a/gui/js/UI.Toolbar.js b/gui/js/UI.Toolbar.js new file mode 100644 index 00000000..52a1bb10 --- /dev/null +++ b/gui/js/UI.Toolbar.js @@ -0,0 +1,81 @@ +UI.Toolbar = function () { + + var _domElement = document.createElement( 'div' ); + _domElement.style.position = 'absolute'; + _domElement.style.backgroundColor = '#404040'; + + // CUBE + + var _button = document.createElement( 'button' ); + _button.innerHTML = 'Cube'; + _button.addEventListener( 'click', function ( event ) { + + var geometry = new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 ); + var material = new THREE.MeshBasicMaterial( { color: 0xffffff } ); + var mesh = new THREE.Mesh( geometry, material ); + + geometry.code = 'new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 )'; + material.code = 'new THREE.MeshBasicMaterial( { color: 0xffffff } )'; + + signals.added.dispatch( mesh ); + + }, false ); + _domElement.appendChild( _button ); + + // SPHERE + + var _button = document.createElement( 'button' ); + _button.innerHTML = 'Sphere'; + _button.addEventListener( 'click', function ( event ) { + + var geometry = new THREE.SphereGeometry( 75, 20, 10 ); + var material = new THREE.MeshBasicMaterial( { color: 0xffffff } ); + var mesh = new THREE.Mesh( geometry, material ); + + geometry.code = 'new THREE.SphereGeometry( 75, 20, 10 )'; + material.code = 'new THREE.MeshBasicMaterial( { color: 0xffffff } )'; + + signals.added.dispatch( mesh ); + + }, false ); + _domElement.appendChild( _button ); + + // TORUS + + var _button = document.createElement( 'button' ); + _button.innerHTML = 'Torus'; + _button.addEventListener( 'click', function ( event ) { + + var geometry = new THREE.TorusGeometry( 50, 20, 20, 20 ); + var material = new THREE.MeshBasicMaterial( { color: 0xffffff } ); + var mesh = new THREE.Mesh( geometry, material ); + + geometry.code = 'new THREE.TorusGeometry( 50, 20, 20, 20 )'; + material.code = 'new THREE.MeshBasicMaterial( { color: 0xffffff } )'; + + signals.added.dispatch( mesh ); + + }, false ); + _domElement.appendChild( _button ); + + this.getDOMElement = function () { + + return _domElement; + + }; + + this.setPosition = function ( x, y ) { + + _domElement.style.left = x + 'px'; + _domElement.style.top = y + 'px'; + + }; + + this.setSize = function ( width, height ) { + + _domElement.style.width = width + 'px'; + _domElement.style.height = height + 'px'; + + }; + +}; diff --git a/gui/js/UI.Viewports.js b/gui/js/UI.Viewports.js new file mode 100644 index 00000000..3aa847b9 --- /dev/null +++ b/gui/js/UI.Viewports.js @@ -0,0 +1,421 @@ +UI.Viewports = function () { + + var _width, _height; + var _xhalf = 0.5, _yhalf = 0.5; + + var _HOVERED, _SELECTED; + var _offset = new THREE.Vector3(); + + // + + var _domElement = document.createElement( 'div' ); + _domElement.style.position = 'absolute'; + _domElement.style.backgroundColor = '#808080'; + + // + + var _views = [ + { x: null, y: null, width: null, height: null, camera: null }, + { x: null, y: null, width: null, height: null, camera: null }, + { x: null, y: null, width: null, height: null, camera: null }, + { x: null, y: null, width: null, height: null, camera: null } + ]; + + _views[ 0 ].camera = new THREE.Camera( 50, 1, 1, 5000 ); // top + _views[ 0 ].camera.useTarget = false; + _views[ 0 ].camera.position.y = 1000; + _views[ 0 ].camera.rotation.x = - Math.PI / 2; + + _views[ 1 ].camera = new THREE.Camera( 50, 1, 1, 5000 ); // front + _views[ 1 ].camera.position.z = 1000; + + _views[ 2 ].camera = new THREE.Camera( 50, 1, 1, 5000 ); // left + _views[ 2 ].camera.position.x = - 1000; + + _views[ 3 ].camera = new THREE.Camera( 50, 1, 1, 5000 ); // perspective + _views[ 3 ].camera.position.x = 1000; + _views[ 3 ].camera.position.y = 1000; + _views[ 3 ].camera.position.z = 1000; + + // guides + + var _sceneHelpers = new THREE.Scene(); + + var _grid = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000, 20, 20 ), new THREE.MeshBasicMaterial( { color: 0x606060, wireframe: true, transparent: true } ) ); + _grid.rotation.x = Math.PI / 2; + _sceneHelpers.add( _grid ); + + // + + var _scene = new THREE.Scene(); + + /* + var light = new THREE.AmbientLight( 0x404040 ); + _scene.add( light ); + + var light = new THREE.DirectionalLight( 0xffffff ); + light.position.set( 1000, 1000, - 1000 ); + light.position.normalize(); + _scene.add( light ); + */ + + var _plane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.25, transparent: true, wireframe: true } ) ); + _plane.visible = false; + _sceneHelpers.add( _plane ); + + var _projector = new THREE.Projector(); + + var _renderer = new THREE.WebGLRenderer( /*{ antialias: true }*/ ); + _renderer.autoClear = false; + _renderer.domElement.addEventListener( 'mousedown', function ( event ) { + + event.preventDefault(); + + var mouse = getViewportMouse( event.clientX, event.clientY ); + + var camera = _views[ mouse.view ].camera; + var vector = new THREE.Vector3( mouse.x * 2 - 1, - mouse.y * 2 + 1, 0.5 ); + _projector.unprojectVector( vector, camera ); + + var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() ); + var intersects = ray.intersectScene( _scene ); + + if ( intersects.length ) { + + _SELECTED = intersects[ 0 ].object; + + var intersects = ray.intersectObject( _plane ); + _offset.copy( intersects[ 0 ].point ).subSelf( _plane.position ); + + } + + }, false ); + _renderer.domElement.addEventListener( 'mousemove', function ( event ) { + + event.preventDefault(); + + var mouse = getViewportMouse( event.clientX, event.clientY ); + + var camera = _views[ mouse.view ].camera; + var vector = new THREE.Vector3( mouse.x * 2 - 1, - mouse.y * 2 + 1, 0.5 ); + _projector.unprojectVector( vector, camera ); + + var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() ); + var intersects = ray.intersectScene( _scene ); + + if ( _SELECTED ) { + + var intersects = ray.intersectObject( _plane ); + _SELECTED.position.copy( intersects[ 0 ].point.subSelf( _offset ) ); + + _render(); + + signals.updated.dispatch( _scene ); + + return; + + } + + if ( intersects.length ) { + + _HOVERED = intersects[ 0 ].object; + + _plane.position.set( 0, 0, 0 ); + _plane.lookAt( camera.position ); + _plane.position.copy( _HOVERED.position ); + + _render(); + + } else { + + _HOVERED = null; + + } + + }, false ); + _renderer.domElement.addEventListener( 'mouseup', function ( event ) { + + event.preventDefault(); + + if ( _SELECTED ) { + + _plane.position.copy( _SELECTED.position ); + _SELECTED = null; + + } + + }, false ); + _renderer.domElement.addEventListener( 'mousewheel', function ( event ) { + + if ( event.wheelDeltaY ) { + + event.preventDefault(); + + var mouse = getViewportMouse( event.clientX, event.clientY ); + var camera = _views[ mouse.view ].camera; + var vector = camera.position.clone(); + var amount = event.wheelDeltaY * 0.2; + + if ( vector.length() - amount < 10 ) return; + + vector.normalize().multiplyScalar( amount ); + camera.position.subSelf( vector ); + + _render(); + + } + + }, false ); + _domElement.appendChild( _renderer.domElement ); + + // + + var _xr = document.createElement( 'div' ); + _xr.style.position = 'absolute'; + _xr.style.top = '0px'; + _xr.style.width = '1px'; + _xr.style.borderLeft = '1px solid #808080'; + _xr.style.borderRight = '1px solid #808080'; + _xr.style.backgroundColor = '#404040'; + _xr.style.cursor = 'col-resize'; + _xr.addEventListener( 'mousedown', function ( event ) { + + event.preventDefault(); + + document.body.style.cursor = 'col-resize'; + document.addEventListener( 'mousemove', onMouseMove, false ); + document.addEventListener( 'mouseup', onMouseUp, false ); + + function onMouseMove( event ) { + + event.preventDefault(); + + _xhalf = Math.max( 0, Math.min( 1, event.clientX / _width ) ); + + _updateViews(); + _updateCameras(); + _render(); + + } + + function onMouseUp( event ) { + + document.body.style.cursor = 'auto'; + document.removeEventListener( 'mousemove', onMouseMove, false ); + document.removeEventListener( 'mouseup', onMouseUp, false ); + + } + + }, false ); + _xr.addEventListener( 'dblclick', function ( event ) { + + _xhalf = 0.5; + + _updateViews(); + _updateCameras(); + _render(); + + }, false ); + _domElement.appendChild( _xr ); + + var _yr = document.createElement( 'div' ); + _yr.style.position = 'absolute'; + _yr.style.height = '1px'; + _yr.style.borderTop = '1px solid #808080'; + _yr.style.borderBottom = '1px solid #808080'; + _yr.style.backgroundColor = '#404040'; + _yr.style.cursor = 'row-resize'; + _yr.addEventListener( 'mousedown', function ( event ) { + + event.preventDefault(); + + document.body.style.cursor = 'row-resize'; + document.addEventListener( 'mousemove', onMouseMove, false ); + document.addEventListener( 'mouseup', onMouseUp, false ); + + function onMouseMove( event ) { + + event.preventDefault(); + + _yhalf = Math.max( 0, Math.min( 1, event.clientY / _height ) ); + + _updateViews(); + _updateCameras(); + _render(); + + } + + function onMouseUp( event ) { + + document.body.style.cursor = 'auto'; + document.removeEventListener( 'mousemove', onMouseMove, false ); + document.removeEventListener( 'mouseup', onMouseUp, false ); + + } + + }, false ); + _yr.addEventListener( 'dblclick', function ( event ) { + + _yhalf = 0.5; + + _updateViews(); + _updateCameras(); + _render(); + + }, false ); + _domElement.appendChild( _yr ); + + function getViewportMouse( x, y ) { + + var width = _views[ 0 ].width; + var height = _views[ 0 ].height; + + if ( x < width && y < height ) { + + return { + + view: 0, + x: x / _views[ 0 ].width, + y: y / _views[ 0 ].height + + }; + + } else if ( x > width && y < height ) { + + return { + + view: 1, + x: ( x - _views[ 1 ].x ) / _views[ 1 ].width, + y: y / _views[ 1 ].height + + }; + + } else if ( x < width && y > height ) { + + return { + + view: 2, + x: x / _views[ 2 ].width, + y: ( y - _views[ 2 ].y ) / _views[ 2 ].height + + }; + + } else if ( x > width && y > height ) { + + return { + + view: 3, + x: ( x - _views[ 3 ].x ) / _views[ 3 ].width, + y: ( y - _views[ 3 ].y ) / _views[ 3 ].height + + }; + + } + + } + + // signals + + signals.added.add( function ( object ) { + + _scene.add( object ); + _render(); + + signals.updated.dispatch( _scene ); + + } ); + + // + + this.getDOMElement = function () { + + return _domElement; + + }; + + this.setSize = function ( width, height ) { + + _width = width; + _height = height; + + _updateViews(); + _updateCameras(); + + _renderer.setSize( _width, _height ); + + _render(); + + }; + + var _updateViews = function () { + + _views[ 0 ].x = 0; + _views[ 0 ].y = 0; + _views[ 0 ].width = _width * _xhalf; + _views[ 0 ].height = _height * _yhalf; + + _views[ 1 ].x = _width * _xhalf; + _views[ 1 ].y = 0; + _views[ 1 ].width = _width - _width * _xhalf; + _views[ 1 ].height = _height * _yhalf; + + _views[ 2 ].x = 0; + _views[ 2 ].y = _height * _yhalf; + _views[ 2 ].width = _width * _xhalf; + _views[ 2 ].height = _height - _height * _yhalf; + + _views[ 3 ].x = _width * _xhalf; + _views[ 3 ].y = _height * _yhalf; + _views[ 3 ].width = _width - _width * _xhalf; + _views[ 3 ].height = _height - _height * _yhalf; + + }; + + var _updateCameras = function () { + + _views[ 0 ].camera.aspect = _views[ 0 ].width / _views[ 0 ].height; + _views[ 0 ].camera.updateProjectionMatrix(); + + _views[ 1 ].camera.aspect = _views[ 1 ].width / _views[ 1 ].height; + _views[ 1 ].camera.updateProjectionMatrix(); + + _views[ 2 ].camera.aspect = _views[ 2 ].width / _views[ 2 ].height; + _views[ 2 ].camera.updateProjectionMatrix(); + + _views[ 3 ].camera.aspect = _views[ 3 ].width / _views[ 3 ].height; + _views[ 3 ].camera.updateProjectionMatrix(); + + + }; + + var _render = function () { + + _xr.style.left = ( _width * _xhalf ) + 'px'; + _xr.style.height = _height + 'px'; + + _yr.style.top = ( _height * _yhalf ) + 'px'; + _yr.style.width = _width + 'px'; + + // + + _renderer.clear(); + + _renderer.setViewport( 0, _height - _height * _yhalf, _views[ 0 ].width, _views[ 0 ].height ); + _renderer.render( _sceneHelpers, _views[ 0 ].camera ); + _renderer.render( _scene, _views[ 0 ].camera ); + + _renderer.setViewport( _width * _xhalf, _height - _height * _yhalf, _views[ 1 ].width, _views[ 1 ].height ); + _renderer.render( _sceneHelpers, _views[ 1 ].camera ); + _renderer.render( _scene, _views[ 1 ].camera ); + + _renderer.setViewport( 0, 0, _views[ 2 ].width, _views[ 2 ].height ); + _renderer.render( _sceneHelpers, _views[ 2 ].camera ); + _renderer.render( _scene, _views[ 2 ].camera ); + + _renderer.setViewport( _width * _xhalf, 0, _views[ 3 ].width, _views[ 3 ].height ); + _renderer.render( _sceneHelpers, _views[ 3 ].camera ); + _renderer.render( _scene, _views[ 3 ].camera ); + + }; + +} diff --git a/gui/js/UI.js b/gui/js/UI.js new file mode 100644 index 00000000..270a6989 --- /dev/null +++ b/gui/js/UI.js @@ -0,0 +1,30 @@ +var UI = function () { + + var _domElement = document.createElement( 'div' ); + _domElement.style.position = 'absolute'; + + var _viewports = new UI.Viewports(); + _domElement.appendChild( _viewports.getDOMElement() ); + + var _toolbar = new UI.Toolbar(); + _domElement.appendChild( _toolbar.getDOMElement() ); + + this.getDOMElement = function () { + + return _domElement; + + } + + this.setSize = function ( width, height ) { + + _domElement.style.width = width + 'px'; + _domElement.style.height = height + 'px'; + + _viewports.setSize( width, height - 50 ); + + _toolbar.setPosition( 0, height - 50 ); + _toolbar.setSize( width, 50 ); + + } + +}; diff --git a/gui/js/libs/signals.min.js b/gui/js/libs/signals.min.js new file mode 100644 index 00000000..9a6c3723 --- /dev/null +++ b/gui/js/libs/signals.min.js @@ -0,0 +1,8 @@ +/*! + * JS Signals + * Released under the MIT license + * @author Miller Medeiros + * @version 0.6.3 + * @build 187 (07/11/2011 10:14 AM) + */ +(function(d){var b={VERSION:"0.6.3"};function c(i,h,f,g,e){this._listener=h;this._isOnce=f;this.context=g;this._signal=i;this._priority=e||0}c.prototype={active:true,params:null,execute:function(e){var g,f;if(this.active&&!!this._listener){f=this.params?this.params.concat(e):e;g=this._listener.apply(this.context,f);if(this._isOnce){this.detach()}}return g},detach:function(){return this.isBound()?this._signal.remove(this._listener):null},isBound:function(){return(!!this._signal&&!!this._listener)},getListener:function(){return this._listener},_destroy:function(){delete this._signal;delete this._listener;delete this.context},isOnce:function(){return this._isOnce},toString:function(){return"[SignalBinding isOnce: "+this._isOnce+", isBound: "+this.isBound()+", active: "+this.active+"]"}};function a(e,f){if(typeof e!=="function"){throw new Error("listener is a required param of {fn}() and should be a Function.".replace("{fn}",f))}}b.Signal=function(){this._bindings=[]};b.Signal.prototype={_shouldPropagate:true,active:true,_registerListener:function(i,h,g,f){var e=this._indexOfListener(i),j;if(e!==-1){j=this._bindings[e];if(j.isOnce()!==h){throw new Error("You cannot add"+(h?"":"Once")+"() then add"+(!h?"":"Once")+"() the same listener without removing the relationship first.")}}else{j=new c(this,i,h,g,f);this._addBinding(j)}return j},_addBinding:function(e){var f=this._bindings.length;do{--f}while(this._bindings[f]&&e._priority<=this._bindings[f]._priority);this._bindings.splice(f+1,0,e)},_indexOfListener:function(e){var f=this._bindings.length;while(f--){if(this._bindings[f]._listener===e){return f}}return -1},add:function(g,f,e){a(g,"add");return this._registerListener(g,false,f,e)},addOnce:function(g,f,e){a(g,"addOnce");return this._registerListener(g,true,f,e)},remove:function(f){a(f,"remove");var e=this._indexOfListener(f);if(e!==-1){this._bindings[e]._destroy();this._bindings.splice(e,1)}return f},removeAll:function(){var e=this._bindings.length;while(e--){this._bindings[e]._destroy()}this._bindings.length=0},getNumListeners:function(){return this._bindings.length},halt:function(){this._shouldPropagate=false},dispatch:function(f){if(!this.active){return}var e=Array.prototype.slice.call(arguments),h=this._bindings.slice(),g=this._bindings.length;this._shouldPropagate=true;do{g--}while(h[g]&&this._shouldPropagate&&h[g].execute(e)!==false)},dispose:function(){this.removeAll();delete this._bindings},toString:function(){return"[Signal active: "+this.active+" numListeners: "+this.getNumListeners()+"]"}};d.signals=b}(window||this)); \ No newline at end of file