Samuele Locatelli
366 lines
16 KiB
HTML
366 lines
16 KiB
HTML
<html lang = "en">
|
|
<head>
|
|
<meta charset = "UTF-8">
|
|
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
|
|
<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": {
|
|
"three": "./lib/node_modules/webgl-door-visualizer/three.module.js",
|
|
"three/addons/": "./lib/node_modules/webgl-door-visualizer/"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<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 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="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>
|
|
<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><b>Iso / Ortho</b></div>
|
|
<div>
|
|
<i class="fas fa-cube"></i> | key : <b>O</b>
|
|
</div>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
<script type = "module" src="./lib/node_modules/webgl-door-visualizer/webgl_draw.js"></script>
|
|
<script type = "module">
|
|
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 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")
|
|
}
|
|
|
|
// 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
|
|
const queryString = window.location.search ;
|
|
// create URLSearchParams object from query string
|
|
const urlParams = new URLSearchParams( queryString) ;
|
|
// get parameter value by name
|
|
return urlParams.get( name) ;
|
|
}
|
|
|
|
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) {
|
|
|
|
switch (event.key.toLowerCase() ){
|
|
case " ":
|
|
resetCamera();
|
|
break;
|
|
case "a":
|
|
toggleAnim();
|
|
break;
|
|
case "h":
|
|
toggleMenu();
|
|
break;
|
|
case "g":
|
|
toggleGrid();
|
|
break;
|
|
case "o":
|
|
setOrtho();
|
|
break;
|
|
case "p":
|
|
setPersp();
|
|
break;
|
|
case "q":
|
|
toggleQuote();
|
|
break;
|
|
case "r":
|
|
toggleRotate();
|
|
break;
|
|
}
|
|
}
|
|
|
|
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 );
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |