threepipe
Version:
A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.
129 lines (126 loc) • 2.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GLTF Animation Page Scroll</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}
</script>
<style id="example-style">
#canvas-container, #mcanvas {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
body {
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: white;
}
#canvas-container {
position: fixed;
top: 0;
z-index: 5;
}
#content{
z-index: 10;
position: relative;
height: auto;
}
section{
z-index: 100;
height: 100vh;
line-height: 100vh;
font-size: 4rem;
font-weight: 600;
}
</style>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head>
<body>
<div id="canvas-container">
<canvas id="mcanvas"></canvas>
</div>
<div id="content">
<section>
Section 1
</section>
<section>
Section 2
</section>
<section>
Section 3
</section>
<section>
Section 4
</section>
<section>
Section 5
</section>
<section>
Section 6
</section>
<section>
Section 7
</section>
<section>
Section 8
</section>
<section>
Section 9
</section>
<section>
Section 10
</section>
<section>
Section 11
</section>
<section>
Section 12
</section>
<section>
Section 13
</section>
<section>
Section 14
</section>
<section>
Section 15
</section>
<section>
Section 16
</section>
<section>
Section 17
</section>
<section>
Section 18
</section>
<section>
Section 19
</section>
<section>
Section 20
</section>
<section>
Section 21
</section>
<section>
Section 22
</section>
</div>
</body>