scene_change project. glb models test
This commit is contained in:
parent
3129570e25
commit
fc7cabf7a3
4 changed files with 167 additions and 0 deletions
BIN
models/bird_01.glb
Normal file
BIN
models/bird_01.glb
Normal file
Binary file not shown.
BIN
models/bowman.glb
Normal file
BIN
models/bowman.glb
Normal file
Binary file not shown.
BIN
models/fish_01.glb
Normal file
BIN
models/fish_01.glb
Normal file
Binary file not shown.
167
scene_change.html
Normal file
167
scene_change.html
Normal file
|
|
@ -0,0 +1,167 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Scene Change — 3D Models</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<link rel="icon" href="favicon.ico" type="image/x-icon" />
|
||||||
|
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: #000;
|
||||||
|
color: #eee;
|
||||||
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
background-color: rgba(10, 10, 10, 0.8);
|
||||||
|
padding: 0.5em;
|
||||||
|
text-align: center;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
header h1 {
|
||||||
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 100vw;
|
||||||
|
text-overflow: clip;
|
||||||
|
transition: letter-spacing 1s ease;
|
||||||
|
}
|
||||||
|
header h1:hover {
|
||||||
|
letter-spacing: 10.0em;
|
||||||
|
transition: letter-spacing 5s ease;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 1em auto;
|
||||||
|
padding: 0 1em;
|
||||||
|
}
|
||||||
|
.gallery {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
.item model-viewer {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #111;
|
||||||
|
}
|
||||||
|
.item p {
|
||||||
|
margin: 0.5em 0 0;
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: #ccc;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.model-viewer-container {
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 40px auto;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
model-viewer#viewer {
|
||||||
|
width: 100%;
|
||||||
|
height: 600px;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
.back {
|
||||||
|
margin: 1em auto 0;
|
||||||
|
display: block;
|
||||||
|
background: #444;
|
||||||
|
color: white;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>flat space</h1>
|
||||||
|
<p>a small space in a huge universe</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<h2 style="text-align: center;">Scene Change – 3D Models</h2>
|
||||||
|
<p style="text-align: center; max-width: 800px; margin: 0 auto 2em;">
|
||||||
|
“Scene Change” was originally presented in the Russian Pavilion at the 57th Venice
|
||||||
|
Biennale in 2017 as part of the <em>Theatrum Orbis</em> exhibition curated by Semyon
|
||||||
|
Mikhailovsky. Grisha Bruskin’s installation featured theatrical arrangements of
|
||||||
|
gypsum figures, mechanized hybrids such as two-headed birds, soldiers with
|
||||||
|
binoculars, drones, and more — staged as a sequence of “scenes” exploring themes
|
||||||
|
of power, surveillance, fear, and the transformation of myth in contemporary society.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="gallery">
|
||||||
|
<div class="item" onclick="openModel('bird_01')">
|
||||||
|
<model-viewer src="models/bird_01.glb" camera-controls disable-zoom></model-viewer>
|
||||||
|
<p>Bird 01 – Symbolic Avian Form</p>
|
||||||
|
</div>
|
||||||
|
<div class="item" onclick="openModel('bowman')">
|
||||||
|
<model-viewer src="models/bowman.glb" camera-controls disable-zoom></model-viewer>
|
||||||
|
<p>Bowman – Archer Character Concept</p>
|
||||||
|
</div>
|
||||||
|
<div class="item" onclick="openModel('fish_01')">
|
||||||
|
<model-viewer src="models/fish_01.glb" camera-controls disable-zoom></model-viewer>
|
||||||
|
<p>Fish 01 – Abstract Aquatic Creature</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="model-viewer-container" id="viewerSection">
|
||||||
|
<model-viewer id="viewer"
|
||||||
|
src=""
|
||||||
|
alt="3D model"
|
||||||
|
auto-rotate
|
||||||
|
camera-controls
|
||||||
|
ar
|
||||||
|
ar-modes="webxr scene-viewer quick-look"
|
||||||
|
shadow-intensity="1"
|
||||||
|
exposure="1"
|
||||||
|
environment-image="neutral">
|
||||||
|
</model-viewer>
|
||||||
|
<button class="back" onclick="closeModel()">← Back to gallery</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>© 2025 Andrey Flat</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function openModel(name) {
|
||||||
|
document.querySelector('.gallery').style.display = 'none';
|
||||||
|
document.querySelector('#viewerSection').style.display = 'block';
|
||||||
|
document.querySelector('#viewer').src = `models/${name}.glb`;
|
||||||
|
}
|
||||||
|
function closeModel() {
|
||||||
|
document.querySelector('#viewerSection').style.display = 'none';
|
||||||
|
document.querySelector('.gallery').style.display = 'grid';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
const h1 = document.querySelector("header h1");
|
||||||
|
h1.addEventListener("mouseenter", () => {
|
||||||
|
const maxSpacing = 12.0;
|
||||||
|
const spacing = Math.min(window.innerWidth / 500, maxSpacing);
|
||||||
|
h1.style.letterSpacing = spacing + "em";
|
||||||
|
h1.style.transition = "letter-spacing 5s ease";
|
||||||
|
});
|
||||||
|
h1.addEventListener("mouseleave", () => {
|
||||||
|
h1.style.letterSpacing = "";
|
||||||
|
h1.style.transition = "letter-spacing 1s ease";
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue