182 lines
6.4 KiB
HTML
182 lines
6.4 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">
|
|
<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 id = 'helpButton'>?</button>
|
|
<button onclick="resetCamera()">bar</button>
|
|
<button onclick="setOrtho()">O</button>
|
|
<button onclick="setPersp()">P</button>
|
|
<button onclick="toggleCube()">C</button>
|
|
<button onclick="toggleFrame()">F</button>
|
|
<button onclick="toggleGrid()">G</button>
|
|
<button onclick="toggleQuote()">Q</button>
|
|
<button onclick="toggleRotate()">R</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-Quotes : Key-Q
|
|
|
|
Toggle Show-Cube : Key-C
|
|
|
|
Toggle Show-Frame : Key-F
|
|
|
|
Toggle Show-Grid : Key-G
|
|
</pre>
|
|
</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'>
|
|
import { webgl_original } from './lib/node_modules/webgl-door-visualizer/webgl_draw.js';
|
|
|
|
const WGL = new webgl_original();
|
|
|
|
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();
|
|
}
|
|
|
|
// 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";
|
|
}) ;
|
|
|
|
</script>
|
|
</body>
|
|
</html> |