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

update gestione start/stop animazione

Browse Source
This commit is contained in:
Samuele Locatelli
2024-06-25 12:32:00 +02:00
parent 4860c824af
commit 8de856ba4c
1 changed files with 48 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebDoorView/3DM_test/test_js_call/index3.html
+48 -6
View File
@@ -6,6 +6,7 @@
<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": {
@@ -25,7 +26,7 @@
<div class="d-flex">
</div>
<div class = 'container'>
<button class="btn btn-sm btn-light" id = 'helpButton'>?</button>
<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>
@@ -34,12 +35,12 @@
<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 class="btn btn-sm btn-light" onclick="doFreeze()">A</button>
<button class="btn btn-sm btn-light" onclick="doAnim()">S</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 small">
<ul class="list-group list-group-sm small">
<li class="list-group-item active">
<b>Camera settings</b>
</li>
@@ -115,6 +116,7 @@
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',
@@ -144,11 +146,23 @@
// imposta animazione vs freezed
window.doFreeze = () =>
{
WGL.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 = () =>
{
WGL.doAnimate();
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
@@ -234,6 +248,34 @@
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>