Skip to content

X
x3domlet
Commit 1d739c37 authored by Oleg Dzhimiev's avatar Oleg Dzhimiev
Browse files
Options

restructuring

parent 3ea9d6db
Show whitespace changes
Inline Side-by-side
Showing with 557 additions and 689 deletions
js/.directory
View file @ 1d739c37
[Dolphin] [Dolphin]
PreviewsShown=true PreviewsShown=true
SortRole=date Timestamp=2017,6,5,18,57,32
Timestamp=2017,5,23,18,34,17
Version=3 Version=3
ViewMode=1 ViewMode=1
js/leaflet/leaflet.camera-view-marker.js
View file @ 1d739c37
...@@ -358,7 +358,7 @@ ...@@ -358,7 +358,7 @@
this._basePoint.addTo(this._layerPaint).bringToFront(); this._basePoint.addTo(this._layerPaint).bringToFront();
var cHIcon = L.icon({ var cHIcon = L.icon({
iconUrl: 'js/images/crosshair.png', iconUrl: 'js/leaflet/images/crosshair.png',
iconSize: [32, 32] iconSize: [32, 32]
}); });
......
js/ui_functions.js 0 → 100644
View file @ 1d739c37
// general
/*
*
*/
function ui_showMessage(id,msg,bg){
if (bg != undefined){
$("#"+id).css({background:bg});
}
$("#"+id).show();
$("#"+id).html($("<div>").html(msg).css({
padding:"5px 10px"
})).show();
}
function ui_hideMessage(id){
$("#"+id).hide();
}
// scene (x3dom)
// map (leaflet)
\ No newline at end of file
js/index.js → js/ui_init.js
View file @ 1d739c37
...@@ -12,8 +12,8 @@ var INIT_HEADING = 0; ...@@ -12,8 +12,8 @@ var INIT_HEADING = 0;
var SETTINGS = { var SETTINGS = {
'pointer': false, 'pointer': false,
'highlight': false, 'highlight': false,
'viewinfo': false, 'viewinfo': true,
'moreinfo': false, 'moreinfo': true,
'crosshair': false, 'crosshair': false,
'shiftspeed': 0.01 'shiftspeed': 0.01
} }
...@@ -81,12 +81,14 @@ function light_init(){ ...@@ -81,12 +81,14 @@ function light_init(){
INIT_HEADING = heading; INIT_HEADING = heading;
var element = document.getElementById('x3d_id'); var element = document.getElementById('x3d_id');
Scene = new X3DOMObject(element,Data,{}); Scene = new X3DOMObject(element,Data,{});
Scene.initResize();
$.getScript("js/x3dom-full.debug.js",function(){ $.getScript("js/x3dom/x3dom-full.debug.js",function(){
Map = new LeafletObject('leaflet_map',Data,{}); Map = new LeafletObject('leaflet_map',Data,{});
//wait until it parsed the DOM //wait until it DOM is extended
x3dom.runtime.ready = function(){ x3dom.runtime.ready = function(){
map_resize_init(); map_resize_init();
deep_init(); deep_init();
...@@ -149,6 +151,7 @@ function map_resize(e){ ...@@ -149,6 +151,7 @@ function map_resize(e){
function deep_init(){ function deep_init(){
//Scene.initResize();
Scene.FoVEvents(); Scene.FoVEvents();
Scene.KeyEvents(); Scene.KeyEvents();
...@@ -160,15 +163,14 @@ function deep_init(){ ...@@ -160,15 +163,14 @@ function deep_init(){
progress_counter = progress_counter.split(" "); progress_counter = progress_counter.split(" ");
cnt = parseInt(progress_counter[1]); cnt = parseInt(progress_counter[1]);
if (!Scene._X3DOM_SCENE_INIT&&(cnt==0)){ if (!Scene._X3DOM_SCENE_INIT_DONE&&(cnt==0)){
//Scene.initResize();
//if(Scene._DEBUG){ // now then all shapes are parsed and accessible
Scene.initInfoWindow(); Scene.ShapeEvents();
Scene.initViewInfoWindow();
Scene.registerShapesEvents();
//}
Scene._X3DOM_SCENE_INIT = true; Scene._X3DOM_SCENE_INIT_DONE = true;
x3d_events(); x3d_events();
leaf_events(); leaf_events();
...@@ -235,7 +237,7 @@ function x3d_events(){ ...@@ -235,7 +237,7 @@ function x3d_events(){
var sr = elem.runtime.shootRay(e.path[0].mouse_drag_x,e.path[0].mouse_drag_y); var sr = elem.runtime.shootRay(e.path[0].mouse_drag_x,e.path[0].mouse_drag_y);
if (!$(sr.pickObject).hasClass("shapemarker")){ if (!$(sr.pickObject).hasClass("shapemarker")){
Scene.highlightShape(sr.pickObject); X3DOMObject.Shape.highlight(sr.pickObject);
} }
...@@ -268,7 +270,7 @@ function x3d_events(){ ...@@ -268,7 +270,7 @@ function x3d_events(){
if (e.key=="Shift"){ if (e.key=="Shift"){
// select shape // select shape
var sr = elem.runtime.shootRay(e.path[0].mouse_drag_x,e.path[0].mouse_drag_y); var sr = elem.runtime.shootRay(e.path[0].mouse_drag_x,e.path[0].mouse_drag_y);
Scene.dehighlightShape(sr.pickObject); X3DOMObject.Shape.dehighlight(sr.pickObject);
} }
if (e.key=="Control"){ if (e.key=="Control"){
...@@ -312,7 +314,7 @@ function x3d_events(){ ...@@ -312,7 +314,7 @@ function x3d_events(){
if (SETTINGS.highlight&&!SETTINGS.pointer){ if (SETTINGS.highlight&&!SETTINGS.pointer){
var sr = elem.runtime.shootRay(e.path[0].mouse_drag_x,e.path[0].mouse_drag_y); var sr = elem.runtime.shootRay(e.path[0].mouse_drag_x,e.path[0].mouse_drag_y);
Scene.highlightShape(sr.pickObject); X3DOMObject.Shape.highlight(sr.pickObject);
} }
...@@ -346,7 +348,7 @@ function x3d_events(){ ...@@ -346,7 +348,7 @@ function x3d_events(){
// hide shadow marker // hide shadow marker
Map.marker.removeSlidingMarker(); Map.marker.removeSlidingMarker();
Scene.hideMessage("window-info"); ui_hideMessage("window-info");
}); });
...@@ -575,11 +577,11 @@ function x3d_mouseMove(){ ...@@ -575,11 +577,11 @@ function x3d_mouseMove(){
var initial_heading = Data.camera.heading; var initial_heading = Data.camera.heading;
//var initial_heading = INIT_HEADING; //var initial_heading = INIT_HEADING;
var heading = Scene.getViewDirection(); var heading = x3dom_getViewDirection(Scene.element);
Map.marker.setHeading(heading+INIT_HEADING); Map.marker.setHeading(heading+INIT_HEADING);
var d = Scene.getViewTranslation(); var d = x3dom_getViewTranslation(Scene.element);
var dx; var dx;
var dz; var dz;
......
js/x3dom_functions.js 0 → 100644
View file @ 1d739c37
/**
* output in units (meters)
*/
function x3dom_getViewTranslation(elem){
var vp_mat = elem.runtime.viewMatrix().inverse();
var vp_translation = vp_mat.e3();
return vp_translation;
}
/**
* output in degrees
*/
function x3dom_getViewDirection(elem){
var vp_mat = elem.runtime.viewMatrix();
var vMatInv = vp_mat.inverse();
var viewDir = vMatInv.multMatrixVec(new x3dom.fields.SFVec3f(0.0, 0.0, -1.0));
var angle = Math.atan2(viewDir.x,-viewDir.z)*180/Math.PI;
return angle;
}
/**
* get position and orientation in the 3D scene defined by mouse's canvas x,y
*/
function x3dom_getXYPosOr(cnvx,cnvy,round){
var elem = Scene.element;
var x,y,z;
var az,el,sk;
var id;
var dist_xyz = 1000;
var dist_xz = 1000;
var shootRay = elem.runtime.shootRay(cnvx,cnvy);
if (shootRay.pickPosition != null){
var index = Scene.highlighted_marker_index;
if ((index==null)||(Data.markers[index]==undefined)){
x = shootRay.pickPosition.x;
y = shootRay.pickPosition.y;
z = shootRay.pickPosition.z;
}else{
x = Data.markers[index].x;
y = Data.markers[index].y;
z = Data.markers[index].z;
}
dist_xz = Math.sqrt(x*x+z*z);
dist_xyz = Math.sqrt(y*y+dist_xz*dist_xz);
if (round){
dist_xz.toFixed(2);
dist_xyz.toFixed(2);
}
id = $(shootRay.pickObject).attr("id");
}else{
var viewingRay = elem.runtime.getViewingRay(cnvx,cnvy);
x = viewingRay.dir.x;
y = viewingRay.dir.y;
z = viewingRay.dir.z;
dist_xz = null;
dist_xyz = null;
}
az = Math.atan2(x,-z)*180/Math.PI;
az = (az+INIT_HEADING+360)%360;
el = Math.atan2(y,Math.sqrt(x*x+z*z))*180/Math.PI;
sk = 0;
var result = {
x: !round? x : x.toFixed(2),
y: !round? y : y.toFixed(2),
z: !round? z : z.toFixed(2),
a: !round? az : az.toFixed(1),
e: !round? el : el.toFixed(1),
s: !round? sk : sk.toFixed(1)
};
if (dist_xz!=null){
result.d_xz = !round? dist_xz : dist_xz.toFixed(1);
result.d_xyz = !round? dist_xyz : dist_xyz.toFixed(1);
}else{
result.d_xz = dist_xz;
result.d_xyz = dist_xyz;
}
result.id = id;
return result;
}
/**
* Get position and orientation of the observer (=viewer=camera)
* in the 3D scene
*/
function x3dom_getCameraPosOr(round){
var elem = Scene.element;
var vm = elem.runtime.viewMatrix().inverse();
var tr = vm.e3();
var x = tr.x;
var y = tr.y;
var z = tr.z;
var R = vm;
var az = Math.atan2(R._02,R._22)*180/Math.PI;
az = (az+INIT_HEADING+360)%360;
var el = -Math.asin(R._12)*180/Math.PI;
var sk = Math.atan2(R._10,R._11);
if (!round){
return {
x: x,
y: y,
z: z,
a: az,
e: el,
s: sk
};
}else{
return {
x: x.toFixed(2),
y: y.toFixed(2),
z: z.toFixed(2),
a: az.toFixed(1),
e: el.toFixed(1),
s: sk.toFixed(1)
};
}
}
function x3dom_setUpRight(){
var mat = Scene.element.runtime.viewMatrix().inverse();
var from = mat.e3();
var at = from.subtract(mat.e2());
var up = new x3dom.fields.SFVec3f(0, 1, 0);
var s = mat.e2().cross(up).normalize();
var newup = mat.e2().cross(s).normalize().negate();
//at = from.add(v);
mat = x3dom.fields.SFMatrix4f.lookAt(from, at, newup);
//mat = mat.inverse();
//var m1 = x3dom.fields.SFMatrix4f.translation(from);
//var m1n = x3dom.fields.SFMatrix4f.translation(from.negate());
//mat = m1.mult(mat).mult(m1n);
var Q = new x3dom.fields.Quaternion(0,0,1,0);
Q.setValue(mat);
var AA = Q.toAxisAngle();
var viewpoint = $(Scene.element).find("Viewpoint");
viewpoint.attr("position",mat.e3().toString());
viewpoint.attr("centerOfRotation",mat.e3().toString());
viewpoint.attr("orientation",AA[0].toString()+" "+AA[1]);
}
function x3dom_rotation(delta_a){
/*
* Printing values:
*
* var mat = Scene.element.runtime.viewMatrix().inverse();
* var rotation = new x3dom.fields.Quaternion(0, 0, 1, 0);
* rotation.setValue(mat);
* var translation = mat.e3();
*
*/
var mat = Scene.element.runtime.viewMatrix();
mat = mat.inverse();
//console.log(mat.toString());
var from = mat.e3();
var at = from.subtract(mat.e2());
var up = mat.e1();
var q0 = x3dom.fields.Quaternion.axisAngle(up, -delta_a);
var m0 = q0.toMatrix();
var m1 = x3dom.fields.SFMatrix4f.translation(from);
var m1n = x3dom.fields.SFMatrix4f.translation(from.negate());
var mres = m1.mult(m0).mult(m1n);
newat = mres.multMatrixPnt(at);
newmat = x3dom.fields.SFMatrix4f.lookAt(from, newat, up);
var Q = new x3dom.fields.Quaternion(0,0,1,0);
//Q.setValue(newmat.inverse());
Q.setValue(newmat);
var AA = Q.toAxisAngle();
var viewpoint = $(Scene.element).find("Viewpoint");
viewpoint.attr("orientation",AA[0].toString()+" "+AA[1]);
viewpoint.attr("position",from.toString());
viewpoint.attr("centerOfRotation",from.toString());
}
// horizontal?
function x3dom_translation(dx,dy,dz){
var mat = Scene.element.runtime.viewMatrix().inverse();
var tr = mat.e3();
var x = tr.x+dx;
var y = tr.y+dy;
var z = tr.z+dz;
var viewpoint = $(Scene.element).find("Viewpoint");
viewpoint.attr("position",x+" "+y+" "+z);
viewpoint.attr("centerOfRotation",x+" "+y+" "+z);
}
function x3dom_altelev(alt,elev){
//x3dom_matrix_test();
var mat = Scene.element.runtime.viewMatrix().inverse();
var from = mat.e3();
from.y = alt;
var az = Math.atan2(mat._02,mat._22);
var el = elev;
var sk = Math.atan2(mat._10,mat._11);
var matx = x3dom.fields.SFMatrix4f.rotationX(el);
var maty = x3dom.fields.SFMatrix4f.rotationY(az);
var matz = x3dom.fields.SFMatrix4f.rotationZ(sk);
var matt = x3dom.fields.SFMatrix4f.translation(from);
var newmat = matt.mult(maty).mult(matx).mult(matz);
var Q = new x3dom.fields.Quaternion(0,0,1,0);
Q.setValue(newmat);
var AA = Q.toAxisAngle();
var viewpoint = $(Scene.element).find("Viewpoint");
viewpoint.attr("position",newmat.e3().toString());
viewpoint.attr("centerOfRotation",newmat.e3().toString());
viewpoint.attr("orientation",AA[0].toString()+" "+AA[1]);
}
function x3dom_matrix_test(){
var viewpoint = $(Scene.element).find("Viewpoint");
console.log("Viewpoint DOM element");
console.log("position: "+viewpoint.attr("position"));
console.log("orientation: "+viewpoint.attr("orientation"));
var mat = Scene.element.runtime.viewMatrix().inverse();
console.log("inversed viewMatrix");
console.log(mat.toString());
var from = mat.e3();
var at = from.subtract(mat.e2());
var up = mat.e1();
console.log("matrix from from-at-up");
var newmat = x3dom.fields.SFMatrix4f.lookAt(from, at, up);
console.log(newmat.toString());
var R = mat;
var az = Math.atan2(R._02,R._22)*180/Math.PI;
//az = (az+INIT_HEADING+360)%360;
//az = (az+360)%360;
var el = -Math.asin(R._12)*180/Math.PI;
var sk = Math.atan2(R._10,R._11);
console.log("Angles:");
console.log("az="+az+" el="+el+" sk="+sk);
console.log("matrix from angles");
var matx = x3dom.fields.SFMatrix4f.rotationX(el*Math.PI/180);
var maty = x3dom.fields.SFMatrix4f.rotationY(az*Math.PI/180);
var matz = x3dom.fields.SFMatrix4f.rotationZ(sk*Math.PI/180);
var m1 = x3dom.fields.SFMatrix4f.translation(from);
var m1n = x3dom.fields.SFMatrix4f.translation(from.negate());
var newmat = maty.mult(matx).mult(matz);
console.log(newmat.toString());
}
/**
* Get World to Camera coordinates tranform matrix
* what's native getWCtoCCMatrix()?
*/
function x3dom_W2C(){
return new x3dom.fields.SFMatrix4f(
0, 0, 1, 0,
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 0, 1,
);
}
function x3dom_C2W(){
return x3dom_W2C().inverse();
}
js/X3DOMObject.js → js/x3dom_init.js
View file @ 1d739c37
var X3DOMObject = function(element,data,options){ var X3DOMObject = function(element,data,options){
this.element = element;
this.data = data;
var defaults = { var defaults = {
debug: true, debug: true, // {boot}, unused
highlight: true, highlight: true, // {bool}, highlight surfaces on mouseover
fov: 30*Math.PI/180,//deg, vertical fov: 30*Math.PI/180,// {rad}, default vertical fov
fov_step: 0.025, //rad fov_step: 0.025, // {rad}, min change
}; };
this._settings = $.extend(defaults,options); this._settings = $.extend(defaults,options);
this._DEBUG = this._settings.debug;
this._FOV = this._settings.fov; this._FOV = this._settings.fov;
this._FOV_STEP = this._settings.fov_step; this._FOV_STEP = this._settings.fov_step;
this._HIGHLIGHT_ON_MOUSEOVER = this._settings.highlight; this._HIGHLIGHT_ON_MOUSEOVER = this._settings.highlight;
this._DEBUG = this._settings.debug;
// tmp vars
this._resizeTimer = false; this._resizeTimer = false;
this._eventCtrlKey = false; this._eventCtrlKey = false;
//this._X3DOM_SCENE_INIT = this._settings.debug;
this._X3DOM_SCENE_INIT = false;
//this._element = element;
this.element = element;
this.highlighted_marker_index = null; this.highlighted_marker_index = null;
this.old_view_translation = null; this.old_view_translation = null;
//this.lastMouseX;
//this.lastMouseY;
this.data = data;
this.initialize(); // status vars
this._X3DOM_SCENE_INIT_DONE = false;
this._ctrlKey = false;
this._shiftKey = false;
}; };
X3DOMObject.prototype.initialize = function(){ // ui, window
X3DOMObject.prototype.initResize = function(){
var self = this; var self = this;
...@@ -49,10 +47,9 @@ X3DOMObject.prototype.initialize = function(){ ...@@ -49,10 +47,9 @@ X3DOMObject.prototype.initialize = function(){
},100); },100);
}); });
//self.getX3DOMlibrary();
} }
// ui, window
X3DOMObject.prototype.resize = function(){ X3DOMObject.prototype.resize = function(){
var self = this; var self = this;
...@@ -77,12 +74,7 @@ X3DOMObject.prototype.resize = function(){ ...@@ -77,12 +74,7 @@ X3DOMObject.prototype.resize = function(){
//fov = Math.PI/2; //fov = Math.PI/2;
// apply to all viewpoints, but: self.setFoV(fov);
// https://doc.x3dom.org/author/Navigation/Viewpoint.html
// = correct field of view is not guaranteed in X3DOM
$(self.element).find("Viewpoint").each(function(){
$(this).attr("fieldOfView",fov);
});
self.data.camera.fov = fov; self.data.camera.fov = fov;
...@@ -113,6 +105,10 @@ X3DOMObject.prototype.focusOnCanvas = function(){ ...@@ -113,6 +105,10 @@ X3DOMObject.prototype.focusOnCanvas = function(){
} }
/**
* Intercept scroll and change field of view instead of moving the observer,
* which was the default action
*/
X3DOMObject.prototype.FoVEvents = function(){ X3DOMObject.prototype.FoVEvents = function(){
var self = this; var self = this;
...@@ -121,39 +117,63 @@ X3DOMObject.prototype.FoVEvents = function(){ ...@@ -121,39 +117,63 @@ X3DOMObject.prototype.FoVEvents = function(){
//Chrome?! //Chrome?!
self.element.addEventListener('mousewheel',function(e){ self.element.addEventListener('mousewheel',function(e){
var delta = (e.deltaY>0)?self._FOV_STEP:-self._FOV_STEP; var delta = e.deltaY>0 ? 1 : -1;
self.changeFoV(e,delta); self.changeFoV(delta*self._FOV_STEP);
// prevent zoom
e.preventDefault();
e.stopPropagation();
return false;
},true); },true);
//Firefox?! //Firefox?!
self.element.addEventListener('DOMMouseScroll',function(e){ self.element.addEventListener('DOMMouseScroll',function(e){
var delta = (e.detail>0)?self._FOV_STEP:-self._FOV_STEP; var delta = e.detail>0 ? 1 : -1;
self.changeFoV(e,delta); self.changeFoV(delta*self._FOV_STEP);
// prevent zoom
e.preventDefault();
e.stopPropagation();
return false;
},true); },true);
} }
/**
X3DOMObject.prototype.changeFoV = function(e,val){ * Change by delta
* @val {rad}
*/
X3DOMObject.prototype.changeFoV = function(val){
var fov = this.getFoV()+val; var fov = this.getFoV()+val;
this.setFoV(fov); this.setFoV(fov);
Map.marker.setFoV(fov);
e.preventDefault(); // update Map
e.stopPropagation(); Map.marker.setFoV(fov);
return false;
} }
/**
* Set by @val rad
*/
X3DOMObject.prototype.setFoV = function(val){ X3DOMObject.prototype.setFoV = function(val){
var vp = $(this.element).find("Viewpoint")[0]; var vp = $(this.element).find("Viewpoint")[0];
$(vp).prop("fieldOfView",val); $(vp).prop("fieldOfView",val);
// apply to all viewpoints, but:
// https://doc.x3dom.org/author/Navigation/Viewpoint.html
// = correct field of view is not guaranteed in X3DOM
/*
$(self.element).find("Viewpoint").each(function(){
$(this).attr("fieldOfView",fov);
});
*/
} }
/**
* Read property from DOM element
*/
X3DOMObject.prototype.getFoV = function(){ X3DOMObject.prototype.getFoV = function(){
var vp = $(this.element).find("Viewpoint")[0]; var vp = $(this.element).find("Viewpoint")[0];
...@@ -161,6 +181,9 @@ X3DOMObject.prototype.getFoV = function(){ ...@@ -161,6 +181,9 @@ X3DOMObject.prototype.getFoV = function(){
} }
/**
* Remember which key is pressed - used for mouse moving / dragging
*/
X3DOMObject.prototype.KeyEvents = function(){ X3DOMObject.prototype.KeyEvents = function(){
var self = this; var self = this;
...@@ -179,149 +202,52 @@ X3DOMObject.prototype.KeyEvents = function(){ ...@@ -179,149 +202,52 @@ X3DOMObject.prototype.KeyEvents = function(){
},true); },true);
} }
/*
X3DOMObject.prototype.mouseMove = function(e){
//offsetX / offsetY polyfill for FF
var target = e.target || e.srcElement;
var rect = target.getBoundingClientRect();
e.offsetX = e.clientX - rect.left;
e.offsetY = e.clientY - rect.top;
if (this.lastMouseX === -1){
this.lastMouseX = e.offsetX;
}
if (this.lastMouseY === -1){
this.lastMouseY = e.offsetY;
}
if (this.draggedTransformNode){
this.dragMarker(e.offsetX - this.lastMouseX, e.offsetY - this.lastMouseY);
}
this.lastMouseX = e.offsetX;
this.lastMouseY = e.offsetY;
}
X3DOMObject.prototype.dragMarker = function(dx,dy){
var offsetUp = draggingUpVec.multiply(-dy);
var offsetRight = draggingRightVec.multiply(dx);
this.unsnappedDragPos = this.unsnappedDragPos.add(offsetUp).add(offsetRight);
$(this.draggedTransformNode).attr("translation", this.unsnappedDragPos.toString()); /**
* The 3D model building blocks are shapes
//use callback? */
X3DOMObject.prototype.ShapeEvents = function(){
} var self = this;
*//*
X3DOMObject.prototype.stopDraggingMarker = function(e){
this.removeEventListener('mousemove',this.mouseMove,true); var tmp = new X3DOMObject.PointerMarker();
this.removeEventListener('mouseup',this.mouseup,true);
draggedTransformNode = null; var inlines = $(self.element).find("inline");
draggingUpVec = null;
draggingRightVec = null;
unsnappedDragPos = null;
document.getElementById("navInfo").setAttribute("type",'"examine"'); inlines.each(function(){
} if ($(this).attr("name")!="back"){
*/
X3DOMObject.prototype.initInfoWindow = function(){ var shapes = $(this).find("Shape");
//... shapes.each(function(){
/* new X3DOMObject.Shape(this);
// position - folowing mouse without delay? aha
$(this.element).find("canvas").on('mousemove',function(e){
$("#window-info").css({
top: (e.originalEvent.clientY+20)+"px",
left: (e.originalEvent.clientX+20)+"px"
});
});
$("#window-info").on('mouseover',function(){
$(this).hide();
}); });
*/
} }
X3DOMObject.prototype.initViewInfoWindow = function(){
/*
var el = $("<div>",{id:"messagewindow"}).css({
position:"absolute",
bottom:"2px",
left:"2px",
"z-index":10,
background:"red",
border:"1px solid red",
"border-radius": "2px",
color:"white",
padding:"0px"
}); });
$("body").append(el);
*/
} }
X3DOMObject.prototype.showMessage = function(id,msg,bg){ /**
* <shape> DOM elements
if (bg != undefined){ */
$("#"+id).css({background:bg});
}
$("#"+id).show();
$("#"+id).html($("<div>").html(msg).css({
padding:"5px 10px"
})).show();
}
X3DOMObject.prototype.hideMessage = function(id){ X3DOMObject.Shape = function(element){
$("#"+id).hide(); this._elem = element
this._registerEvents();
} }
X3DOMObject.Shape.prototype._registerEvents = function(){
X3DOMObject.prototype.registerShapesEvents = function(){ var self = Scene;
var self = this;
var tmp = new X3DOMObject.PointerMarker();
var inlines = $(self.element).find("inline");
inlines.each(function(){
if ($(this).attr("name")!="back"){
var shapes = $(this).find("Shape");
shapes.each(function(){
/*
this.addEventListener('click',function(e){
console.log("click1");
//console.log(e.worldX+" "+e.worldY+" "+e.worldZ);
//createSphere(e.worldX,e.worldY,e.worldZ);
});
*/
$(this).on("mousemove",function(e){ $(this._elem).on("mousemove",function(e){
var x = e.originalEvent.worldX; var x = e.originalEvent.worldX;
var y = e.originalEvent.worldY; var y = e.originalEvent.worldY;
...@@ -335,109 +261,41 @@ X3DOMObject.prototype.registerShapesEvents = function(){ ...@@ -335,109 +261,41 @@ X3DOMObject.prototype.registerShapesEvents = function(){
$("#sliding_sphere").find("switch").attr("whichChoice",-1); $("#sliding_sphere").find("switch").attr("whichChoice",-1);
} }
/*
var v = new x3dom.fields.SFVec3f(x,y,z);
//for printing
var x = v.x.toFixed(2);
var y = v.y.toFixed(2);
var z = v.z.toFixed(2);
var l = (v.length()).toFixed(1);
var msg = "<div>x="+x+"</div>"+
"<div>y="+y+"</div>"+
"<div>z="+z+"</div>"+
"<div>d="+l+"</div>";
msg = "<div>"+l+" m</div>";
//self.showMessage("infowindow",msg);
*/
}); });
$(this).on("click",function(e){ $(this._elem).on("click",function(e){
console.log(e); // if self._shiftKey then the mouse will always be over the pointer marker
/*
// when ctrlKey then the mouse is always over pointer marker
if (self._ctrlKey){
self.placeMarker(e.originalEvent.worldX,e.originalEvent.worldY,e.originalEvent.worldZ);
}
*/
if ((self._shiftKey)||(SETTINGS.highlight)){ if ((self._shiftKey)||(SETTINGS.highlight)){
self.toggleShape(this); X3DOMObject.Shape.toggle(this);
} }
}); });
$(this).on("mouseover",function(e){ $(this._elem).on("mouseover",function(e){
/*
var tmp = $(self).attr("id");
if (tmp == undefined){
tmp = "missing <b>id</b> attribute";
}
x3dom.debug.logInfo(tmp);
self.showMessage("shapetitle",tmp);
*/
// e.ctrlKey will not work because X3DOM does something to events // e.ctrlKey will not work because X3DOM does something to events
if (self._shiftKey){ if (self._shiftKey){
if (self._HIGHLIGHT_ON_MOUSEOVER){ if (self._HIGHLIGHT_ON_MOUSEOVER){
self.highlightShape(this); X3DOMObject.Shape.highlight(this);
} }
} }
}); });
$(this).on("mouseout",function(e){ $(this._elem).on("mouseout",function(e){
self.dehighlightShape(this);
//self.placeMarker(0,0,0,"sliding_sphere");
//self.hideMessage("shapetitle");
//self.resetInfoWindow();
});
// not working
/*
$(this).on("keydown",function(e){
console.log("KeyDown");
self.highlightShape(self);
});
*/
// not working
/*
this.addEventListener('keydown',function(e){
console.log("should not work!");
});
*/
// not working
/*
$(this).on("keyup",function(e){
console.log("keyup");
self.highlightShape(self);
});
*/
});
} X3DOMObject.Shape.dehighlight(this);
}); });
} }
X3DOMObject.prototype.highlightShape = function(elem){ X3DOMObject.Shape.highlight = function(elem){
var m = $(elem).find("Material[class='hl']"); var m = $(elem).find("Material[class='hl']");
...@@ -451,7 +309,7 @@ X3DOMObject.prototype.highlightShape = function(elem){ ...@@ -451,7 +309,7 @@ X3DOMObject.prototype.highlightShape = function(elem){
} }
X3DOMObject.prototype.dehighlightShape = function(elem){ X3DOMObject.Shape.dehighlight = function(elem){
var self = this; var self = this;
...@@ -459,30 +317,30 @@ X3DOMObject.prototype.dehighlightShape = function(elem){ ...@@ -459,30 +317,30 @@ X3DOMObject.prototype.dehighlightShape = function(elem){
m = $(elem).find("Material[class='sl']"); m = $(elem).find("Material[class='sl']");
if (m.length==1){ if (m.length==1){
self.selectShape(elem); X3DOMObject.Shape.select(elem);
} }
} }
X3DOMObject.prototype.toggleShape = function(elem){ X3DOMObject.Shape.toggle = function(elem){
var self = this; var self = this;
var m = $(elem).find("Material[class='sl']"); var m = $(elem).find("Material[class='sl']");
if (m.length!=0){ if (m.length!=0){
self.deselectShape(elem); X3DOMObject.Shape.deselect(elem);
}else{ }else{
self.selectShape(elem); X3DOMObject.Shape.select(elem);
} }
} }
X3DOMObject.prototype.selectShape = function(elem){ X3DOMObject.Shape.select = function(elem){
var self = this; var self = this;
self.deselectShape(elem); X3DOMObject.Shape.deselect(elem);
var m = $(elem).find("Material[class='sl']"); var m = $(elem).find("Material[class='sl']");
...@@ -493,7 +351,7 @@ X3DOMObject.prototype.selectShape = function(elem){ ...@@ -493,7 +351,7 @@ X3DOMObject.prototype.selectShape = function(elem){
} }
X3DOMObject.prototype.deselectShape = function(elem){ X3DOMObject.Shape.deselect = function(elem){
var tmpapp = $(elem).find("Appearance").find("Material[class='sl']").remove(); var tmpapp = $(elem).find("Appearance").find("Material[class='sl']").remove();
...@@ -555,76 +413,9 @@ X3DOMObject.prototype.updateMarkersIndices = function(){ ...@@ -555,76 +413,9 @@ X3DOMObject.prototype.updateMarkersIndices = function(){
} }
X3DOMObject.prototype.placeMarker = function(x,y,z,id){ /**
* Marker object - which is a sphere of 1m radius
var tr = $("#"+id).find("transform"); */
$(tr).attr("translation",x+" "+y+" "+z);
}
X3DOMObject.prototype.highlightMarker = function(index){
var color = "1 0.5 0.5";
$("#my-sph-"+index).find('material').attr("diffuseColor",color);
}
X3DOMObject.prototype.dehighlightMarker = function(index){
var elem = $("#my-sph-"+index).find('material');
var color = "0.07 1 0.07";
if (!elem.prop("selected")){
elem.attr("diffuseColor",color);
}
}
X3DOMObject.prototype.toggleMarker = function(index){
var elem = $("#my-sph-"+index).find('material');
var color = elem.attr("diffuseColor");
if (elem.prop("selected")){
elem.prop("selected",false);
}else{
elem.prop("selected",true);
}
}
X3DOMObject.prototype.getViewDirection = function(){
var elem = this.element;
var vp_mat = elem.runtime.viewMatrix();
var vMatInv = vp_mat.inverse();
var viewDir = vMatInv.multMatrixVec(new x3dom.fields.SFVec3f(0.0, 0.0, -1.0));
var angle = Math.atan2(viewDir.x,-viewDir.z)*180/Math.PI;
return angle;
}
X3DOMObject.prototype.getViewTranslation = function(){
var elem = this.element;
var vp_mat = elem.runtime.viewMatrix().inverse();
//var vp_rotation = new x3dom.fields.Quaternion(0, 0, 1, 0);
//vp_rotation.setValue(vp_mat);
var vp_translation = vp_mat.e3();
return vp_translation;
}
// Marker
X3DOMObject.Marker = function(x,y,z){ X3DOMObject.Marker = function(x,y,z){
this._x = x || 0; this._x = x || 0;
...@@ -635,6 +426,7 @@ X3DOMObject.Marker = function(x,y,z){ ...@@ -635,6 +426,7 @@ X3DOMObject.Marker = function(x,y,z){
} }
X3DOMObject.Marker.prototype.init = function(){ X3DOMObject.Marker.prototype.init = function(){
this._elem = Scene.createMarker(this._x,this._y,this._z); this._elem = Scene.createMarker(this._x,this._y,this._z);
...@@ -644,8 +436,6 @@ X3DOMObject.Marker.prototype.init = function(){ ...@@ -644,8 +436,6 @@ X3DOMObject.Marker.prototype.init = function(){
} }
X3DOMObject.Marker.prototype._registerEvents = function(){ X3DOMObject.Marker.prototype._registerEvents = function(){
var PREFIX = "my-sph-"; var PREFIX = "my-sph-";
...@@ -908,8 +698,8 @@ X3DOMObject.Marker.toggle = function(elem){ ...@@ -908,8 +698,8 @@ X3DOMObject.Marker.toggle = function(elem){
} }
} }
// PointerMarker
// PointerMarker
X3DOMObject.PointerMarker = function(){ X3DOMObject.PointerMarker = function(){
//init //init
...@@ -978,6 +768,9 @@ X3DOMObject.PointerMarker.prototype._registerEvents = function(){ ...@@ -978,6 +768,9 @@ X3DOMObject.PointerMarker.prototype._registerEvents = function(){
} }
/**
* need to move this to leaflet_init.js
*/
X3DOMObject.MapMarker = {}; X3DOMObject.MapMarker = {};
X3DOMObject.MapMarker.registerEvents = function(map_mark){ X3DOMObject.MapMarker.registerEvents = function(map_mark){
...@@ -1091,8 +884,8 @@ X3DOMObject.displayInfo = function(e){ ...@@ -1091,8 +884,8 @@ X3DOMObject.displayInfo = function(e){
dist_msg += "<table>"; dist_msg += "<table>";
dist_msg += "<tr><th align='center'>shape id</td><td>"+id_msg+"</td></tr>"; dist_msg += "<tr><th align='center'>shape id</td><td>"+id_msg+"</td></tr>";
dist_msg += "</table><table>"; dist_msg += "</table><table>";
dist_msg += "<tr><th align='center'>d<sub>xz</sub></td><td>"+mouse.d_xz+" m</td></tr>"; dist_msg += "<tr><th align='left'>d<sub>map</sub></td><td>"+mouse.d_xz+" m</td></tr>";
dist_msg += "<tr><th align='center'>d<sub>xyz</sub></td><td>"+mouse.d_xyz+" m</td></tr>"; dist_msg += "<tr><th align='left'>d<sub>3d</sub></td><td>"+mouse.d_xyz+" m</td></tr>";
dist_msg += "</table>"; dist_msg += "</table>";
}else{ }else{
...@@ -1111,7 +904,7 @@ X3DOMObject.displayInfo = function(e){ ...@@ -1111,7 +904,7 @@ X3DOMObject.displayInfo = function(e){
var msg = "<div>"+dist_msg+"</div>"; var msg = "<div>"+dist_msg+"</div>";
Scene.showMessage("window-info",msg); ui_showMessage("window-info",msg);
return dist; return dist;
...@@ -1171,314 +964,8 @@ X3DOMObject.displayViewInfo = function(e){ ...@@ -1171,314 +964,8 @@ X3DOMObject.displayViewInfo = function(e){
`; `;
if (SETTINGS.viewinfo){ if (SETTINGS.viewinfo){
Scene.showMessage("window-viewinfo",msg); ui_showMessage("window-viewinfo",msg);
}else{ }else{
Scene.hideMessage("window-viewinfo"); ui_hideMessage("window-viewinfo");
} }
} }
// various calcs
function x3dom_getXYPosOr(cnvx,cnvy,round){
var elem = Scene.element;
var x,y,z;
var az,el,sk;
var id;
var dist_xyz = 1000;
var dist_xz = 1000;
var shootRay = elem.runtime.shootRay(cnvx,cnvy);
if (shootRay.pickPosition != null){
var index = Scene.highlighted_marker_index;
if ((index==null)||(Data.markers[index]==undefined)){
x = shootRay.pickPosition.x;
y = shootRay.pickPosition.y;
z = shootRay.pickPosition.z;
}else{
x = Data.markers[index].x;
y = Data.markers[index].y;
z = Data.markers[index].z;
}
dist_xz = Math.sqrt(x*x+z*z);
dist_xyz = Math.sqrt(y*y+dist_xz*dist_xz);
if (round){
dist_xz.toFixed(2);
dist_xyz.toFixed(2);
}
id = $(shootRay.pickObject).attr("id");
}else{
var viewingRay = elem.runtime.getViewingRay(cnvx,cnvy);
x = viewingRay.dir.x;
y = viewingRay.dir.y;
z = viewingRay.dir.z;
dist_xz = null;
dist_xyz = null;
}
az = Math.atan2(x,-z)*180/Math.PI;
az = (az+INIT_HEADING+360)%360;
el = Math.atan2(y,Math.sqrt(x*x+z*z))*180/Math.PI;
sk = 0;
var result = {
x: !round? x : x.toFixed(2),
y: !round? y : y.toFixed(2),
z: !round? z : z.toFixed(2),
a: !round? az : az.toFixed(1),
e: !round? el : el.toFixed(1),
s: !round? sk : sk.toFixed(1)
};
if (dist_xz!=null){
result.d_xz = !round? dist_xz : dist_xz.toFixed(1);
result.d_xyz = !round? dist_xyz : dist_xyz.toFixed(1);
}else{
result.d_xz = dist_xz;
result.d_xyz = dist_xyz;
}
result.id = id;
return result;
}
function x3dom_getCameraPosOr(round){
var elem = Scene.element;
var vm = elem.runtime.viewMatrix().inverse();
var tr = vm.e3();
var x = tr.x;
var y = tr.y;
var z = tr.z;
var R = vm;
var az = Math.atan2(R._02,R._22)*180/Math.PI;
az = (az+INIT_HEADING+360)%360;
var el = -Math.asin(R._12)*180/Math.PI;
var sk = Math.atan2(R._10,R._11);
if (!round){
return {
x: x,
y: y,
z: z,
a: az,
e: el,
s: sk
};
}else{
return {
x: x.toFixed(2),
y: y.toFixed(2),
z: z.toFixed(2),
a: az.toFixed(1),
e: el.toFixed(1),
s: sk.toFixed(1)
};
}
}
function x3dom_setUpRight(){
var mat = Scene.element.runtime.viewMatrix().inverse();
var from = mat.e3();
var at = from.subtract(mat.e2());
var up = new x3dom.fields.SFVec3f(0, 1, 0);
var s = mat.e2().cross(up).normalize();
var newup = mat.e2().cross(s).normalize().negate();
//at = from.add(v);
mat = x3dom.fields.SFMatrix4f.lookAt(from, at, newup);
//mat = mat.inverse();
//var m1 = x3dom.fields.SFMatrix4f.translation(from);
//var m1n = x3dom.fields.SFMatrix4f.translation(from.negate());
//mat = m1.mult(mat).mult(m1n);
var Q = new x3dom.fields.Quaternion(0,0,1,0);
Q.setValue(mat);
var AA = Q.toAxisAngle();
var viewpoint = $(Scene.element).find("Viewpoint");
viewpoint.attr("position",mat.e3().toString());
viewpoint.attr("centerOfRotation",mat.e3().toString());
viewpoint.attr("orientation",AA[0].toString()+" "+AA[1]);
}
function x3dom_rotation(delta_a){
/*
* Printing values:
*
* var mat = Scene.element.runtime.viewMatrix().inverse();
* var rotation = new x3dom.fields.Quaternion(0, 0, 1, 0);
* rotation.setValue(mat);
* var translation = mat.e3();
*
*/
var mat = Scene.element.runtime.viewMatrix();
mat = mat.inverse();
//console.log(mat.toString());
var from = mat.e3();
var at = from.subtract(mat.e2());
var up = mat.e1();
var q0 = x3dom.fields.Quaternion.axisAngle(up, -delta_a);
var m0 = q0.toMatrix();
var m1 = x3dom.fields.SFMatrix4f.translation(from);
var m1n = x3dom.fields.SFMatrix4f.translation(from.negate());
var mres = m1.mult(m0).mult(m1n);
newat = mres.multMatrixPnt(at);
newmat = x3dom.fields.SFMatrix4f.lookAt(from, newat, up);
var Q = new x3dom.fields.Quaternion(0,0,1,0);
//Q.setValue(newmat.inverse());
Q.setValue(newmat);
var AA = Q.toAxisAngle();
var viewpoint = $(Scene.element).find("Viewpoint");
viewpoint.attr("orientation",AA[0].toString()+" "+AA[1]);
viewpoint.attr("position",from.toString());
viewpoint.attr("centerOfRotation",from.toString());
}
// horizontal?
function x3dom_translation(dx,dy,dz){
var mat = Scene.element.runtime.viewMatrix().inverse();
var tr = mat.e3();
var x = tr.x+dx;
var y = tr.y+dy;
var z = tr.z+dz;
var viewpoint = $(Scene.element).find("Viewpoint");
viewpoint.attr("position",x+" "+y+" "+z);
viewpoint.attr("centerOfRotation",x+" "+y+" "+z);
}
function x3dom_altelev(alt,elev){
//x3dom_matrix_test();
var mat = Scene.element.runtime.viewMatrix().inverse();
var from = mat.e3();
from.y = alt;
var az = Math.atan2(mat._02,mat._22);
var el = elev;
var sk = Math.atan2(mat._10,mat._11);
var matx = x3dom.fields.SFMatrix4f.rotationX(el);
var maty = x3dom.fields.SFMatrix4f.rotationY(az);
var matz = x3dom.fields.SFMatrix4f.rotationZ(sk);
var matt = x3dom.fields.SFMatrix4f.translation(from);
var newmat = matt.mult(maty).mult(matx).mult(matz);
var Q = new x3dom.fields.Quaternion(0,0,1,0);
Q.setValue(newmat);
var AA = Q.toAxisAngle();
var viewpoint = $(Scene.element).find("Viewpoint");
viewpoint.attr("position",newmat.e3().toString());
viewpoint.attr("centerOfRotation",newmat.e3().toString());
viewpoint.attr("orientation",AA[0].toString()+" "+AA[1]);
}
function x3dom_matrix_test(){
var viewpoint = $(Scene.element).find("Viewpoint");
console.log("Viewpoint DOM element");
console.log("position: "+viewpoint.attr("position"));
console.log("orientation: "+viewpoint.attr("orientation"));
var mat = Scene.element.runtime.viewMatrix().inverse();
console.log("inversed viewMatrix");
console.log(mat.toString());
var from = mat.e3();
var at = from.subtract(mat.e2());
var up = mat.e1();
console.log("matrix from from-at-up");
var newmat = x3dom.fields.SFMatrix4f.lookAt(from, at, up);
console.log(newmat.toString());
var R = mat;
var az = Math.atan2(R._02,R._22)*180/Math.PI;
//az = (az+INIT_HEADING+360)%360;
//az = (az+360)%360;
var el = -Math.asin(R._12)*180/Math.PI;
var sk = Math.atan2(R._10,R._11);
console.log("Angles:");
console.log("az="+az+" el="+el+" sk="+sk);
console.log("matrix from angles");
var matx = x3dom.fields.SFMatrix4f.rotationX(el*Math.PI/180);
var maty = x3dom.fields.SFMatrix4f.rotationY(az*Math.PI/180);
var matz = x3dom.fields.SFMatrix4f.rotationZ(sk*Math.PI/180);
var m1 = x3dom.fields.SFMatrix4f.translation(from);
var m1n = x3dom.fields.SFMatrix4f.translation(from.negate());
var newmat = maty.mult(matx).mult(matz);
console.log(newmat.toString());
}
test.html
View file @ 1d739c37
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>Scene+Map</title> <title>Scene+Map</title>
<script type='text/javascript' src='js/jquery-3.1.1.js'></script> <script type='text/javascript' src='js/jquery/jquery-3.1.1.js'></script>
<script type='text/javascript' src='js/leaflet/leaflet-src.js'></script> <script type='text/javascript' src='js/leaflet/leaflet-src.js'></script>
<script type='text/javascript' src='js/leaflet/L.extra.js'></script> <script type='text/javascript' src='js/leaflet/L.extra.js'></script>
...@@ -12,20 +12,20 @@ ...@@ -12,20 +12,20 @@
<script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker.js'></script> <script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker.js'></script>
<script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker.measure.js'></script> <script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker.measure.js'></script>
<script type='text/javascript' src='js/X3DOMObject.js'></script> <script type='text/javascript' src='js/x3dom_init.js'></script>
<script type='text/javascript' src='js/LeafletObject.js'></script> <script type='text/javascript' src='js/x3dom_functions.js'></script>
<!-- <script type='text/javascript' src='js/LeafletObject.js'></script> -->
<script type='text/javascript' src='js/leaflet-x3dom.js'></script>
<script type='text/javascript' src='js/index.js'></script> <script type='text/javascript' src='js/leaflet_init.js'></script>
<script type='text/javascript' src='js/menu.js'></script> <script type='text/javascript' src='js/x3l.js'></script>
<script type='text/javascript' src='js/help.js'></script>
<script type='text/javascript' src='js/align.js'></script> <script type='text/javascript' src='js/ui_init.js'></script>
<script type='text/javascript' src='js/ui_menu.js'></script>
<script type='text/javascript' src='js/ui_help.js'></script>
<script type='text/javascript' src='js/ui_functions.js'></script>
<script type='text/javascript' src='js/ui_align.js'></script>
<link rel='stylesheet' type='text/css' href='js/leaflet/leaflet.css'></link> <link rel='stylesheet' type='text/css' href='js/leaflet/leaflet.css'></link>
<!-- <link rel='stylesheet' type='text/css' href='js/map.css'></link> --> <link rel='stylesheet' type='text/css' href='js/x3dom/x3dom.css'></link>
<link rel='stylesheet' type='text/css' href='js/x3dom.css'></link>
<!-- <link rel='stylesheet' type='text/css' href='js/index.css'></link> -->
<link rel='stylesheet' type='text/css' href='js/index.css'></link> <link rel='stylesheet' type='text/css' href='js/index.css'></link>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment