|
|
import * as THREE from './lib/three.module.js';
|
|
|
import { OrbitControls } from './lib/OrbitControls.js';
|
|
|
//import { OrthographicTrackballControls } from './lib/OrthographicTrackballControls.js';
|
|
|
import { TransformControls } from './lib/TransformControls.js';
|
|
|
import {matmul2, euler_angle_to_rotate_matrix} from "./util.js"
|
|
|
|
|
|
|
|
|
function ViewManager(mainViewContainer, webglScene, webglMainScene, renderer, globalRenderFunc, on_box_changed, cfg){
|
|
|
|
|
|
this.mainViewContainer = mainViewContainer;
|
|
|
this.globalRenderFunc = globalRenderFunc;
|
|
|
this.webglScene = webglScene;
|
|
|
this.webglMainScene = webglMainScene;
|
|
|
this.renderer = renderer;
|
|
|
|
|
|
|
|
|
this.mainView = cfg.disableMainView?null:create_main_view(webglMainScene, renderer, this.globalRenderFunc, this.mainViewContainer, on_box_changed);
|
|
|
|
|
|
this.boxViewList = [];
|
|
|
|
|
|
this.addBoxView = function(subviewsUi){
|
|
|
let boxview = new BoxView(subviewsUi, this.mainViewContainer, this.webglScene, this.renderer, this);
|
|
|
this.boxViewList.push(boxview);
|
|
|
return boxview;
|
|
|
}
|
|
|
|
|
|
this.onWindowResize = function(){
|
|
|
if (this.mainView)
|
|
|
this.mainView.onWindowResize();
|
|
|
};
|
|
|
|
|
|
this.render = function(){
|
|
|
console.log("render verything");
|
|
|
if (this.mainView)
|
|
|
this.mainView.renderAll();
|
|
|
|
|
|
this.boxViewList.forEach(v=>{
|
|
|
//if (v.ui.style.display != 'none') //we have pseudo box now. render as commanded.
|
|
|
v.render()
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
this.setColorScheme = function(){
|
|
|
let scheme = document.documentElement.className;
|
|
|
if (scheme == "theme-dark")
|
|
|
{
|
|
|
this.mainView.backgroundColor = new THREE.Color( 0.0, 0.0, 0.0 );
|
|
|
this.boxViewList.forEach(v=>{
|
|
|
v.views[0].backgroundColor = new THREE.Color( 0.1, 0.05, 0.05 );
|
|
|
v.views[1].backgroundColor = new THREE.Color( 0.05, 0.1, 0.05 );
|
|
|
v.views[2].backgroundColor = new THREE.Color( 0.05, 0.05, 0.1 );
|
|
|
});
|
|
|
}
|
|
|
else{
|
|
|
this.mainView.backgroundColor = new THREE.Color( 1.0, 1.0, 1.0 );
|
|
|
this.boxViewList.forEach(v=>{
|
|
|
v.views[0].backgroundColor = new THREE.Color( 0.95, 0.9, 0.9 );
|
|
|
v.views[1].backgroundColor = new THREE.Color( 0.9, 0.95, 0.9 );
|
|
|
v.views[2].backgroundColor = new THREE.Color( 0.9, 0.9, 0.95 );
|
|
|
})
|
|
|
}
|
|
|
};
|
|
|
|
|
|
//this.setColorScheme();
|
|
|
|
|
|
// no public funcs below
|
|
|
function create_main_view(scene, renderer, globalRenderFunc, container, on_box_changed){
|
|
|
var view ={};
|
|
|
|
|
|
view.backgroundColor= (document.documentElement.className == "theme-dark") ? new THREE.Color( 0.0, 0.0, 0.0 ) : new THREE.Color( 1.0, 1.0, 1.0 );
|
|
|
view.zoom_ratio = 1.0; //useless for mainview
|
|
|
|
|
|
let camera = new THREE.PerspectiveCamera( 65, container.clientWidth / container.clientHeight, 1, 500 );
|
|
|
camera.position.x = 0;
|
|
|
camera.position.z = 50;
|
|
|
camera.position.y = 0;
|
|
|
camera.up.set( 0, 0, 1);
|
|
|
camera.lookAt( 0, 0, 0 );
|
|
|
camera.name = "main view camera";
|
|
|
view.camera_perspective = camera;
|
|
|
view.camera = camera;
|
|
|
|
|
|
// make a blind camera to clean background when batch editing is enabled.
|
|
|
camera = new THREE.PerspectiveCamera( 65, container.clientWidth / container.clientHeight, 1, 500 );
|
|
|
camera.position.x = -1000;
|
|
|
camera.position.z = -1000;
|
|
|
camera.position.y = -1000;
|
|
|
camera.up.set( 0, 0, 1);
|
|
|
camera.lookAt( 0, 0, 0 );
|
|
|
view.blind_camera = camera;
|
|
|
|
|
|
|
|
|
view.container = container;
|
|
|
view.renderer = renderer;
|
|
|
view.scene = scene;
|
|
|
|
|
|
view.active = true;
|
|
|
|
|
|
view.disable = function(){
|
|
|
this.active = false;
|
|
|
this.renderWithCamera(this.blind_camera);
|
|
|
};
|
|
|
|
|
|
view.dumpPose = function()
|
|
|
{
|
|
|
console.log(this.camera.position, this.camera.rotation);
|
|
|
};
|
|
|
|
|
|
view.enable = function(){
|
|
|
this.active = true;
|
|
|
this.render();
|
|
|
};
|
|
|
|
|
|
//var cameraOrthoHelper = new THREE.CameraHelper( camera );
|
|
|
//cameraOrthoHelper.visible=true;
|
|
|
//scene.add( cameraOrthoHelper );
|
|
|
|
|
|
view.render=function(){
|
|
|
console.log("render mainview.");
|
|
|
if (this.active){
|
|
|
//this.switch_camera(false);
|
|
|
this.renderWithCamera(this.camera);
|
|
|
}
|
|
|
// else
|
|
|
// {
|
|
|
// this.renderWithCamera(this.blind_camera);
|
|
|
// }
|
|
|
};
|
|
|
|
|
|
view.renderAll = function(){
|
|
|
console.log("render mainview.");
|
|
|
if (this.active){
|
|
|
//this.switch_camera(false);
|
|
|
this.renderWithCamera(this.camera);
|
|
|
}
|
|
|
else
|
|
|
{
|
|
|
this.renderWithCamera(this.blind_camera);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
view.clearView = function(){
|
|
|
this.renderWithCamera(this.blind_camera);
|
|
|
};
|
|
|
|
|
|
view.renderWithCamera = function(camera){
|
|
|
var left = 0;
|
|
|
var bottom = 0;
|
|
|
var width = this.container.scrollWidth;
|
|
|
var height = this.container.scrollHeight;
|
|
|
|
|
|
// update viewport, so the operating lines over these views
|
|
|
// will be updated in time.
|
|
|
|
|
|
|
|
|
//console.log(left,bottom, width, height);
|
|
|
|
|
|
this.renderer.setViewport( left, bottom, width, height );
|
|
|
this.renderer.setScissor( left, bottom, width, height );
|
|
|
this.renderer.setClearColor(view.backgroundColor );
|
|
|
this.renderer.setScissorTest( true );
|
|
|
|
|
|
this.renderer.render( this.scene, camera );
|
|
|
};
|
|
|
|
|
|
|
|
|
var orbit_perspective = new OrbitControls( view.camera_perspective, view.container );
|
|
|
orbit_perspective.update();
|
|
|
orbit_perspective.addEventListener( 'change', globalRenderFunc );
|
|
|
//orbit_perspective.enabled = true;
|
|
|
view.orbit_perspective = orbit_perspective;
|
|
|
|
|
|
|
|
|
var transform_control = new TransformControls(view.camera_perspective , view.container );
|
|
|
transform_control.setSpace("local");
|
|
|
transform_control.addEventListener( 'change', globalRenderFunc );
|
|
|
transform_control.addEventListener( 'objectChange', function(e){on_box_changed(e.target.object);});
|
|
|
|
|
|
transform_control.addEventListener( 'dragging-changed', function ( event ) {
|
|
|
view.orbit_perspective.enabled = ! event.value;
|
|
|
} );
|
|
|
transform_control.visible = false;
|
|
|
//transform_control.enabled = false;
|
|
|
scene.add( transform_control );
|
|
|
view.transform_control_perspective = transform_control;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var width = container.clientWidth;
|
|
|
var height = container.clientHeight;
|
|
|
var asp = width/height;
|
|
|
|
|
|
//camera = new THREE.OrthographicCamera(-800*asp, 800*asp, 800, -800, -800, 800);
|
|
|
// camera.position.x = 0;
|
|
|
// camera.position.z = 0;
|
|
|
// camera.position.y = 0;
|
|
|
// camera.up.set( 1, 0, 0);
|
|
|
// camera.lookAt( 0, 0, -3 );
|
|
|
|
|
|
//camera = new THREE.OrthographicCamera( container.clientWidth / - 2, container.clientWidth / 2, container.clientHeight / 2, container.clientHeight / - 2, -400, 400 );
|
|
|
|
|
|
// camera = new THREE.OrthographicCamera(-asp*200, asp*200, 200, -200, -200, 200 );
|
|
|
// camera.position.z = 50;
|
|
|
|
|
|
|
|
|
// var cameraOrthoHelper = new THREE.CameraHelper( camera );
|
|
|
// cameraOrthoHelper.visible=true;
|
|
|
// scene.add( cameraOrthoHelper );
|
|
|
|
|
|
|
|
|
//view.camera_orth = camera;
|
|
|
|
|
|
// var orbit_orth = new OrbitControls( view.camera_orth, view.container );
|
|
|
// orbit_orth.update();
|
|
|
// orbit_orth.addEventListener( 'change', render );
|
|
|
// orbit_orth.enabled = false;
|
|
|
// view.orbit_orth = orbit_orth;
|
|
|
|
|
|
// var orbit_orth = new OrthographicTrackballControls( view.camera_orth, view.container );
|
|
|
// orbit_orth.rotateSpeed = 1.0;
|
|
|
// orbit_orth.zoomSpeed = 1.2;
|
|
|
// orbit_orth.noZoom = false;
|
|
|
// orbit_orth.noPan = false;
|
|
|
// orbit_orth.noRotate = false;
|
|
|
// orbit_orth.staticMoving = true;
|
|
|
|
|
|
// orbit_orth.dynamicDampingFactor = 0.3;
|
|
|
// orbit_orth.keys = [ 65, 83, 68 ];
|
|
|
// orbit_orth.addEventListener( 'change', globalRenderFunc );
|
|
|
// orbit_orth.enabled=true;
|
|
|
// view.orbit_orth = orbit_orth;
|
|
|
|
|
|
// transform_control = new TransformControls(view.camera_orth, view.container );
|
|
|
// transform_control.setSpace("local");
|
|
|
// transform_control.addEventListener( 'change', globalRenderFunc );
|
|
|
// transform_control.addEventListener( 'objectChange', function(e){on_box_changed(e.target.object);} );
|
|
|
|
|
|
|
|
|
// transform_control.addEventListener( 'dragging-changed', function ( event ) {
|
|
|
// view.orbit_orth.enabled = ! event.value;
|
|
|
// } );
|
|
|
|
|
|
|
|
|
// transform_control.visible = false;
|
|
|
// //transform_control.enabled = true;
|
|
|
// //scene.add( transform_control );
|
|
|
|
|
|
// view.transform_control_orth = transform_control;
|
|
|
|
|
|
|
|
|
|
|
|
view.camera = view.camera_perspective;
|
|
|
view.orbit = view.orbit_perspective;
|
|
|
view.transform_control = view.transform_control_perspective;
|
|
|
|
|
|
|
|
|
view.switch_camera = function(birdseye)
|
|
|
{
|
|
|
|
|
|
if (!birdseye && (this.camera === this.camera_orth)){
|
|
|
this.camera = this.camera_perspective;
|
|
|
this.orbit_orth.enabled=false;
|
|
|
this.orbit_perspective.enabled=true;
|
|
|
this.orbit = this.orbit_perspective;
|
|
|
|
|
|
|
|
|
this.transform_control_perspective.detach();
|
|
|
this.transform_control_orth.detach();
|
|
|
|
|
|
this.transform_control_orth.enabled=false;
|
|
|
this.transform_control_perspective.enabled=true;
|
|
|
//this.transform_control_perspective.visible = false;
|
|
|
//this.transform_control_orth.visible = false;
|
|
|
this.transform_control = this.transform_control_perspective;
|
|
|
}
|
|
|
else if (birdseye && (this.camera === this.camera_perspective))
|
|
|
{
|
|
|
this.camera = this.camera_orth;
|
|
|
this.orbit_orth.enabled=true;
|
|
|
this.orbit_perspective.enabled=false;
|
|
|
this.orbit = this.orbit_orth;
|
|
|
|
|
|
this.transform_control_perspective.detach();
|
|
|
this.transform_control_orth.detach();
|
|
|
this.transform_control_orth.enabled=true;
|
|
|
this.transform_control_perspective.enabled=false;
|
|
|
this.transform_control = this.transform_control_orth;
|
|
|
}
|
|
|
|
|
|
this.camera.updateProjectionMatrix();
|
|
|
};
|
|
|
|
|
|
view.reset_camera = function(){
|
|
|
var camera = this.camera_perspective;
|
|
|
camera.position.x = 0;
|
|
|
camera.position.z = 50;
|
|
|
camera.position.y = 0;
|
|
|
camera.up.set( 0, 0, 1);
|
|
|
camera.lookAt( 0, 0, 0 );
|
|
|
camera.updateProjectionMatrix();
|
|
|
|
|
|
this.orbit_perspective.reset(); // this func will call render()
|
|
|
};
|
|
|
|
|
|
view.look_at = function(p){
|
|
|
if (this.orbit === this.orbit_perspective){
|
|
|
this.orbit.target.x=p.x;
|
|
|
this.orbit.target.y=p.y;
|
|
|
this.orbit.target.z=p.z;
|
|
|
this.orbit.update();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
view.onWindowResize = function(){
|
|
|
|
|
|
|
|
|
var asp = container.clientWidth/container.clientHeight;
|
|
|
// this.camera_orth.left = -asp*200;
|
|
|
// this.camera_orth.right = asp*200;
|
|
|
// this.camera_orth.top = 200;
|
|
|
// this.camera_orth.bottom = -200
|
|
|
// this.camera_orth.updateProjectionMatrix();
|
|
|
|
|
|
// this.orbit_orth.handleResize();
|
|
|
// this.orbit_orth.update();
|
|
|
|
|
|
this.camera_perspective.aspect = container.clientWidth / container.clientHeight;
|
|
|
this.camera_perspective.updateProjectionMatrix();
|
|
|
|
|
|
};
|
|
|
|
|
|
view.reset_birdseye = function(){
|
|
|
//this.orbit_orth.reset(); //
|
|
|
};
|
|
|
view.rotate_birdseye = function(){
|
|
|
//this.camera_orth.up.set( 1, 0, 0);
|
|
|
//this.orbit_orth.update();
|
|
|
}
|
|
|
view.detach_control = function(){
|
|
|
this.transform_control.detach();
|
|
|
}
|
|
|
|
|
|
view.target0 = view.orbit.target.clone();
|
|
|
view.position0 = view.camera.position.clone();
|
|
|
view.zoom0 = view.camera.zoom;
|
|
|
view.scale0 = null;
|
|
|
|
|
|
view.save_orbit_state = function(highlight_obj_scale){
|
|
|
this.target0.copy( this.orbit.target );
|
|
|
this.position0.copy( this.camera.position );
|
|
|
this.zoom0 = this.camera.zoom;
|
|
|
this.scale0 = {x: highlight_obj_scale.x, y: highlight_obj_scale.y, z: highlight_obj_scale.z};
|
|
|
}
|
|
|
|
|
|
view.restore_relative_orbit_state = function(highlight_obj_scale){
|
|
|
|
|
|
if (view.scale0){
|
|
|
// restore last viewpoint
|
|
|
|
|
|
var obj_size = Math.sqrt(view.scale0.x*view.scale0.x + view.scale0.y*view.scale0.y + view.scale0.z*view.scale0.z);
|
|
|
var target_obj_size = Math.sqrt(highlight_obj_scale.x*highlight_obj_scale.x + highlight_obj_scale.y*highlight_obj_scale.y + highlight_obj_scale.z*highlight_obj_scale.z);
|
|
|
var ratio = target_obj_size/obj_size;
|
|
|
|
|
|
|
|
|
this.camera.position.x = this.orbit.target.x + (this.position0.x - this.target0.x)*ratio;
|
|
|
this.camera.position.y = this.orbit.target.y + (this.position0.y - this.target0.y)*ratio;
|
|
|
this.camera.position.z = this.orbit.target.z + (this.position0.z - this.target0.z)*ratio;
|
|
|
|
|
|
this.camera.zoom = this.zoom0;
|
|
|
} else {
|
|
|
// not saved yet, set default viewpoint
|
|
|
this.camera.position.set(
|
|
|
this.orbit.target.x + highlight_obj_scale.x*3,
|
|
|
this.orbit.target.y + highlight_obj_scale.y*3,
|
|
|
this.orbit.target.z + highlight_obj_scale.z*3);
|
|
|
}
|
|
|
// target is set
|
|
|
}
|
|
|
|
|
|
|
|
|
return view;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function BoxView(ui, mainViewContainer, scene, renderer, viewManager){
|
|
|
|
|
|
|
|
|
this.viewManager = viewManager;
|
|
|
this.mainViewContainer = mainViewContainer;
|
|
|
this.ui = ui; //sub-views
|
|
|
this.baseOffset = function(){
|
|
|
// ui offset
|
|
|
return {
|
|
|
top: this.ui.offsetTop,
|
|
|
left: this.ui.offsetLeft
|
|
|
}
|
|
|
};
|
|
|
|
|
|
|
|
|
this.defaultBox = {
|
|
|
position: {x: -100, y: -100, z: 0},
|
|
|
rotation: {x: 0, y: 0, z: 0},
|
|
|
scale: {x: 5, y: 5, z: 5},
|
|
|
};
|
|
|
|
|
|
this.box = this.defaultBox;
|
|
|
|
|
|
this.attachBox = function(box){
|
|
|
|
|
|
this.box = box;
|
|
|
|
|
|
this.views.forEach(v=>{
|
|
|
//this.box.world.webglGroup.add(v.camera);
|
|
|
//this.box.world.webglGroup.add(v.cameraHelper);
|
|
|
|
|
|
this.box.world.webglGroup.add(v.cameraContainer);
|
|
|
this.box.world.webglGroup.add(v.cameraHelper); //seems camerahelp shold be added to top-most scene only.
|
|
|
});
|
|
|
|
|
|
this.onBoxChanged();
|
|
|
};
|
|
|
this.detach = function(){
|
|
|
this.box = this.defaultBox;
|
|
|
this.onBoxChanged();
|
|
|
};
|
|
|
|
|
|
this.onBoxChanged=function(dontRender){
|
|
|
this.updateCameraPose(this.box);
|
|
|
this.updateCameraRange(this.box);
|
|
|
|
|
|
if (!dontRender)
|
|
|
this.render();
|
|
|
};
|
|
|
|
|
|
this.updateCameraPose = function(box){
|
|
|
this.views.forEach((v)=>v.updateCameraPose(box));
|
|
|
};
|
|
|
|
|
|
this.updateCameraRange = function(box){
|
|
|
this.views.forEach((v)=>v.updateCameraRange(box));
|
|
|
};
|
|
|
|
|
|
this.hidden = function(){
|
|
|
return this.ui.style.display == 'none';
|
|
|
};
|
|
|
|
|
|
this.render = function(){
|
|
|
if (!this.hidden())
|
|
|
this.views.forEach((v)=>v.render());
|
|
|
}
|
|
|
|
|
|
var scope = this;
|
|
|
|
|
|
|
|
|
scope.projViewProto = {
|
|
|
render(){
|
|
|
let vp = this.getViewPort();
|
|
|
|
|
|
this.renderer.setViewport( vp.left, vp.bottom, vp.width, vp.height );
|
|
|
this.renderer.setScissor( vp.left, vp.bottom, vp.width, vp.height );
|
|
|
this.renderer.setClearColor(this.backgroundColor );
|
|
|
this.renderer.setScissorTest( true );
|
|
|
this.renderer.render( this.scene, this.camera );
|
|
|
},
|
|
|
|
|
|
getViewPort(){
|
|
|
return {
|
|
|
left : this.placeHolderUi.offsetLeft + scope.baseOffset().left,
|
|
|
bottom : this.container.scrollHeight - (scope.baseOffset().top + this.placeHolderUi.offsetTop + this.placeHolderUi.clientHeight),
|
|
|
width : this.placeHolderUi.clientWidth,
|
|
|
height : this.placeHolderUi.clientHeight,
|
|
|
zoom_ratio: this.zoom_ratio,
|
|
|
}
|
|
|
},
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
this.views = [
|
|
|
createTopView(scene, renderer, mainViewContainer),
|
|
|
createSideView(scene, renderer, mainViewContainer),
|
|
|
createBackView(scene, renderer, mainViewContainer),
|
|
|
];
|
|
|
|
|
|
function createTopView(scene, renderer, container){
|
|
|
let view = Object.create(scope.projViewProto);
|
|
|
view.name="topview";
|
|
|
view.zoom_ratio = 1.0;
|
|
|
|
|
|
view.backgroundColor = (document.documentElement.className == "theme-dark") ? new THREE.Color( 0.1, 0.05, 0.05 ) : new THREE.Color( 0.95, 0.9, 0.9 );
|
|
|
view.container = container;
|
|
|
view.scene = scene;
|
|
|
view.renderer = renderer;
|
|
|
view.placeHolderUi = ui.querySelector("#z-view-manipulator");
|
|
|
|
|
|
//var camera = new THREE.PerspectiveCamera( 65, container.clientWidth / container.clientHeight, 1, 800 );
|
|
|
var width = container.clientWidth;
|
|
|
var height = container.clientHeight;
|
|
|
var asp = width/height;
|
|
|
|
|
|
var camera = new THREE.OrthographicCamera( -3*asp, 3*asp, 3, -3, -3, 3 );
|
|
|
|
|
|
var cameraOrthoHelper = new THREE.CameraHelper( camera );
|
|
|
cameraOrthoHelper.visible=false;
|
|
|
//scene.add( cameraOrthoHelper );
|
|
|
view.cameraHelper = cameraOrthoHelper;
|
|
|
|
|
|
camera.position.set(0,0,0);
|
|
|
camera.up.set( 1, 0, 0);
|
|
|
camera.lookAt( 0, 0, -3 );
|
|
|
|
|
|
view.camera = camera;
|
|
|
view.cameraContainer = new THREE.Group();
|
|
|
view.cameraContainer.name = "topview-camera";
|
|
|
view.cameraContainer.add(camera);
|
|
|
|
|
|
|
|
|
view.updateCameraPose=function(box){
|
|
|
var p = box.position;
|
|
|
var r = box.rotation;
|
|
|
//console.log(r);
|
|
|
//
|
|
|
this.cameraContainer.position.set(p.x, p.y, p.z);
|
|
|
this.cameraContainer.rotation.set(r.x, r.y, r.z);
|
|
|
};
|
|
|
|
|
|
view.updateCameraRange=function(box){
|
|
|
|
|
|
var exp_camera_width, exp_camera_height, exp_camera_clip;
|
|
|
|
|
|
//view.width = 0.2;//params["side view width"];
|
|
|
|
|
|
var view_width = view.placeHolderUi.clientWidth;
|
|
|
var view_height = view.placeHolderUi.clientHeight;
|
|
|
|
|
|
exp_camera_height = box.scale.x*1.5*view.zoom_ratio;
|
|
|
exp_camera_width = box.scale.y*1.5*view.zoom_ratio;
|
|
|
exp_camera_clip = box.scale.z + 0.8;
|
|
|
|
|
|
if (exp_camera_width/exp_camera_height > view_width/view_height){
|
|
|
//increase height
|
|
|
exp_camera_height = exp_camera_width * view_height/view_width;
|
|
|
}
|
|
|
else
|
|
|
{
|
|
|
exp_camera_width = exp_camera_height * view_width/view_height;
|
|
|
}
|
|
|
|
|
|
this.camera.top = exp_camera_height/2;
|
|
|
this.camera.bottom = exp_camera_height/-2;
|
|
|
this.camera.right = exp_camera_width/2;
|
|
|
this.camera.left = exp_camera_width/-2;
|
|
|
|
|
|
this.camera.near = exp_camera_clip/-2;
|
|
|
this.camera.far = exp_camera_clip/2;
|
|
|
|
|
|
// this.camera.scale.x = box.scale.x;
|
|
|
// this.camera.scale.y = box.scale.y;
|
|
|
// this.camera.scale.z = box.scale.z;
|
|
|
//camera.aspect = view_width / view_height;
|
|
|
this.camera.updateProjectionMatrix();
|
|
|
this.cameraHelper.update();
|
|
|
};
|
|
|
|
|
|
return view;
|
|
|
}
|
|
|
|
|
|
|
|
|
function createSideView(scene, renderer, container){
|
|
|
let view = Object.create(scope.projViewProto);
|
|
|
view.name="sideview";
|
|
|
view.zoom_ratio = 1.0;
|
|
|
//view.backgroundColor=new THREE.Color( 0.1, 0.2, 0.1 );
|
|
|
view.backgroundColor=(document.documentElement.className == "theme-dark") ? new THREE.Color( 0.05, 0.1, 0.05 ) : new THREE.Color( 0.9, 0.95, 0.9 );
|
|
|
view.container = container;
|
|
|
view.scene = scene;
|
|
|
view.renderer = renderer;
|
|
|
view.placeHolderUi = ui.querySelector("#y-view-manipulator");
|
|
|
|
|
|
//var camera = new THREE.PerspectiveCamera( 65, container.clientWidth / container.clientHeight, 1, 800 );
|
|
|
var width = container.clientWidth;
|
|
|
var height = container.clientHeight;
|
|
|
var asp = width/height;
|
|
|
|
|
|
var camera = new THREE.OrthographicCamera( -3*asp, 3*asp, 3, -3, -3, 3 );
|
|
|
|
|
|
var cameraOrthoHelper = new THREE.CameraHelper( camera );
|
|
|
cameraOrthoHelper.visible=false;
|
|
|
//scene.add( cameraOrthoHelper );
|
|
|
view["cameraHelper"] = cameraOrthoHelper;
|
|
|
|
|
|
view.cameraContainer = new THREE.Group();
|
|
|
view.cameraContainer.name = "sideview-camera";
|
|
|
|
|
|
view.cameraContainer.position.x = 0;
|
|
|
view.cameraContainer.position.z = 0;
|
|
|
view.cameraContainer.position.y = 0;
|
|
|
|
|
|
view.cameraContainer.rotation.x=0; //Math.PI/2;
|
|
|
view.cameraContainer.rotation.y=0;
|
|
|
view.cameraContainer.rotation.z=0;
|
|
|
|
|
|
//view.cameraContainer.updateProjectionMatrix();
|
|
|
|
|
|
view.cameraContainer.add(camera);
|
|
|
|
|
|
camera.position.set( 0, 0, 0);
|
|
|
camera.up.set(0,0,1);
|
|
|
camera.lookAt( 0, 3, 0 );
|
|
|
|
|
|
//camera.up.set( 0, 1, 0);
|
|
|
//camera.lookAt( 0, 0, -3 );
|
|
|
|
|
|
|
|
|
// camera should not be changed again?
|
|
|
view.camera = camera;
|
|
|
|
|
|
view.updateCameraPose=function(box){
|
|
|
var p = box.position;
|
|
|
var r = box.rotation;
|
|
|
|
|
|
view.cameraContainer.position.x = p.x;
|
|
|
view.cameraContainer.position.y = p.y;
|
|
|
view.cameraContainer.position.z = p.z;
|
|
|
|
|
|
|
|
|
view.cameraContainer.rotation.x=r.x;
|
|
|
view.cameraContainer.rotation.y=r.y;
|
|
|
view.cameraContainer.rotation.z=r.z;
|
|
|
//view.cameraContainer.updateProjectionMatrix();
|
|
|
|
|
|
// var trans_matrix = euler_angle_to_rotate_matrix(r, p);
|
|
|
|
|
|
|
|
|
// this.camera.position.x= p.x;
|
|
|
// this.camera.position.y= p.y;
|
|
|
// this.camera.position.z= p.z;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// var up = matmul2(trans_matrix, [0, 0, 1, 0], 4);
|
|
|
// this.camera.up.set( up[0], up[1], up[2]);
|
|
|
// var at = matmul2(trans_matrix, [0, 1, 0, 1], 4);
|
|
|
// this.camera.lookAt( at[0], at[1], at[2] );
|
|
|
|
|
|
|
|
|
// this.camera.updateProjectionMatrix();
|
|
|
// this.cameraHelper.update();
|
|
|
};
|
|
|
|
|
|
view.updateCameraRange=function(box){
|
|
|
|
|
|
var exp_camera_width, exp_camera_height, exp_camera_clip;
|
|
|
|
|
|
//view.width = 0.2;//params["side view width"];
|
|
|
|
|
|
var view_width = view.placeHolderUi.clientWidth;
|
|
|
var view_height = view.placeHolderUi.clientHeight;
|
|
|
|
|
|
exp_camera_width = box.scale.x*1.5*view.zoom_ratio;
|
|
|
exp_camera_height = box.scale.z*1.5*view.zoom_ratio;
|
|
|
|
|
|
exp_camera_clip = box.scale.y*1.2;
|
|
|
|
|
|
if (exp_camera_width/exp_camera_height > view_width/view_height){
|
|
|
//increase height
|
|
|
exp_camera_height = exp_camera_width * view_height/view_width;
|
|
|
}
|
|
|
else
|
|
|
{
|
|
|
exp_camera_width = exp_camera_height * view_width/view_height;
|
|
|
}
|
|
|
|
|
|
this.camera.top = exp_camera_height/2;
|
|
|
this.camera.bottom = exp_camera_height/-2;
|
|
|
this.camera.right = exp_camera_width/2;
|
|
|
this.camera.left = exp_camera_width/-2;
|
|
|
|
|
|
this.camera.near = exp_camera_clip/-2;
|
|
|
this.camera.far = exp_camera_clip/2;
|
|
|
|
|
|
//camera.aspect = view_width / view_height;
|
|
|
this.camera.updateProjectionMatrix();
|
|
|
this.cameraHelper.update();
|
|
|
};
|
|
|
|
|
|
return view;
|
|
|
}
|
|
|
|
|
|
function createBackView(scene, renderer, container){
|
|
|
let view = Object.create(scope.projViewProto);
|
|
|
view.name="backview";
|
|
|
view.zoom_ratio = 1.0;
|
|
|
//view.backgroundColor=new THREE.Color( 0.2, 0.1, 0.1 );
|
|
|
view.backgroundColor= (document.documentElement.className == "theme-dark") ? new THREE.Color( 0.05, 0.05, 0.1 ) : new THREE.Color( 0.9, 0.9, 0.95 );
|
|
|
view.container = container;
|
|
|
view.scene = scene;
|
|
|
view.renderer = renderer;
|
|
|
view.placeHolderUi = ui.querySelector("#x-view-manipulator");
|
|
|
|
|
|
//var camera = new THREE.PerspectiveCamera( 65, container.clientWidth / container.clientHeight, 1, 800 );
|
|
|
var width = container.clientWidth;
|
|
|
var height = container.clientHeight;
|
|
|
var asp = width/height;
|
|
|
|
|
|
var camera = new THREE.OrthographicCamera( -3*asp, 3*asp, 3, -3, -3, 3 );
|
|
|
|
|
|
var cameraOrthoHelper = new THREE.CameraHelper( camera );
|
|
|
cameraOrthoHelper.visible=false;
|
|
|
//scene.add( cameraOrthoHelper );
|
|
|
view["cameraHelper"] = cameraOrthoHelper;
|
|
|
|
|
|
camera.position.set(0,0,0);
|
|
|
camera.up.set(0,0,1);
|
|
|
camera.lookAt(3,0,0);
|
|
|
|
|
|
view.camera = camera;
|
|
|
view.cameraContainer = new THREE.Group();
|
|
|
view.cameraContainer.name = "backview-camera";
|
|
|
view.cameraContainer.position.set(0,0,0);
|
|
|
view.cameraContainer.rotation.set(0,0,0);
|
|
|
|
|
|
view.cameraContainer.add(camera);
|
|
|
|
|
|
view.updateCameraPose=function(box){
|
|
|
|
|
|
let p = box.position;
|
|
|
let r = box.rotation;
|
|
|
|
|
|
// let trans_matrix = euler_angle_to_rotate_matrix(r, p);
|
|
|
|
|
|
// this.camera.position.x= p.x;
|
|
|
// this.camera.position.y= p.y;
|
|
|
// this.camera.position.z= p.z;
|
|
|
|
|
|
// var up3 = matmul2(trans_matrix, [0, 0, 1, 0], 4);
|
|
|
// this.camera.up.set( up3[0], up3[1], up3[2]);
|
|
|
// var at3 = matmul2(trans_matrix, [1, 0, 0, 1], 4);
|
|
|
// this.camera.lookAt( at3[0], at3[1], at3[2] );
|
|
|
|
|
|
|
|
|
// this.camera.updateProjectionMatrix();
|
|
|
// this.cameraHelper.update();
|
|
|
|
|
|
this.cameraContainer.position.set(p.x, p.y, p.z);
|
|
|
this.cameraContainer.rotation.set(r.x, r.y, r.z);
|
|
|
};
|
|
|
|
|
|
view.updateCameraRange=function(box){
|
|
|
|
|
|
var exp_camera_width, exp_camera_height, exp_camera_clip;
|
|
|
|
|
|
//view.width = 0.2;//params["side view width"];
|
|
|
|
|
|
var view_width = view.placeHolderUi.clientWidth;
|
|
|
var view_height = view.placeHolderUi.clientHeight;
|
|
|
|
|
|
exp_camera_width = box.scale.y*1.5*view.zoom_ratio;
|
|
|
exp_camera_height = box.scale.z*1.5*view.zoom_ratio;
|
|
|
exp_camera_clip = box.scale.x*1.2;
|
|
|
|
|
|
if (exp_camera_width/exp_camera_height > view_width/view_height){
|
|
|
//increase height
|
|
|
exp_camera_height = exp_camera_width * view_height/view_width;
|
|
|
}
|
|
|
else
|
|
|
{
|
|
|
exp_camera_width = exp_camera_height * view_width/view_height;
|
|
|
}
|
|
|
|
|
|
this.camera.top = exp_camera_height/2;
|
|
|
this.camera.bottom = exp_camera_height/-2;
|
|
|
this.camera.right = exp_camera_width/2;
|
|
|
this.camera.left = exp_camera_width/-2;
|
|
|
|
|
|
this.camera.near = exp_camera_clip/-2;
|
|
|
this.camera.far = exp_camera_clip/2;
|
|
|
|
|
|
//camera.aspect = view_width / view_height;
|
|
|
this.camera.updateProjectionMatrix();
|
|
|
this.cameraHelper.update();
|
|
|
};
|
|
|
|
|
|
return view;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export {ViewManager} |