Samuele Locatelli
124 lines
7.4 KiB
HTML
124 lines
7.4 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> -->
|
|
<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' src="./lib/node_modules/webgl-door-visualizer/draw_call.js"></script>
|
|
</body>
|
|
</html> |