Egalware/web3d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Completato review classi in test!!! ok tablet

Browse Source
This commit is contained in:
Samuele Locatelli
2024-06-26 15:21:48 +02:00
parent 9b902473c2
commit ebdb36180e
4 changed files with 523 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebDoorView/3DM_test/test_js_call/index.html
+172 -156
View File
@@ -2,7 +2,7 @@
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<title> Door render </title>
<title>WebDoor3D Render </title>
<link rel = "stylesheet" href = "style.css">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
@@ -21,32 +21,32 @@
<div class="d-flex justify-content-between bg-dark bg-opacity-75">
<div class="p-2">
<div class="btn-group" role="group" aria-label="Mode">
<button id="btnOrto" class="btn btn-sm btn-light" onclick="setOrtho()" title="Ortho/ISO View"><i class="fas fa-cube"></i></button>
<button id="btnPers" class="btn btn-sm btn-secondary" onclick="setPersp()" title="Perspective View"><i class="fab fa-unity"></i></button>
<button id="btnOrto" class="btn btn-lg btn-light" onclick="setOrtho()" title="Ortho/ISO View"><i class="fas fa-cube"></i></button>
<button id="btnPers" class="btn btn-lg btn-secondary" onclick="setPersp()" title="Perspective View"><i class="fab fa-unity"></i></button>
</div>
<div class="btn-group" role="group" aria-label="Animation">
<button id="btnRotate" class="btn btn-sm btn-light" onclick="toggleRotate()" title="Toggle Rotate"><i class="fas fa-globe"></i></button>
<button id="btnQuote" class="btn btn-sm btn-light" onclick="toggleQuote()" title="Show Quotation"><i class="fas fa-ruler"></i></button>
<button id="btnGrid" class="btn btn-sm btn-light" onclick="toggleGrid()" title="Toggle Grid"><i class="fas fa-border-all"></i></button>
<button id="btnRotate" class="btn btn-lg btn-light" onclick="toggleRotate()" title="Toggle Rotate"><i class="fas fa-globe"></i></button>
<button id="btnQuote" class="btn btn-lg btn-light" onclick="toggleQuote()" title="Show Quotation"><i class="fas fa-ruler"></i></button>
<button id="btnGrid" class="btn btn-lg btn-light" onclick="toggleGrid()" title="Toggle Grid"><i class="fas fa-border-all"></i></button>
</div>
</div>
<div id ="divMenu2" class="p-2">
<div>
<button id="btnHelp" class="btn btn-sm btn-light" onclick="toggleHelp()" title="Hide/Show Menu"><i class="fas fa-question"></i></button>
<button id="btnHelp" class="btn btn-lg btn-light" onclick="toggleHelp()" title="Hide/Show Menu"><i class="fas fa-question"></i></button>
<!-- <div class="btn-group" role="group" aria-label="Mode">
<button id="btnOrto" class="btn btn-sm btn-light" onclick="setOrtho()" title="Ortho/ISO View"><i class="fas fa-cube"></i></button>
<button id="btnPers" class="btn btn-sm btn-secondary" onclick="setPersp()" title="Perspective View"><i class="fab fa-unity"></i></button>
<button id="btnOrto" class="btn btn-lg btn-light" onclick="setOrtho()" title="Ortho/ISO View"><i class="fas fa-cube"></i></button>
<button id="btnPers" class="btn btn-lg btn-secondary" onclick="setPersp()" title="Perspective View"><i class="fab fa-unity"></i></button>
</div> -->
<div class="btn-group" role="group" aria-label="Animation">
<button id="btnPause" class="btn btn-sm btn-secondary" onclick="toggleAnim()" title="Freeze model"><i class="fas fa-pause"></i></button>
<button id="btnPlay" class="btn btn-sm btn-light" onclick="toggleAnim()" title="Animation Active"><i class="fas fa-play"></i></button>
<button id="btnPause" class="btn btn-lg btn-secondary" onclick="toggleAnim()" title="Freeze model"><i class="fas fa-pause"></i></button>
<button id="btnPlay" class="btn btn-lg btn-light" onclick="toggleAnim()" title="Animation Active"><i class="fas fa-play"></i></button>
</div>
<!-- <div class="btn-group" role="group" aria-label="Animation">
<button id="btnRotate" class="btn btn-sm btn-light" onclick="toggleRotate()" title="Toggle Rotate"><i class="fas fa-globe"></i></button>
<button id="btnQuote" class="btn btn-sm btn-light" onclick="toggleQuote()" title="Show Quotation"><i class="fas fa-ruler"></i></button>
<button id="btnGrid" class="btn btn-sm btn-light" onclick="toggleGrid()" title="Toggle Grid"><i class="fas fa-border-all"></i></button>
<button id="btnRotate" class="btn btn-lg btn-light" onclick="toggleRotate()" title="Toggle Rotate"><i class="fas fa-globe"></i></button>
<button id="btnQuote" class="btn btn-lg btn-light" onclick="toggleQuote()" title="Show Quotation"><i class="fas fa-ruler"></i></button>
<button id="btnGrid" class="btn btn-lg btn-light" onclick="toggleGrid()" title="Toggle Grid"><i class="fas fa-border-all"></i></button>
</div> -->
<button id="btnReset" class="btn btn-sm btn-secondary" onclick="resetCamera()" title="Reset"><i class="fas fa-sync-alt"></i></button>
<button id="btnReset" class="btn btn-lg btn-secondary" onclick="resetCamera()" title="Reset"><i class="fas fa-sync-alt"></i></button>
</div>
<div id = "infoDiv">
<ul class="list-group list-group-sm small" style="font-size: 0.75em;">
@@ -66,62 +66,62 @@
<div>
Toggle Show-Cube : <b>C</b>
</div>
<button class="btn btn-sm btn-primary py-0" onclick="toggleCube()">C</button>
<button class="btn btn-lg btn-primary py-0" onclick="toggleCube()">C</button>
</li>
<li class="list-group-item p-1 d-flex justify-content-between">
<div>
Toggle Show-Frame : <b>F</b>
</div>
<button class="btn btn-sm btn-primary py-0" onclick="toggleFrame()">F</button>
<button class="btn btn-lg btn-primary py-0" onclick="toggleFrame()">F</button>
</li> -->
<li class="list-group-item p-1 d-flex justify-content-between">
<div><b>Iso / Ortho</b></div>
<div>
<i class="fas fa-cube"></i> | key : <b>O</b>
</div>
<!-- <button class="btn btn-sm btn-primary py-1" onclick="setOrtho()"><i class="fas fa-cube"></i></button> -->
<!-- <button class="btn btn-lg btn-primary py-1" onclick="setOrtho()"><i class="fas fa-cube"></i></button> -->
</li>
<li class="list-group-item p-1 d-flex justify-content-between">
<div><b>Perspective</b></div>
<div>
<i class="fab fa-unity"></i> | key : <b>P</b>
</div>
<!-- <button class="btn btn-sm btn-primary py-1" onclick="setPersp()"><i class="fab fa-unity"></i></button> -->
<!-- <button class="btn btn-lg btn-primary py-1" onclick="setPersp()"><i class="fab fa-unity"></i></button> -->
</li>
<li class="list-group-item p-1 d-flex justify-content-between">
<div><b>AutoRotate</b></div>
<div>
<i class="fas fa-globe"></i> | key : <b>R</b>
</div>
<!-- <button class="btn btn-sm btn-primary py-1" onclick="toggleRotate()"><i class="fas fa-globe"></i></button> -->
<!-- <button class="btn btn-lg btn-primary py-1" onclick="toggleRotate()"><i class="fas fa-globe"></i></button> -->
</li>
<li class="list-group-item p-1 d-flex justify-content-between">
<div><b>Quotes</b></div>
<div>
<i class="fas fa-ruler"></i> | key : <b>Q</b>
</div>
<!-- <button class="btn btn-sm btn-primary py-1" onclick="toggleQuote()"><i class="fas fa-ruler"></i></button> -->
<!-- <button class="btn btn-lg btn-primary py-1" onclick="toggleQuote()"><i class="fas fa-ruler"></i></button> -->
</li>
<li class="list-group-item p-1 d-flex justify-content-between">
<div><b>Grid</b></div>
<div>
<i class="fas fa-border-all"></i> | key : <b>G</b>
</div>
<!-- <button class="btn btn-sm btn-primary py-1" onclick="toggleGrid()"></button> -->
<!-- <button class="btn btn-lg btn-primary py-1" onclick="toggleGrid()"></button> -->
</li>
<li class="list-group-item p-1 d-flex justify-content-between">
<div><b>Reset</b></div>
<div>
<i class="fas fa-sync-alt"></i> | key: <b>SpaceBar</b>
</div>
<!-- <button class="btn btn-sm btn-primary py-1" onclick="resetCamera()"><i class="fas fa-sync-alt"></i></button> -->
<!-- <button class="btn btn-lg btn-primary py-1" onclick="resetCamera()"><i class="fas fa-sync-alt"></i></button> -->
</li>
<li class="list-group-item p-1 d-flex justify-content-between">
<div><b>Menu</b></div>
<div>
<i class="fas fa-question"></i> | key : <b>H</b>
</div>
<!-- <button class="btn btn-sm btn-primary py-1" onclick="toggleHelp()"><i class="fas fa-question small"></i></button> -->
<!-- <button class="btn btn-lg btn-primary py-1" onclick="toggleHelp()"><i class="fas fa-question small"></i></button> -->
</li>
</ul>
</div>
@@ -149,11 +149,11 @@
import { webgl_original } from "./lib/node_modules/webgl-door-visualizer/webgl_draw.js";
const WGL = new webgl_original();
const infoDiv = document.getElementById( "infoDiv") ;
const doorDiv = document.getElementById( "DoorRender") ;
const axisDiv = document.getElementById( "RefRender") ;
const cubeDiv = document.getElementById( "Ref1Render") ;
infoDiv.style.display = "none";
var isAnimated = true;
var isRotating = true;
@@ -164,10 +164,105 @@
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);
}
// set 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
@@ -186,140 +281,41 @@
else
infoDiv.style.display = "none";
}
function toggleFreeze()
function fixAnimate(setRotate)
{
isAnimated = !isAnimated;
if( isAnimated )
{
document.getElementById("btnPlay").className = "btn btn-sm btn-light";
document.getElementById("btnPause").className = "btn btn-sm btn-secondary";
isRotating = true;
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-sm btn-secondary";
document.getElementById("btnPause").className = "btn btn-sm btn-light";
isRotating = false;
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 toggleAnim()
window.toggleAnim = () =>
{
toggleFreeze();
}
// reset camera
window.resetCamera = () =>
{
console.log("Reset Camera");
document.getElementById("btnReset").className = "btn btn-sm btn-light";
WGL.resetCamera();
var millisecondsToWait = 500;
setTimeout(function() {
document.getElementById("btnReset").className = "btn btn-sm btn-secondary";
}, millisecondsToWait);
}
// reset camera
window.setOrtho = () =>
{
console.log("Set Camera ISO/ORTHO");
document.getElementById("btnOrto").className = "btn btn-sm btn-light";
document.getElementById("btnPers").className = "btn btn-sm btn-secondary";
WGL.setCameraOrtho();
}
// reset camera
window.setPersp = () =>
{
console.log("Set Camera Perspective");
document.getElementById("btnOrto").className = "btn btn-sm btn-secondary";
document.getElementById("btnPers").className = "btn btn-sm btn-light";
WGL.setCameraPersp();
}
// // toggle cubo
// window.toggleCube = () =>
// {
// console.log("Toggle Cubo");
// WGL.toggleCube();
// }
// // toggle frame
// window.toggleFrame = () =>
// {
// console.log("Toggle Frame");
// WGL.toggleFrame();
// }
// toggle griglia
window.toggleGrid = () =>
{
console.log("Toggle Grid");
showGrid = !showGrid;
if(showGrid)
{
document.getElementById("btnGrid").className = "btn btn-sm btn-light";
}
else{
document.getElementById("btnGrid").className = "btn btn-sm 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-sm btn-light";
}
else{
document.getElementById("btnQuote").className = "btn btn-sm btn-secondary";
}
WGL.toggleQuotes();
}
// toggle rotazione
window.toggleRotate = () =>
{
console.log("Toggle Rotate");
isRotating = !isRotating;
fixBtnRotate();
WGL.toggleRotation();
}
function fixBtnRotate()
{
var cssClass = "btn btn-sm btn-secondary";
var cssClass = "btn btn-lg btn-secondary";
if(isRotating)
{
cssClass = "btn btn-sm btn-light";
cssClass = "btn btn-lg btn-light";
}
document.getElementById("btnRotate").className = cssClass;
}
// Event Listner -------------------------------------------------------------------
// KEY
document.addEventListener( "keypress", onKeyPress) ;
function onKeyPress( event) {
if ( event.key.toLowerCase() === "r")
@@ -346,27 +342,47 @@
toggleAnim();
}
// Aggiunto event listeners
infoDiv.style.display = "none";
function checkButton(event)
{
switch(event.button){
case 0:
// salto!
break;
default:
reAnimate();
break;
}
}
// controllo click x avviare se fosse fermo...
// ["click", "ontouchstart", "drag", "auxclick"].forEach(evt =>
["click", "ontouchstart"].forEach(evt =>
doorDiv.addEventListener( evt , toggleAnim ) );
axisDiv.addEventListener( "click", toggleAnim ) ;
cubeDiv.addEventListener( "click", toggleAnim ) ;
function reAnimate()
{
if( !isAnimated )
{
isAnimated = true;
fixAnimate(false);
}
}
// /**
// * Dispose: rimuovo tutti gli eventListener
// */
// this.dispose = function () {
// document.removeEventListener( "keypress", onKeyPress(event));
// ["click", "ontouchstart"].forEach(evt => doorDiv.removeEventListener( evt , toggleAnim ) );
// axisDiv.removeEventListener( "click", toggleAnim ) ;
// cubeDiv.removeEventListener( "click", toggleAnim ) ;
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 );
// }
</script>
</body>
WebDoorView/3DM_test/test_js_call/index_2.html
+126 -34
View File
@@ -2,9 +2,12 @@
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<title> Door render </title>
<title>WebDoor3D Render </title>
<link rel = "stylesheet" href = "style.css">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script type = "importmap">
{
"imports": {
@@ -15,43 +18,132 @@
</script>
</head>
<body>
<!-- definition of Menu -->
<div id = 'divMenu'>
<!-- 3 elements: Logo, button "?" and Information -->
<div class = 'container'>
<img id = 'imgLogo' src = 'Images/logo.png'>
<div class="d-flex justify-content-between bg-dark bg-opacity-75">
<div class="p-2">
<div class="btn-group" role="group" aria-label="Mode">
<button id="btnOrto" class="btn btn-lg btn-light" onclick="setOrtho()" title="Ortho/ISO View"><i class="fas fa-cube"></i></button>
<button id="btnPers" class="btn btn-lg btn-secondary" onclick="setPersp()" title="Perspective View"><i class="fab fa-unity"></i></button>
</div>
<div class="btn-group" role="group" aria-label="Animation">
<button id="btnRotate" class="btn btn-lg btn-light" onclick="toggleRotate()" title="Toggle Rotate"><i class="fas fa-globe"></i></button>
<button id="btnQuote" class="btn btn-lg btn-light" onclick="toggleQuote()" title="Show Quotation"><i class="fas fa-ruler"></i></button>
<button id="btnGrid" class="btn btn-lg btn-light" onclick="toggleGrid()" title="Toggle Grid"><i class="fas fa-border-all"></i></button>
</div>
</div>
<div class = 'container'>
<button id = 'helpButton'>?</button>
</div>
<div class = 'container'>
<div id = 'infoDiv'>
<pre>
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
</pre>
<div id ="divMenu2" class="p-2">
<div>
<button id="btnHelp" class="btn btn-lg btn-light" onclick="toggleHelp()" title="Hide/Show Menu"><i class="fas fa-question"></i></button>
<!-- <div class="btn-group" role="group" aria-label="Mode">
<button id="btnOrto" class="btn btn-lg btn-light" onclick="setOrtho()" title="Ortho/ISO View"><i class="fas fa-cube"></i></button>
<button id="btnPers" class="btn btn-lg btn-secondary" onclick="setPersp()" title="Perspective View"><i class="fab fa-unity"></i></button>
</div> -->
<div class="btn-group" role="group" aria-label="Animation">
<button id="btnPause" class="btn btn-lg btn-secondary" onclick="toggleAnim()" title="Freeze model"><i class="fas fa-pause"></i></button>
<button id="btnPlay" class="btn btn-lg btn-light" onclick="toggleAnim()" title="Animation Active"><i class="fas fa-play"></i></button>
</div>
<!-- <div class="btn-group" role="group" aria-label="Animation">
<button id="btnRotate" class="btn btn-lg btn-light" onclick="toggleRotate()" title="Toggle Rotate"><i class="fas fa-globe"></i></button>
<button id="btnQuote" class="btn btn-lg btn-light" onclick="toggleQuote()" title="Show Quotation"><i class="fas fa-ruler"></i></button>
<button id="btnGrid" class="btn btn-lg btn-light" onclick="toggleGrid()" title="Toggle Grid"><i class="fas fa-border-all"></i></button>
</div> -->
<button id="btnReset" class="btn btn-lg btn-secondary" onclick="resetCamera()" title="Reset"><i class="fas fa-sync-alt"></i></button>
</div>
<div id = "infoDiv">
<ul class="list-group list-group-sm small" style="font-size: 0.75em;">
<li class="list-group-item p-1 active text-start">
<b>Camera settings</b>
</li>
<li class="list-group-item p-1 d-flex justify-content-between">
<b>Zoom</b> Wheel-Scroll
</li>
<li class="list-group-item p-1 d-flex justify-content-between">
<b>Pan</b> Drag Mouse-Wheel
</li>
<li class="list-group-item p-1 d-flex justify-content-between">
<b>Rotate</b> CTRL + Drag Mouse-Wheel
</li>
<!-- <li class="list-group-item p-1 d-flex justify-content-between">
<div>
Toggle Show-Cube : <b>C</b>
</div>
<button class="btn btn-sm btn-primary py-0" onclick="toggleCube()">C</button>
</li>
<li class="list-group-item p-1 d-flex justify-content-between">
<div>
Toggle Show-Frame : <b>F</b>
</div>
<button class="btn btn-sm btn-primary py-0" onclick="toggleFrame()">F</button>
</li> -->
<li class="list-group-item p-1 d-flex justify-content-between">
<div><b>Iso / Ortho</b></div>
<div>
<i class="fas fa-cube"></i> | key : <b>O</b>
</div>
<!-- <button class="btn btn-sm btn-primary py-1" onclick="setOrtho()"><i class="fas fa-cube"></i></button> -->
</li>
<li class="list-group-item p-1 d-flex justify-content-between">
<div><b>Perspective</b></div>
<div>
<i class="fab fa-unity"></i> | key : <b>P</b>
</div>
<!-- <button class="btn btn-sm btn-primary py-1" onclick="setPersp()"><i class="fab fa-unity"></i></button> -->
</li>
<li class="list-group-item p-1 d-flex justify-content-between">
<div><b>AutoRotate</b></div>
<div>
<i class="fas fa-globe"></i> | key : <b>R</b>
</div>
<!-- <button class="btn btn-sm btn-primary py-1" onclick="toggleRotate()"><i class="fas fa-globe"></i></button> -->
</li>
<li class="list-group-item p-1 d-flex justify-content-between">
<div><b>Quotes</b></div>
<div>
<i class="fas fa-ruler"></i> | key : <b>Q</b>
</div>
<!-- <button class="btn btn-sm btn-primary py-1" onclick="toggleQuote()"><i class="fas fa-ruler"></i></button> -->
</li>
<li class="list-group-item p-1 d-flex justify-content-between">
<div><b>Grid</b></div>
<div>
<i class="fas fa-border-all"></i> | key : <b>G</b>
</div>
<!-- <button class="btn btn-sm btn-primary py-1" onclick="toggleGrid()"></button> -->
</li>
<li class="list-group-item p-1 d-flex justify-content-between">
<div><b>Reset</b></div>
<div>
<i class="fas fa-sync-alt"></i> | key: <b>SpaceBar</b>
</div>
<!-- <button class="btn btn-sm btn-primary py-1" onclick="resetCamera()"><i class="fas fa-sync-alt"></i></button> -->
</li>
<li class="list-group-item p-1 d-flex justify-content-between">
<div><b>Menu</b></div>
<div>
<i class="fas fa-question"></i> | key : <b>H</b>
</div>
<!-- <button class="btn btn-sm btn-primary py-1" onclick="toggleHelp()"><i class="fas fa-question small"></i></button> -->
</li>
</ul>
</div>
</div>
</div>
<div id="divLogo" class="bg-dark bg-opacity-50 bg-gradient p-1 small text-light text-center">
<img class="img-fluid" src ="Images/LogoEgw.png" height="32" />
<small>EgalWare</small>
</div>
<div id = "DoorRender"></div>
<div id = "RefRender"></div>
<div id = "Ref1Render"></div>
<div class="fixed-bottom small">
<div class="d-flex justify-content-between bg-dark text-light">
<div class="px-2">
WebDoor 3D
</div>
<div class="px-2">
Egalware | <a class="text-light text-decoration-none" href="https://www.egalware.com/" target="_blank"><img class="img-fluid" width="16" src="images/LogoEgw.png" /></a>
</div>
</div>
</div>
<div id = 'DoorRender'></div>
<div id = 'RefRender'></div>
<div id = 'Ref1Render'></div>
<script type = 'module' src="./lib/node_modules/webgl-door-visualizer/webgl_draw.js"></script>
<script type = 'module' src="./lib/node_modules/webgl-door-visualizer/draw_call.js"></script>
WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/draw_call.js
Generated Vendored
+223 -8
View File
@@ -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 );
WebDoorView/3DM_test/test_js_call/style.css
+2 -2
View File
@@ -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;