@needle-tools/gltf-progressive
Version:
three.js support for loading glTF or GLB files that contain progressive loading data
126 lines (103 loc) • 4.49 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gltf-progressive & model-viewer</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
rel="stylesheet">
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three/build/three.module.js",
"three/": "https://unpkg.com/three/"
}
}
</script>
<script type="module"
src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"></script>
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
</head>
<div class="layout">
<div class="card">
<h1>glTF Progressive</h1>
<h3><a href="https://www.npmjs.com/package/@needle-tools/gltf-progressive"
target="_blank">@needle-tools/gltf-progressive</a></h3>
<p>Load high quality assets in model-viewer without having to worry about loading times, bandwidth or
performance.</p>
<p>Get started now at <a href="https://cloud.needle.tools">cloud.needle.tools</a></p>
</div>
<model-viewer src="https://api.cloud.needle.tools/v1/public/9162350/2b4509376/" ar auto-rotate shadow-intensity=".5"
camera-controls touch-action="pan-y" autoplay></model-viewer>
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/vase/model.glb" ar
shadow-intensity=".5" camera-controls touch-action="pan-y"></model-viewer>
<model-viewer src="https://api.cloud.needle.tools/v1/public/908aa03/29b3b3743/" ar auto-rotate shadow-intensity=".5"
camera-controls touch-action="pan-y" autoplay></model-viewer>
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" ar auto-rotate
shadow-intensity="1" camera-controls touch-action="pan-y" auto-rotate autoplay field-of-view="10deg"
max-camera-orbit="auto 90deg auto"></model-viewer>
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/putti gruppe/model.glb" ar auto-rotate
shadow-intensity="1" camera-controls touch-action="pan-y" auto-rotate autoplay
max-camera-orbit="auto 90deg auto"></model-viewer>
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/jupiter_und_ganymed/model.glb" ar
auto-rotate shadow-intensity=".5" camera-controls touch-action="pan-y"></model-viewer>
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/cyberpunk/model.glb" ar auto-rotate
shadow-intensity=".5" camera-controls touch-action="pan-y" autoplay rotation-per-second="60deg"></model-viewer>
</div>
<script>
// Example if a model is loaded after the page has loaded
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
const element = document.createElement('model-viewer');
element.src = "https://api.cloud.needle.tools/v1/public/9191068/261b4395b/";
element.setAttribute("camera-controls", "");
const layout = document.querySelector('.layout');
layout.appendChild(element);
}, 2000)
});
</script>
<style>
body {
margin: 0;
background-color: rgba(245, 245, 245, 1);
font-family: "Open Sans", sans-serif;
font-optical-sizing: auto;
}
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #cb0000;
}
.layout {
position: relative;
width: 100%;
min-height: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(460px, 2fr));
gap: 1rem;
padding: 1rem;
}
.layout>* {
width: 100%;
height: auto;
aspect-ratio: 1;
flex: 1;
background: white;
border-radius: .3rem;
box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
outline: 1px solid white;
}
.card {
padding: 1rem;
max-width: calc(100vw - 2rem);
}
@media screen and (max-width: 800px) {
.layout {
grid-template-columns: 1fr;
}
}
</style>
</html>