Samuele Locatelli
281 lines
12 KiB
HTML
281 lines
12 KiB
HTML
<html lang = "en">
|
|
<head>
|
|
<meta charset = "UTF-8">
|
|
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
|
|
<title> Door 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.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
|
<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>
|
|
<!-- definition of Menu -->
|
|
<div id = 'divMenu'>
|
|
<!-- 3 elements: Logo, button "?" and Information -->
|
|
<div class = 'container'>
|
|
<img id = 'imgLogo' src = 'Images/logo.png'>
|
|
</div>
|
|
<div class="d-flex">
|
|
</div>
|
|
<div class = 'container'>
|
|
<button class="btn btn-sm btn-light" id = 'helpButton'><i class="fas fa-question"></i></button>
|
|
<!-- <button class="btn btn-sm btn-light" onclick="resetCamera()">bar</button>
|
|
<button class="btn btn-sm btn-light" onclick="setOrtho()">O</button>
|
|
<button class="btn btn-sm btn-light" onclick="setPersp()">P</button>
|
|
<button class="btn btn-sm btn-light" onclick="toggleCube()">C</button>
|
|
<button class="btn btn-sm btn-light" onclick="toggleFrame()">F</button>
|
|
<button class="btn btn-sm btn-light" onclick="toggleGrid()">G</button>
|
|
<button class="btn btn-sm btn-light" onclick="toggleQuote()">Q</button>
|
|
<button class="btn btn-sm btn-light" onclick="toggleRotate()">R</button> -->
|
|
<button id="btnPause" class="btn btn-sm btn-light" onclick="doFreeze()"><i class="fas fa-pause"></i></button>
|
|
<button id="btnPlay" class="btn btn-sm btn-secondary disabled" onclick="doAnim()"><i class="fas fa-play"></i></button>
|
|
</div>
|
|
<div class = 'container'>
|
|
<div id = 'infoDiv'>
|
|
<ul class="list-group list-group-sm small">
|
|
<li class="list-group-item active">
|
|
<b>Camera settings</b>
|
|
</li>
|
|
<li class="list-group-item 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 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 d-flex justify-content-between">
|
|
<div>
|
|
Toggle Show-Grid : <b>G</b>
|
|
</div>
|
|
<button class="btn btn-sm btn-primary py-0" onclick="toggleGrid()">G</button>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between">
|
|
<div>
|
|
Toggle Show-Quotes : <b>Q</b>
|
|
</div>
|
|
<button class="btn btn-sm btn-primary py-0" onclick="toggleQuote()">Q</button>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between">
|
|
<div>
|
|
Toggle Auto-rotation : <b>R</b>
|
|
</div>
|
|
<button class="btn btn-sm btn-primary py-0" onclick="toggleRotate()">R</button>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between">
|
|
<div>
|
|
Center: <b>SpaceBar</b>
|
|
</div>
|
|
<button class="btn btn-sm btn-primary py-0" onclick="resetCamera()">_</button>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between">
|
|
<div>
|
|
ISO/ORTHO: <b>O</b> ( orthographic )
|
|
</div>
|
|
<button class="btn btn-sm btn-primary py-0" onclick="setOrtho()">O</button>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between">
|
|
<div>
|
|
PERSP: <b>P</b> ( perspective )
|
|
</div>
|
|
<button class="btn btn-sm btn-primary py-0" onclick="setPersp()">P</button>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between">
|
|
<b>Zoom</b> Wheel-Scroll
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between">
|
|
<b>Pan</b> Mouse-Wheel and Drag
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between">
|
|
<b>Rotate</b> CTRL + Mouse-Right + Drag
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id = 'DoorRender'></div>
|
|
<div id = 'RefRender'></div>
|
|
<div id = 'Ref1Render'></div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
|
<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();
|
|
var isFreezed = 0;
|
|
|
|
let options ={
|
|
modelPath: 'https://iis01.egalware.com/Test3D/THREEJS_DOORS/Door_models',
|
|
fName: getUrlParameter('src')
|
|
}
|
|
|
|
// init controllo
|
|
WGL.initcall(options);
|
|
|
|
// 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) ;
|
|
}
|
|
|
|
// reset camera
|
|
window.resetCamera = () =>
|
|
{
|
|
console.log("Reset Camera");
|
|
WGL.resetCamera();
|
|
}
|
|
|
|
// imposta animazione vs freezed
|
|
window.doFreeze = () =>
|
|
{
|
|
if(isFreezed == 0)
|
|
{
|
|
isFreezed = 1;
|
|
document.getElementById("btnPlay").className = "btn btn-sm btn-light";
|
|
document.getElementById("btnPause").className = "btn btn-sm btn-secondary disabled";
|
|
WGL.doFreeze();
|
|
}
|
|
}
|
|
window.doAnim = () =>
|
|
{
|
|
if(isFreezed == 1)
|
|
{
|
|
isFreezed = 0;
|
|
document.getElementById("btnPlay").className = "btn btn-sm btn-secondary disabled";
|
|
document.getElementById("btnPause").className = "btn btn-sm btn-light";
|
|
WGL.doAnimate();
|
|
}
|
|
}
|
|
|
|
// reset camera
|
|
window.setOrtho = () =>
|
|
{
|
|
console.log("Set Camera ISO/ORTHO");
|
|
WGL.setCameraOrtho();
|
|
}
|
|
|
|
// reset camera
|
|
window.setPersp = () =>
|
|
{
|
|
console.log("Set Camera Perspective");
|
|
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");
|
|
WGL.toggleGrid();
|
|
}
|
|
|
|
// toggle quotatura
|
|
window.toggleQuote = () =>
|
|
{
|
|
console.log("Toggle Quote");
|
|
WGL.toggleQuotes();
|
|
}
|
|
|
|
// toggle rotazione
|
|
window.toggleRotate = () =>
|
|
{
|
|
console.log("Toggle Rotate");
|
|
WGL.toggleRotation();
|
|
}
|
|
|
|
// Event Listner -------------------------------------------------------------------
|
|
// KEY
|
|
document.addEventListener( "keypress", function( 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();
|
|
}) ;
|
|
|
|
// Elements
|
|
var helpButton = document.getElementById( "helpButton") ;
|
|
var infoDiv = document.getElementById( "infoDiv") ;
|
|
infoDiv.style.display = "none";
|
|
helpButton.addEventListener( "click", function() {
|
|
if ( infoDiv.style.display === "none")
|
|
infoDiv.style.display = "block" ;
|
|
else
|
|
infoDiv.style.display = "none";
|
|
}) ;
|
|
|
|
// controllo click x avviare se fosse fermo...
|
|
var doorDiv = document.getElementById( "DoorRender") ;
|
|
doorDiv.addEventListener( "click", function( event) {
|
|
if(isFreezed ==1)
|
|
{
|
|
doAnim();
|
|
}
|
|
// 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();
|
|
}) ;
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |