Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@phovorka
phovorka authored Feb 8, 2024
1 parent 9471a63 commit 3cd1850
Show file tree
Hide file tree
Showing 4 changed files with 1,885 additions and 0 deletions.
151 changes: 151 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html>
<head>
<title>Assembly3D</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link
rel="icon"
type="image/svg"
href="https://cdn.glitch.global/82e9051b-34b9-4596-8cb8-f6f8421193ef/Assembly3d%20(1).svg?v=1671275227588"
/>
<script type="module" src="model-viewer.min.js"></script>
<script src="script.js" defer></script>
</head>

<body>
<div class="assembly-Instruction">
<div class="header">
<img
src="https://cdn.glitch.global/82e9051b-34b9-4596-8cb8-f6f8421193ef/Assembly3d%20(1).svg?v=1671275227588"
height="20px"
style="padding: 8px"
/>
<h3>Assembly instruction</h3>
</div>

<div class="viewer">
<model-viewer
camera-controls
enable-pan
camera-orbit="54.31deg 66.45deg auto"
min-camera-orbit="auto 0deg auto"
max-camera-orbit="auto 180deg auto"
touch-action="none"
class="model"
autoplay
shadow-intensity="1"
src="https://cdn.glitch.global/82e9051b-34b9-4596-8cb8-f6f8421193ef/BEDBlenderNoAnim.glb?v=1664801803206"
interaction-prompt="none"
>
<button class="btn fullScreen" onclick="openFullscreen();"></button>
<button
class="btn exit-Fullscreen"
onclick="exitFullscreen();"
></button>
<div class="drop">
<button class="menu btn collapsible"></button>
<div class="content">
<div class="rol">
<div class="btn-Row">
<span class="bgr">Background</span>
<br />
<button class="bgWhite btn" style="background-color: white">
white
</button>
<button
class="bgGrey btn"
style="background-color: grey; color: white"
>
CAD
</button>
<button
class="bgBlack btn"
style="background-color: black; color: white"
>
Radial
</button>
</div>
<div class="btn-Row">
<span class="bgr">View</span>
<br />
<button class="btn top">Top</button>
<button class="btn front">Front</button>
<button class="btn left">Left</button>
<button class="btn right">Right</button>
<button class="btn back">Back</button>
<button class="btn iso">Iso</button>
</div>
<div class="btn-Row">
<span class="bgr">Control</span>
<br />
<img
class="img-Control"
src="https://cdn.glitch.global/82e9051b-34b9-4596-8cb8-f6f8421193ef/Frame%205%20(2).svg?v=1667387062300"
/>
</div>
<div class="credentials">
<a href="#">
<img
class="img-Credentials"
src="https://cdn.glitch.global/82e9051b-34b9-4596-8cb8-f6f8421193ef/Assembly%20(1).svg?v=1672676307347"
/></a>
</div>
</div>
</div>
</div>
<div class="animation-Toolbar">
<button class="btn play"></button>
<button class="btn pause"></button>
<input
type="range"
min="0"
value="0"
step="0.1"
class="anim-Range"
/>
</div>
<div class="progress" slot="progress-bar">
<div class="bar"></div>
</div>
</model-viewer>

<div class="slides">
<div class="slide-Card">
<button
class="slide-Picture"
onclick="switchSrc(this, 'https://cdn.glitch.global/82e9051b-34b9-4596-8cb8-f6f8421193ef/1stAnim.glb?v=1665146322342',
'40deg 70deg 3m','2m 12m 2m','auto auto 30m','20deg')"
style="
background-image: url('https://cdn.glitch.global/82e9051b-34b9-4596-8cb8-f6f8421193ef/1pic.png?v=1670265590781');
"
>
<span class="arrow-Slide"></span>
</button>
<small
><span class="slide-Describe">1) Insert wooden pins </span></small
>
</div>

<div class="slide-Card">
<button
class="slide-Picture"
onclick="switchSrc(this, 'https://cdn.glitch.global/82e9051b-34b9-4596-8cb8-f6f8421193ef/2ndAnim.glb?v=1670263260369',
'40deg 70deg 3m','-6m 10m 2m','auto auto 50m','14deg')"
style="
background-image: url('https://cdn.glitch.global/82e9051b-34b9-4596-8cb8-f6f8421193ef/2pic.png?v=1670265590116');
"
>
<span class="arrow-Slide"></span>
</button>
<small
><span class="slide-Describe">2) Fasten front plate </span></small
>
</div>
</div>
</div>
</div>
</body>
</html>
1,126 changes: 1,126 additions & 0 deletions model-viewer.min.js
View file

Large diffs are not rendered by default.

196 changes: 196 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
// SINGLE VIEWER ON THE WEBSITE - doesnt respect DRY rule :-)
// Petr Hovorka

const modelViewer = document.querySelector(".model");
let i;

//--------------------------------------------------------Toggle element
const coll = document.querySelector(".collapsible");
coll.addEventListener("click", function () {
this.classList.toggle("active");
const content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});

