mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 04:56:01 +10:00
Merge remote-tracking branch 'remotes/mrdoob/dev' into dev
This commit is contained in:
alteredq
Binary file not shown.
+136
@@ -0,0 +1,136 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>three.js gui</title>
|
||||
<style>
|
||||
@font-face {
|
||||
|
||||
font-family: 'Inconsolata';
|
||||
src: url('files/inconsolata.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
pre {
|
||||
|
||||
font-family: 'Inconsolata';
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="text/javascript" src="../build/Three.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/libs/signals.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/UI.js"></script>
|
||||
<script type="text/javascript" src="js/UI.Viewports.js"></script>
|
||||
<script type="text/javascript" src="js/UI.Toolbar.js"></script>
|
||||
<script type="text/javascript" src="js/Code.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
var Signal = signals.Signal;
|
||||
|
||||
var signals = {
|
||||
|
||||
added: new Signal(),
|
||||
updated: new Signal()
|
||||
|
||||
};
|
||||
|
||||
var ui = new UI();
|
||||
document.body.appendChild( ui.getDOMElement() );
|
||||
|
||||
var code = new Code()
|
||||
document.body.appendChild( code.getDOMElement() );
|
||||
|
||||
var xhalf = 0.7;
|
||||
|
||||
var xr = document.createElement( 'div' );
|
||||
xr.style.position = 'absolute';
|
||||
xr.style.top = '0px';
|
||||
xr.style.width = '1px';
|
||||
xr.style.borderLeft = '1px solid #e0e0e0';
|
||||
// xr.style.backgroundColor = '#ffffff';
|
||||
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 / window.innerWidth ) );
|
||||
|
||||
update();
|
||||
|
||||
}
|
||||
|
||||
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.7;
|
||||
update();
|
||||
|
||||
}, false );
|
||||
document.body.appendChild( xr );
|
||||
|
||||
// Add Sphere
|
||||
|
||||
var geometry = new THREE.SphereGeometry( 75, 20, 10 );
|
||||
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
|
||||
var mesh = new THREE.Mesh( geometry, material );
|
||||
|
||||
geometry.code = 'new THREE.SphereGeometry( 75, 20, 10 )';
|
||||
material.code = 'new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } )';
|
||||
|
||||
signals.added.dispatch( mesh );
|
||||
|
||||
//
|
||||
|
||||
update();
|
||||
window.addEventListener( 'resize', function ( event ) { update() }, false );
|
||||
|
||||
function update() {
|
||||
|
||||
ui.setSize( window.innerWidth * xhalf, window.innerHeight );
|
||||
|
||||
code.setPosition( window.innerWidth * xhalf, 0 );
|
||||
code.setSize( window.innerWidth - ( window.innerWidth * xhalf ), window.innerHeight );
|
||||
|
||||
xr.style.left = ( window.innerWidth * xhalf ) + 'px';
|
||||
xr.style.height = window.innerHeight + 'px';
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+159
@@ -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';
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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';
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
@@ -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 );
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
@@ -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 );
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
Vendored
+8
@@ -0,0 +1,8 @@
|
||||
/*!
|
||||
* JS Signals <http://millermedeiros.github.com/js-signals/>
|
||||
* Released under the MIT license <http://www.opensource.org/licenses/mit-license.php>
|
||||
* @author Miller Medeiros <http://millermedeiros.com/>
|
||||
* @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));
|
||||
Reference in New Issue
Block a user