mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 04:56:01 +10:00
GUI: Replaced the 4 views with just a single perspective view.
This commit is contained in:
Mr.doob
+5
-7
@@ -38,7 +38,7 @@
|
||||
<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.Viewport.js"></script>
|
||||
<script type="text/javascript" src="js/UI.Toolbar.js"></script>
|
||||
<script type="text/javascript" src="js/Code.js"></script>
|
||||
<script type="text/javascript" src="js/Code.Templates.js"></script>
|
||||
@@ -69,8 +69,6 @@
|
||||
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 ) {
|
||||
|
||||
@@ -201,12 +199,12 @@
|
||||
|
||||
function update() {
|
||||
|
||||
ui.setSize( window.innerWidth * xhalf, window.innerHeight );
|
||||
ui.setSize( Math.floor( window.innerWidth * xhalf ), window.innerHeight );
|
||||
|
||||
code.setPosition( window.innerWidth * xhalf, 0 );
|
||||
code.setSize( window.innerWidth - ( window.innerWidth * xhalf ), window.innerHeight );
|
||||
code.setPosition( Math.floor( window.innerWidth * xhalf ), 0 );
|
||||
code.setSize( window.innerWidth - Math.floor( window.innerWidth * xhalf ), window.innerHeight );
|
||||
|
||||
xr.style.left = ( window.innerWidth * xhalf ) + 'px';
|
||||
xr.style.left = Math.floor( window.innerWidth * xhalf ) + 'px';
|
||||
xr.style.height = window.innerHeight + 'px';
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,187 @@
|
||||
UI.Viewport = function () {
|
||||
|
||||
var _width, _height;
|
||||
|
||||
var _HOVERED, _SELECTED;
|
||||
var _offset = new THREE.Vector3();
|
||||
|
||||
//
|
||||
|
||||
var _domElement = document.createElement( 'div' );
|
||||
_domElement.style.position = 'absolute';
|
||||
_domElement.style.backgroundColor = '#808080';
|
||||
|
||||
//
|
||||
|
||||
var _camera = new THREE.PerspectiveCamera( 50, 1, 1, 5000 );
|
||||
_camera.position.x = 500;
|
||||
_camera.position.y = 250;
|
||||
_camera.position.z = 500;
|
||||
|
||||
// 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 vector = new THREE.Vector3( ( event.clientX / _width ) * 2 - 1, - ( event.clientY / _height ) * 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 vector = new THREE.Vector3( ( event.clientX / _width ) * 2 - 1, - ( event.clientY / _height ) * 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 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 );
|
||||
|
||||
// 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;
|
||||
|
||||
_camera.aspect = width / height;
|
||||
_camera.updateProjectionMatrix();
|
||||
|
||||
_renderer.setSize( width, height );
|
||||
|
||||
_render();
|
||||
|
||||
};
|
||||
|
||||
var _render = function () {
|
||||
|
||||
_camera.lookAt( _scene.position );
|
||||
|
||||
_renderer.clear();
|
||||
_renderer.render( _sceneHelpers, _camera );
|
||||
_renderer.render( _scene, _camera );
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
@@ -1,454 +0,0 @@
|
||||
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.PerspectiveCamera( 50, 1, 1, 5000 ); // front
|
||||
_views[ 0 ].camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, - 2000, 2000 ); // front
|
||||
_views[ 0 ].camera.position.z = 1000;
|
||||
|
||||
//_views[ 2 ].camera = new THREE.PerspectiveCamera( 50, 1, 1, 5000 ); // top
|
||||
_views[ 2 ].camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, - 2000, 2000 ); // top
|
||||
_views[ 2 ].camera.position.y = 1000;
|
||||
_views[ 2 ].camera.rotation.x = - Math.PI / 2;
|
||||
|
||||
//_views[ 3 ].camera = new THREE.PerspectiveCamera( 50, 1, 1, 5000 ); // left
|
||||
_views[ 1 ].camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, - 2000, 2000 ); // left
|
||||
_views[ 1 ].camera.position.x = - 1000;
|
||||
_views[ 1 ].camera.rotation.y = -Math.PI / 2;
|
||||
|
||||
// var toLeft = function() {
|
||||
// this.rotation.x = 0;
|
||||
// this.rotation.y = - Math.PI / 2;
|
||||
// this.rotation.z = 0;
|
||||
// }
|
||||
//
|
||||
// var toRight = function() {
|
||||
// this.rotation.x = 0;
|
||||
// this.rotation.y = Math.PI / 2;
|
||||
// this.rotation.z = 0;
|
||||
// }
|
||||
//
|
||||
// var toTop = function() {
|
||||
// this.rotation.x = - Math.PI / 2;
|
||||
// this.rotation.y = 0;
|
||||
// this.rotation.z = 0;
|
||||
// }
|
||||
|
||||
_views[ 3 ].camera = new THREE.PerspectiveCamera( 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.left = _views[ 0 ].width / - 2;
|
||||
_views[ 0 ].camera.right = _views[ 0 ].width / 2;
|
||||
_views[ 0 ].camera.top = _views[ 0 ].height / 2;
|
||||
_views[ 0 ].camera.bottom = _views[ 0 ].height / - 2;
|
||||
_views[ 0 ].camera.updateProjectionMatrix();
|
||||
|
||||
_views[ 1 ].camera.left = _views[ 1 ].width / - 2;
|
||||
_views[ 1 ].camera.right = _views[ 1 ].width / 2;
|
||||
_views[ 1 ].camera.top = _views[ 1 ].height / 2;
|
||||
_views[ 1 ].camera.bottom = _views[ 1 ].height / - 2;
|
||||
_views[ 1 ].camera.updateProjectionMatrix();
|
||||
|
||||
_views[ 2 ].camera.left = _views[ 2 ].width / - 2;
|
||||
_views[ 2 ].camera.right = _views[ 2 ].width / 2;
|
||||
_views[ 2 ].camera.top = _views[ 2 ].height / 2;
|
||||
_views[ 2 ].camera.bottom = _views[ 2 ].height / - 2;
|
||||
_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';
|
||||
|
||||
//
|
||||
|
||||
_views[ 3 ].camera.lookAt( _scene.position );
|
||||
|
||||
_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 );
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
+3
-3
@@ -3,8 +3,8 @@ var UI = function () {
|
||||
var _domElement = document.createElement( 'div' );
|
||||
_domElement.style.position = 'absolute';
|
||||
|
||||
var _viewports = new UI.Viewports();
|
||||
_domElement.appendChild( _viewports.getDOMElement() );
|
||||
var _viewport = new UI.Viewport();
|
||||
_domElement.appendChild( _viewport.getDOMElement() );
|
||||
|
||||
var _toolbar = new UI.Toolbar();
|
||||
_domElement.appendChild( _toolbar.getDOMElement() );
|
||||
@@ -20,7 +20,7 @@ var UI = function () {
|
||||
_domElement.style.width = width + 'px';
|
||||
_domElement.style.height = height + 'px';
|
||||
|
||||
_viewports.setSize( width, height - 50 );
|
||||
_viewport.setSize( width, height - 50 );
|
||||
|
||||
_toolbar.setPosition( 0, height - 50 );
|
||||
_toolbar.setSize( width, 50 );
|
||||
|
||||
Reference in New Issue
Block a user