-
-
+
+
-
-
-
+
+
+
-
+
-
-
+
+
-
+
-
@@ -66,62 +66,62 @@
-
Toggle Show-Frame : F- + -->
-
Iso / Ortho| key : O- +
-
Perspective| key : P- +
-
AutoRotate| key : R- +
-
Quotes| key : Q- +
-
Grid| key : G- +
-
Reset| key: SpaceBar- +
-
Menu| key : H- +
Toggle Show-Cube : C
-
+
-
-
- 
+
+
+
+
-
+
+
+
+
+
+
+
+
-
-
-
-
-
+ - Camera settings : - Zoom : Wheel-Scroll - Pan : Mouse-Wheel and Drag - Rotate : Key-CTRL + Mouse-Right and Drag - Center : Key-'Space' - Type : Key-O ( orthographic ) - Key-P ( perspective ) - - Toggle Auto-rotation : Key-R - - Toggle Show-Dimension : Key-D - - Toggle Show-Cube : Key-C - - Toggle Show-Frame : Key-F - - Toggle Show-Grid : Key-G -+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
- + Camera settings + +
- + Zoom Wheel-Scroll + +
- + Pan Drag Mouse-Wheel + +
- + Rotate CTRL + Drag Mouse-Wheel + + +
-
+ Iso / Ortho++ | key : O ++ +
+
-
+ Perspective++ | key : P ++ +
+
-
+ AutoRotate++ | key : R ++ +
+
-
+ Quotes++ | key : Q ++ +
+
-
+ Grid++ | key : G ++ +
+
-
+ Reset++ | key: SpaceBar ++ +
+
-
+ Menu++ | key : H ++ +
+
+ 
+ EgalWare
+
+
+
+
+
+ EgalWare
+
+
-
-
-
-
diff --git a/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/draw_call.js b/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/draw_call.js
index cbd529e..429da9a 100644
--- a/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/draw_call.js
+++ b/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/draw_call.js
@@ -1,20 +1,235 @@
-import { webgl_original } from './webgl_draw.js';
+import { webgl_original } from "./webgl_draw.js";
const WGL = new webgl_original();
+const infoDiv = document.getElementById( "infoDiv") ;
+const doorDiv = document.getElementById( "DoorRender") ;
+const cubeDiv = document.getElementById( "Ref1Render") ;
+infoDiv.style.display = "none";
+
+var isAnimated = true;
+var isRotating = true;
+var showQuote = true;
+var showGrid = true;
+
let options ={
- modelPath: 'https://iis01.egalware.com/Test3D/THREEJS_DOORS/Door_models',
- fName: getUrlParameter('src')
+ modelPath: "https://iis01.egalware.com/Test3D/THREEJS_DOORS/Door_models",
+ fName: getUrlParameter("src")
}
+// init controllo
+WGL.initcall(options);
+
+// ---------------------------------------------------
+// Funzioni pubbliche
+// ---------------------------------------------------
+window.toggleAnim = () =>
+{
+ isAnimated = !isAnimated;
+ fixAnimate(true);
+}
+
+// reset camera
+window.resetCamera = () =>
+{
+ console.log("Reset Camera");
+ document.getElementById("btnReset").className = "btn btn-lg btn-light";
+ isAnimated = true;
+ // isRotating = true;
+ fixAnimate(true);
+ // fixBtnRotate();
+ // WGL.toggleRotation();
+ WGL.resetCamera();
+ var millisecondsToWait = 500;
+ setTimeout(function() {
+ document.getElementById("btnReset").className = "btn btn-lg btn-secondary";
+ }, millisecondsToWait);
+}
+
+// reset camera persp
+window.setOrtho = () =>
+{
+ console.log("Set Camera ISO/ORTHO");
+ document.getElementById("btnOrto").className = "btn btn-lg btn-light";
+ document.getElementById("btnPers").className = "btn btn-lg btn-secondary";
+ WGL.setCameraOrtho();
+}
+
+// reset camera persp
+window.setPersp = () =>
+{
+ console.log("Set Camera Perspective");
+ document.getElementById("btnOrto").className = "btn btn-lg btn-secondary";
+ document.getElementById("btnPers").className = "btn btn-lg btn-light";
+ WGL.setCameraPersp();
+}
+
+// toggle griglia
+window.toggleGrid = () =>
+{
+ console.log("Toggle Grid");
+ showGrid = !showGrid;
+ if(showGrid)
+ {
+ document.getElementById("btnGrid").className = "btn btn-lg btn-light";
+ }
+ else{
+ document.getElementById("btnGrid").className = "btn btn-lg btn-secondary";
+ }
+ WGL.toggleGrid();
+}
+
+// toggle quotatura
+window.toggleHelp = () =>
+{
+ console.log("Toggle Menu");
+ toggleMenu();
+}
+
+// toggle quotatura
+window.toggleQuote = () =>
+{
+ console.log("Toggle Quote");
+ showQuote = !showQuote;
+ if(showQuote)
+ {
+ document.getElementById("btnQuote").className = "btn btn-lg btn-light";
+ }
+ else{
+ document.getElementById("btnQuote").className = "btn btn-lg btn-secondary";
+ }
+ WGL.toggleQuotes();
+}
+
+// toggle rotazione
+window.toggleRotate = () =>
+{
+ console.log("Toggle Rotate");
+ isRotating = !isRotating;
+ fixBtnRotate();
+ WGL.toggleRotation();
+}
+
+// ---------------------------------------------------
+// Funzioni private
+// ---------------------------------------------------
+
// Reading URL parameters -------------------------------------------------------------------------
function getUrlParameter( name) {
// get query string from URL
- const queryString = window.location.search ;
+ const queryString = window.location.search ;
// create URLSearchParams object from query string
- const urlParams = new URLSearchParams( queryString) ;
+ const urlParams = new URLSearchParams( queryString) ;
// get parameter value by name
- return urlParams.get( name) ;
- }
+ return urlParams.get( name) ;
+}
-WGL.initcall(options);
+function toggleMenu()
+{
+ console.log("Toggle Menu Camera");
+ if ( infoDiv.style.display == "none")
+ infoDiv.style.display = "block" ;
+ else
+ infoDiv.style.display = "none";
+}
+
+function fixAnimate(setRotate)
+{
+ if( isAnimated )
+ {
+ document.getElementById("btnPlay").className = "btn btn-lg btn-light";
+ document.getElementById("btnPause").className = "btn btn-lg btn-secondary";
+ if(setRotate)
+ isRotating = true;
+ fixBtnRotate();
+ WGL.setRotate(isRotating);
+ WGL.doAnimate();
+ }
+ else
+ {
+ document.getElementById("btnPlay").className = "btn btn-lg btn-secondary";
+ document.getElementById("btnPause").className = "btn btn-lg btn-light";
+ if(setRotate)
+ isRotating = false;
+ fixBtnRotate();
+ WGL.setRotate(isRotating);
+ WGL.doFreeze();
+ }
+}
+
+
+function fixBtnRotate()
+{
+ var cssClass = "btn btn-lg btn-secondary";
+ if(isRotating)
+ {
+ cssClass = "btn btn-lg btn-light";
+ }
+ document.getElementById("btnRotate").className = cssClass;
+}
+
+function onKeyPress( event) {
+ if ( event.key.toLowerCase() === "r")
+ toggleRotate();
+ else if ( event.key.toLowerCase() === "p") {
+ setPersp();
+ }
+ else if ( event.key.toLowerCase() === "o") {
+ setOrtho();
+ }
+ else if ( event.key.toLowerCase() === "q")
+ toggleQuote();
+ else if ( event.key.toLowerCase() === " ")
+ resetCamera();
+ // else if ( event.key.toLowerCase() === "c")
+ // toggleCube();
+ // else if ( event.key.toLowerCase() === "f")
+ // toggleFrame();
+ else if ( event.key.toLowerCase() === "g")
+ toggleGrid();
+ else if ( event.key.toLowerCase() === "h")
+ toggleMenu();
+ else if ( event.key.toLowerCase() === "a")
+ toggleAnim();
+}
+
+function checkButton(event)
+{
+ switch(event.button){
+ case 0:
+ // salto!
+ break;
+ default:
+ reAnimate();
+ break;
+ }
+}
+
+function reAnimate()
+{
+ if( !isAnimated )
+ {
+ isAnimated = true;
+ fixAnimate(false);
+ }
+}
+
+function reAnimateRotate()
+{
+ if( !isAnimated )
+ {
+ isAnimated = true;
+ fixAnimate(true);
+ }
+}
+
+
+// Event Listner -------------------------------------------------------------------
+// KEY
+document.addEventListener( "keypress", onKeyPress) ;
+doorDiv.addEventListener( 'pointerup', checkButton );
+doorDiv.addEventListener( 'touchstart', reAnimate );
+// doorDiv.addEventListener( 'touchend', reAnimate );
+// doorDiv.addEventListener( 'touchcancel', reAnimate );
+doorDiv.addEventListener( 'touchmove', reAnimateRotate );
+doorDiv.addEventListener( 'click', toggleAnim );
\ No newline at end of file
diff --git a/WebDoorView/3DM_test/test_js_call/style.css b/WebDoorView/3DM_test/test_js_call/style.css
index d7dcc37..3cc604c 100644
--- a/WebDoorView/3DM_test/test_js_call/style.css
+++ b/WebDoorView/3DM_test/test_js_call/style.css
@@ -21,8 +21,8 @@ canvas {
#divLogo{
position: fixed ;
- top: 3rem;
- right: 0.5rem;
+ top: 3.5rem;
+ right: 0.3rem;
height: 5rem;
width: 4rem;
font-size: 0.8rem;
+
+ WebDoor 3D
+
+
+ Egalware | 