//-------------------------------------------------------show menu after launch 3D
modelViewer.addEventListener("click", function () {
const ml = this.querySelector(".drop");
ml.style.display = "block";
const showFull = this.querySelector(".fullScreen");
showFull.style.display = "block";
});
//--------------------------------------------------------------------hide progress bar when content loaded
modelViewer.addEventListener("load", function () {
const progress = this.querySelector(".progress");
progress.style.display = "none";
});

//-------------------------------------------------------------fullscreen
const full = document.querySelector(".fullScreen");
const exitfull = document.querySelector(".exit-Fullscreen");

/* View in fullscreen */
function openFullscreen() {
if (modelViewer.requestFullscreen) {
modelViewer.requestFullscreen();
exitfull.style.display = "block";
full.style.display = "none";
} else if (modelViewer.webkitRequestFullscreen) {
/* Safari */
modelViewer.webkitRequestFullscreen();
} else if (modelViewer.msRequestFullscreen) {
/* IE11 */
modelViewer.msRequestFullscreen();
}
}

//----------------------------------------------------close fullscreen
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
/* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
/* IE11 */
document.msExitFullscreen();
}
}

exitfull.addEventListener("click", () => {
full.style.display = "block";
exitfull.style.display = "none";
});

//----------------------------------------------------Background color
const bgG = document.querySelector(".bgGrey");
bgG.addEventListener("click", () => {
modelViewer.style.background = "linear-gradient(#ffffff, #ada996)";
});

const bgW = document.querySelector(".bgWhite");
bgW.addEventListener("click", () => {
modelViewer.style.background = "#ffffff no-repeat right top";
});

const bgB = document.querySelector(".bgBlack");
bgB.addEventListener("click", () => {
modelViewer.style.background = "radial-gradient(circle,rgba(161, 161, 176, 1) 0%,rgba(143, 143, 152, 1) 5%,rgba(0, 0, 0, 1) 100%)";
});

//-------------------------------------------------------Views
const views = {
top: "0deg 0deg 90deg",
front: "0deg 90deg 0deg",
left: "-90deg 90deg 0deg",
right: "90deg 90deg 0deg",
back: "180deg 90deg 0deg",
iso: "-45deg 60deg 60deg"
};

function setCameraOrbit(view) {
modelViewer.cameraOrbit = views[view];
}

function addClickListener(view, element) {
element.addEventListener("click", () => setCameraOrbit(view));
}

addClickListener("front", document.querySelector(".front"));
addClickListener("top", document.querySelector(".top"));
addClickListener("left", document.querySelector(".left"));
addClickListener("right", document.querySelector(".right"));
addClickListener("back", document.querySelector(".back"));
addClickListener("iso", document.querySelector(".iso"));

//------------------------------------------------------- play, pause animation

let playBtn = document.querySelector(".play");
let pauseBtn = document.querySelector(".pause");

playBtn.addEventListener("click", () => {
modelViewer.play();

});
pauseBtn.addEventListener("click", () => {
modelViewer.pause();
});


//----------------------------------progress bar
const progress = document.querySelector(".progress");
const bar = progress.querySelector(".bar");

modelViewer.addEventListener("progress", (event) => {
const { totalProgress } = event.detail;
progress.classList.toggle("show", totalProgress < 1);
bar.style.transform = `scaleX(${totalProgress})`;
});

// ---------------------------------------------------Close the dropdown if the user clicks outside of it
document.addEventListener("click", (event) => {
if (!event.target.matches(".menu")) {
const dropdown = document.querySelector(".content");
if ((dropdown.style.display = "block")) {
dropdown.style.display = "none";
}
}
});



//--------------------------------------------------------------slider animation

let slider = document.querySelector(".anim-Range");
slider.max = Math.floor(modelViewer.duration * 100) / 100;
let updateSlider = () => {
slider.max = Math.floor(modelViewer.duration * 100) / 100;
slider.value = modelViewer.currentTime;
};
slider.addEventListener("input", (event) => {
modelViewer.currentTime = event.target.value;
});

self.setInterval(() => {
updateSlider();
}, 100);

//--------------------------------------------------------------hide animation toolbar when no animation appears

modelViewer.addEventListener("load", () => {
const animations = modelViewer.availableAnimations;
const numberOfAnimations = animations.length;
const animToolbar = document.querySelector(".animation-Toolbar");
console.log(numberOfAnimations);
if (numberOfAnimations) {
animToolbar.style.display = "block";
}
else {
animToolbar.style.display = "none";
}
});

// ----------------------------------------------------change model src and zoom on click slide
const slides = document.querySelectorAll(".slide-Picture");
window.switchSrc = (element, source, orbit, target, minOrbit, minFov) => {
modelViewer.src = source;
modelViewer.cameraOrbit = orbit;
modelViewer.cameraTarget = target;
modelViewer.minCameraOrbit = minOrbit;
modelViewer.minFieldOfView = minFov;


slides.forEach((element) => {
element.classList.remove("selected");
element.firstChild.nextElementSibling.style.display = "block";

});
element.classList.add("selected");
element.firstChild.nextElementSibling.style.display = "none";

};

Loading

0 comments on commit 3cd1850

Please sign in to comment.