@needle-tools/gltf-progressive
Version:
three.js support for loading glTF or GLB files that contain progressive loading data
52 lines (47 loc) • 1.44 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Threejs Progressive Loading</title>
<style>
body {
margin: 0;
}
</style>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/",
"three/examples/": "https://cdn.jsdelivr.net/npm/three@latest/examples/",
"@needle-tools/gltf-progressive": "https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"
}
}
</script>
</head>
<body>
<script type="module" src="./main.js"></script>
<button class="show-source">Show Source</button>
</body>
<style>
.show-source {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 100;
border-radius: .5rem;
border: none;
padding: .3rem .5rem;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.querySelector('.show-source').addEventListener('click', () => {
const scriptSource = document.querySelector('script[type="module"]').src;
console.log(scriptSource);
window.open(scriptSource);
});
});
</script>
</html>