@needle-tools/gltf-progressive 2.1.3 → 2.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +210 -207
- package/README.md +131 -131
- package/examples/modelviewer-multiple.html +125 -125
- package/examples/modelviewer.html +33 -33
- package/examples/react-three-fiber/.prettierrc +9 -9
- package/examples/react-three-fiber/index.html +23 -23
- package/examples/react-three-fiber/package-lock.json +4023 -4023
- package/examples/react-three-fiber/package.json +34 -34
- package/examples/react-three-fiber/tsconfig.json +21 -21
- package/examples/react-three-fiber/vite.config.js +38 -38
- package/examples/threejs/index.html +51 -51
- package/examples/threejs/main.js +181 -181
- package/lib/version.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,131 +1,131 @@
|
|
|
1
|
-
# glTF progressive
|
|
2
|
-
|
|
3
|
-
LODs on steroids for glTF, GLB or VRM files with density based loading for meshes or texture for any three.js based project.
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
- One line integration in any three.js based engine/project
|
|
7
|
-
- Mesh LOD support
|
|
8
|
-
- Texture LOD support
|
|
9
|
-
- LOD levels are loaded on demand based on mesh screen density
|
|
10
|
-
- Low poly LOD meshes can easily be used for raycasting for smooth interactions with high-poly meshes
|
|
11
|
-
- Cloud generation and loading support via [cloud.needle.tools](https://cloud.needle.tools) for glTF, GLB & VRM assets
|
|
12
|
-
|
|
13
|
-
## Examples
|
|
14
|
-
|
|
15
|
-
Examples are in the `/examples` directory. Live versions can be found in the links below.
|
|
16
|
-
|
|
17
|
-
- [Vanilla three.js](https://engine.needle.tools/demos/gltf-progressive/threejs/) - multiple models and animations
|
|
18
|
-
- [React Three Fiber](https://engine.needle.tools/demos/gltf-progressive/r3f/)
|
|
19
|
-
- \<model-viewer\>
|
|
20
|
-
- [single \<model-viewer> element](https://engine.needle.tools/demos/gltf-progressive/modelviewer)
|
|
21
|
-
- [multiple \<model-viewer> elements](https://engine.needle.tools/demos/gltf-progressive/modelviewer-multiple)
|
|
22
|
-
- [Needle Engine](https://stackblitz.com/edit/needle-engine-gltf-progressive?file=src%2Fmain.ts)
|
|
23
|
-
- [Progressive VRM 14 MB to 1 MB](https://cloud.needle.tools/view/91b4450/262927895)
|
|
24
|
-
|
|
25
|
-
**Interactive Examples**:
|
|
26
|
-
- [Stackblitz](https://stackblitz.com/@marwie/collections/gltf-progressive)
|
|
27
|
-
- [Codesandbox](https://codesandbox.io/dashboard/sandboxes/gltf-progressive)
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
<br/>
|
|
31
|
-
<video width="320" controls autoplay src="https://engine.needle.tools/demos/gltf-progressive/video.mp4">
|
|
32
|
-
<source src="https://engine.needle.tools/demos/gltf-progressive/video.mp4" type="video/mp4">
|
|
33
|
-
</video>
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
## Usage
|
|
37
|
-
|
|
38
|
-
### react three fiber
|
|
39
|
-
|
|
40
|
-
Full example in `examples/react-three-fiber`
|
|
41
|
-
|
|
42
|
-
```ts
|
|
43
|
-
function ChurchModel() {
|
|
44
|
-
const { gl } = useThree()
|
|
45
|
-
const url = 'https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb'
|
|
46
|
-
const { scene } = useGLTF(url, false, false, (loader) => {
|
|
47
|
-
useNeedleProgressive(url, gl, loader as any)
|
|
48
|
-
})
|
|
49
|
-
return <primitive object={scene} />
|
|
50
|
-
}
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
### threejs (CDN, no bundler)
|
|
54
|
-
|
|
55
|
-
The full example can be found at `examples/threejs`
|
|
56
|
-
|
|
57
|
-
```html
|
|
58
|
-
<head>
|
|
59
|
-
<!-- Add the threejs import map to your HTML head section -->
|
|
60
|
-
<script type="importmap">
|
|
61
|
-
{
|
|
62
|
-
"imports": {
|
|
63
|
-
"three": "https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js",
|
|
64
|
-
"three/addons/": "https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/",
|
|
65
|
-
"three/examples/": "https://cdn.jsdelivr.net/npm/three@latest/examples/",
|
|
66
|
-
"@needle-tools/gltf-progressive": "https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
</script>
|
|
70
|
-
</head>
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
In your script:
|
|
74
|
-
```ts
|
|
75
|
-
const gltfLoader = new GLTFLoader();
|
|
76
|
-
|
|
77
|
-
const url = "https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb";
|
|
78
|
-
|
|
79
|
-
// register the progressive loader
|
|
80
|
-
useNeedleProgressive(url, renderer, gltfLoader)
|
|
81
|
-
|
|
82
|
-
// just call the load method as usual
|
|
83
|
-
gltfLoader.load(url, gltf => {
|
|
84
|
-
console.log(gltf)
|
|
85
|
-
scene.add(gltf.scene)
|
|
86
|
-
gltf.scene.position.y += .95;
|
|
87
|
-
})
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
### \<model-viewer\>
|
|
92
|
-
|
|
93
|
-
The example can be found in `examples/modelviewer.html`
|
|
94
|
-
|
|
95
|
-
```html
|
|
96
|
-
<head>
|
|
97
|
-
<!-- Include threejs import map -->
|
|
98
|
-
<script type="importmap">
|
|
99
|
-
{
|
|
100
|
-
"imports": {
|
|
101
|
-
"three": "https://unpkg.com/three/build/three.module.js",
|
|
102
|
-
"three/": "https://unpkg.com/three/"
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
</script>
|
|
106
|
-
<!-- Include gltf-progressive -->
|
|
107
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"></script>
|
|
108
|
-
<!-- Include model-viewer -->
|
|
109
|
-
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
|
|
110
|
-
</head>
|
|
111
|
-
<body>
|
|
112
|
-
|
|
113
|
-
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" camera-controls auto-rotate></model-viewer>
|
|
114
|
-
|
|
115
|
-
</body>
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
### Needle Engine
|
|
119
|
-
|
|
120
|
-
[Needle Engine](https://needle.tools) natively supports progressive loading of these glTF files! See [docs.needle.tools](https://docs.needle.tools) for more information.
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
Use [cloud.needle.tools](https://cloud.needle.tools) to generate LODs for your assets now.
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
# Contact ✒️
|
|
127
|
-
<b>[🌵 needle — tools for creators](https://needle.tools)</b> •
|
|
128
|
-
[Twitter](https://twitter.com/NeedleTools) •
|
|
129
|
-
[Discord](https://discord.needle.tools) •
|
|
130
|
-
[Forum](https://forum.needle.tools)
|
|
131
|
-
|
|
1
|
+
# glTF progressive
|
|
2
|
+
|
|
3
|
+
LODs on steroids for glTF, GLB or VRM files with density based loading for meshes or texture for any three.js based project.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
- One line integration in any three.js based engine/project
|
|
7
|
+
- Mesh LOD support
|
|
8
|
+
- Texture LOD support
|
|
9
|
+
- LOD levels are loaded on demand based on mesh screen density
|
|
10
|
+
- Low poly LOD meshes can easily be used for raycasting for smooth interactions with high-poly meshes
|
|
11
|
+
- Cloud generation and loading support via [cloud.needle.tools](https://cloud.needle.tools) for glTF, GLB & VRM assets
|
|
12
|
+
|
|
13
|
+
## Examples
|
|
14
|
+
|
|
15
|
+
Examples are in the `/examples` directory. Live versions can be found in the links below.
|
|
16
|
+
|
|
17
|
+
- [Vanilla three.js](https://engine.needle.tools/demos/gltf-progressive/threejs/) - multiple models and animations
|
|
18
|
+
- [React Three Fiber](https://engine.needle.tools/demos/gltf-progressive/r3f/)
|
|
19
|
+
- \<model-viewer\>
|
|
20
|
+
- [single \<model-viewer> element](https://engine.needle.tools/demos/gltf-progressive/modelviewer)
|
|
21
|
+
- [multiple \<model-viewer> elements](https://engine.needle.tools/demos/gltf-progressive/modelviewer-multiple)
|
|
22
|
+
- [Needle Engine](https://stackblitz.com/edit/needle-engine-gltf-progressive?file=src%2Fmain.ts)
|
|
23
|
+
- [Progressive VRM 14 MB to 1 MB](https://cloud.needle.tools/view/91b4450/262927895)
|
|
24
|
+
|
|
25
|
+
**Interactive Examples**:
|
|
26
|
+
- [Stackblitz](https://stackblitz.com/@marwie/collections/gltf-progressive)
|
|
27
|
+
- [Codesandbox](https://codesandbox.io/dashboard/sandboxes/gltf-progressive)
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
<br/>
|
|
31
|
+
<video width="320" controls autoplay src="https://engine.needle.tools/demos/gltf-progressive/video.mp4">
|
|
32
|
+
<source src="https://engine.needle.tools/demos/gltf-progressive/video.mp4" type="video/mp4">
|
|
33
|
+
</video>
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
## Usage
|
|
37
|
+
|
|
38
|
+
### react three fiber
|
|
39
|
+
|
|
40
|
+
Full example in `examples/react-three-fiber`
|
|
41
|
+
|
|
42
|
+
```ts
|
|
43
|
+
function ChurchModel() {
|
|
44
|
+
const { gl } = useThree()
|
|
45
|
+
const url = 'https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb'
|
|
46
|
+
const { scene } = useGLTF(url, false, false, (loader) => {
|
|
47
|
+
useNeedleProgressive(url, gl, loader as any)
|
|
48
|
+
})
|
|
49
|
+
return <primitive object={scene} />
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### threejs (CDN, no bundler)
|
|
54
|
+
|
|
55
|
+
The full example can be found at `examples/threejs`
|
|
56
|
+
|
|
57
|
+
```html
|
|
58
|
+
<head>
|
|
59
|
+
<!-- Add the threejs import map to your HTML head section -->
|
|
60
|
+
<script type="importmap">
|
|
61
|
+
{
|
|
62
|
+
"imports": {
|
|
63
|
+
"three": "https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js",
|
|
64
|
+
"three/addons/": "https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/",
|
|
65
|
+
"three/examples/": "https://cdn.jsdelivr.net/npm/three@latest/examples/",
|
|
66
|
+
"@needle-tools/gltf-progressive": "https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
</script>
|
|
70
|
+
</head>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
In your script:
|
|
74
|
+
```ts
|
|
75
|
+
const gltfLoader = new GLTFLoader();
|
|
76
|
+
|
|
77
|
+
const url = "https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb";
|
|
78
|
+
|
|
79
|
+
// register the progressive loader
|
|
80
|
+
useNeedleProgressive(url, renderer, gltfLoader)
|
|
81
|
+
|
|
82
|
+
// just call the load method as usual
|
|
83
|
+
gltfLoader.load(url, gltf => {
|
|
84
|
+
console.log(gltf)
|
|
85
|
+
scene.add(gltf.scene)
|
|
86
|
+
gltf.scene.position.y += .95;
|
|
87
|
+
})
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
### \<model-viewer\>
|
|
92
|
+
|
|
93
|
+
The example can be found in `examples/modelviewer.html`
|
|
94
|
+
|
|
95
|
+
```html
|
|
96
|
+
<head>
|
|
97
|
+
<!-- Include threejs import map -->
|
|
98
|
+
<script type="importmap">
|
|
99
|
+
{
|
|
100
|
+
"imports": {
|
|
101
|
+
"three": "https://unpkg.com/three/build/three.module.js",
|
|
102
|
+
"three/": "https://unpkg.com/three/"
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
</script>
|
|
106
|
+
<!-- Include gltf-progressive -->
|
|
107
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"></script>
|
|
108
|
+
<!-- Include model-viewer -->
|
|
109
|
+
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
|
|
110
|
+
</head>
|
|
111
|
+
<body>
|
|
112
|
+
|
|
113
|
+
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" camera-controls auto-rotate></model-viewer>
|
|
114
|
+
|
|
115
|
+
</body>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Needle Engine
|
|
119
|
+
|
|
120
|
+
[Needle Engine](https://needle.tools) natively supports progressive loading of these glTF files! See [docs.needle.tools](https://docs.needle.tools) for more information.
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
Use [cloud.needle.tools](https://cloud.needle.tools) to generate LODs for your assets now.
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
# Contact ✒️
|
|
127
|
+
<b>[🌵 needle — tools for creators](https://needle.tools)</b> •
|
|
128
|
+
[Twitter](https://twitter.com/NeedleTools) •
|
|
129
|
+
[Discord](https://discord.needle.tools) •
|
|
130
|
+
[Forum](https://forum.needle.tools)
|
|
131
|
+
|
|
@@ -1,126 +1,126 @@
|
|
|
1
|
-
<html>
|
|
2
|
-
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>gltf-progressive & model-viewer</title>
|
|
7
|
-
|
|
8
|
-
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
|
-
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
|
|
11
|
-
rel="stylesheet">
|
|
12
|
-
|
|
13
|
-
<script type="importmap">
|
|
14
|
-
{
|
|
15
|
-
"imports": {
|
|
16
|
-
"three": "https://unpkg.com/three/build/three.module.js",
|
|
17
|
-
"three/": "https://unpkg.com/three/"
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
</script>
|
|
21
|
-
<script type="module"
|
|
22
|
-
src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"></script>
|
|
23
|
-
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
|
|
24
|
-
</head>
|
|
25
|
-
|
|
26
|
-
<div class="layout">
|
|
27
|
-
<div class="card">
|
|
28
|
-
<h1>glTF Progressive</h1>
|
|
29
|
-
<h3><a href="https://www.npmjs.com/package/@needle-tools/gltf-progressive"
|
|
30
|
-
target="_blank">@needle-tools/gltf-progressive</a></h3>
|
|
31
|
-
<p>Load high quality assets in model-viewer without having to worry about loading times, bandwidth or
|
|
32
|
-
performance.</p>
|
|
33
|
-
<p>Get started now at <a href="https://cloud.needle.tools">cloud.needle.tools</a></p>
|
|
34
|
-
</div>
|
|
35
|
-
<model-viewer src="https://api.cloud.needle.tools/v1/public/9162350/2b4509376/" ar auto-rotate shadow-intensity=".5"
|
|
36
|
-
camera-controls touch-action="pan-y" autoplay></model-viewer>
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/vase/model.glb" ar
|
|
40
|
-
shadow-intensity=".5" camera-controls touch-action="pan-y"></model-viewer>
|
|
41
|
-
|
|
42
|
-
<model-viewer src="https://api.cloud.needle.tools/v1/public/908aa03/29b3b3743/" ar auto-rotate shadow-intensity=".5"
|
|
43
|
-
camera-controls touch-action="pan-y" autoplay></model-viewer>
|
|
44
|
-
|
|
45
|
-
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" ar auto-rotate
|
|
46
|
-
shadow-intensity="1" camera-controls touch-action="pan-y" auto-rotate autoplay field-of-view="10deg"
|
|
47
|
-
max-camera-orbit="auto 90deg auto"></model-viewer>
|
|
48
|
-
|
|
49
|
-
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/putti gruppe/model.glb" ar auto-rotate
|
|
50
|
-
shadow-intensity="1" camera-controls touch-action="pan-y" auto-rotate autoplay
|
|
51
|
-
max-camera-orbit="auto 90deg auto"></model-viewer>
|
|
52
|
-
|
|
53
|
-
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/jupiter_und_ganymed/model.glb" ar
|
|
54
|
-
auto-rotate shadow-intensity=".5" camera-controls touch-action="pan-y"></model-viewer>
|
|
55
|
-
|
|
56
|
-
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/cyberpunk/model.glb" ar auto-rotate
|
|
57
|
-
shadow-intensity=".5" camera-controls touch-action="pan-y" autoplay rotation-per-second="60deg"></model-viewer>
|
|
58
|
-
|
|
59
|
-
</div>
|
|
60
|
-
|
|
61
|
-
<script>
|
|
62
|
-
// Example if a model is loaded after the page has loaded
|
|
63
|
-
document.addEventListener('DOMContentLoaded', () => {
|
|
64
|
-
setTimeout(() => {
|
|
65
|
-
const element = document.createElement('model-viewer');
|
|
66
|
-
element.src = "https://api.cloud.needle.tools/v1/public/9191068/261b4395b/";
|
|
67
|
-
element.setAttribute("camera-controls", "");
|
|
68
|
-
const layout = document.querySelector('.layout');
|
|
69
|
-
layout.appendChild(element);
|
|
70
|
-
}, 2000)
|
|
71
|
-
});
|
|
72
|
-
|
|
73
|
-
</script>
|
|
74
|
-
|
|
75
|
-
<style>
|
|
76
|
-
body {
|
|
77
|
-
margin: 0;
|
|
78
|
-
background-color: rgba(245, 245, 245, 1);
|
|
79
|
-
font-family: "Open Sans", sans-serif;
|
|
80
|
-
font-optical-sizing: auto;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
* {
|
|
84
|
-
box-sizing: border-box;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
a {
|
|
88
|
-
text-decoration: none;
|
|
89
|
-
color: #cb0000;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.layout {
|
|
93
|
-
position: relative;
|
|
94
|
-
width: 100%;
|
|
95
|
-
min-height: 100%;
|
|
96
|
-
|
|
97
|
-
display: grid;
|
|
98
|
-
grid-template-columns: repeat(auto-fill, minmax(460px, 2fr));
|
|
99
|
-
gap: 1rem;
|
|
100
|
-
padding: 1rem;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.layout>* {
|
|
104
|
-
width: 100%;
|
|
105
|
-
height: auto;
|
|
106
|
-
aspect-ratio: 1;
|
|
107
|
-
flex: 1;
|
|
108
|
-
background: white;
|
|
109
|
-
border-radius: .3rem;
|
|
110
|
-
box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
|
|
111
|
-
outline: 1px solid white;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.card {
|
|
115
|
-
padding: 1rem;
|
|
116
|
-
max-width: calc(100vw - 2rem);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
@media screen and (max-width: 800px) {
|
|
120
|
-
.layout {
|
|
121
|
-
grid-template-columns: 1fr;
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
</style>
|
|
125
|
-
|
|
1
|
+
<html>
|
|
2
|
+
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>gltf-progressive & model-viewer</title>
|
|
7
|
+
|
|
8
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
|
+
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
|
|
11
|
+
rel="stylesheet">
|
|
12
|
+
|
|
13
|
+
<script type="importmap">
|
|
14
|
+
{
|
|
15
|
+
"imports": {
|
|
16
|
+
"three": "https://unpkg.com/three/build/three.module.js",
|
|
17
|
+
"three/": "https://unpkg.com/three/"
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
</script>
|
|
21
|
+
<script type="module"
|
|
22
|
+
src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"></script>
|
|
23
|
+
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
|
|
24
|
+
</head>
|
|
25
|
+
|
|
26
|
+
<div class="layout">
|
|
27
|
+
<div class="card">
|
|
28
|
+
<h1>glTF Progressive</h1>
|
|
29
|
+
<h3><a href="https://www.npmjs.com/package/@needle-tools/gltf-progressive"
|
|
30
|
+
target="_blank">@needle-tools/gltf-progressive</a></h3>
|
|
31
|
+
<p>Load high quality assets in model-viewer without having to worry about loading times, bandwidth or
|
|
32
|
+
performance.</p>
|
|
33
|
+
<p>Get started now at <a href="https://cloud.needle.tools">cloud.needle.tools</a></p>
|
|
34
|
+
</div>
|
|
35
|
+
<model-viewer src="https://api.cloud.needle.tools/v1/public/9162350/2b4509376/" ar auto-rotate shadow-intensity=".5"
|
|
36
|
+
camera-controls touch-action="pan-y" autoplay></model-viewer>
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/vase/model.glb" ar
|
|
40
|
+
shadow-intensity=".5" camera-controls touch-action="pan-y"></model-viewer>
|
|
41
|
+
|
|
42
|
+
<model-viewer src="https://api.cloud.needle.tools/v1/public/908aa03/29b3b3743/" ar auto-rotate shadow-intensity=".5"
|
|
43
|
+
camera-controls touch-action="pan-y" autoplay></model-viewer>
|
|
44
|
+
|
|
45
|
+
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" ar auto-rotate
|
|
46
|
+
shadow-intensity="1" camera-controls touch-action="pan-y" auto-rotate autoplay field-of-view="10deg"
|
|
47
|
+
max-camera-orbit="auto 90deg auto"></model-viewer>
|
|
48
|
+
|
|
49
|
+
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/putti gruppe/model.glb" ar auto-rotate
|
|
50
|
+
shadow-intensity="1" camera-controls touch-action="pan-y" auto-rotate autoplay
|
|
51
|
+
max-camera-orbit="auto 90deg auto"></model-viewer>
|
|
52
|
+
|
|
53
|
+
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/jupiter_und_ganymed/model.glb" ar
|
|
54
|
+
auto-rotate shadow-intensity=".5" camera-controls touch-action="pan-y"></model-viewer>
|
|
55
|
+
|
|
56
|
+
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/cyberpunk/model.glb" ar auto-rotate
|
|
57
|
+
shadow-intensity=".5" camera-controls touch-action="pan-y" autoplay rotation-per-second="60deg"></model-viewer>
|
|
58
|
+
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<script>
|
|
62
|
+
// Example if a model is loaded after the page has loaded
|
|
63
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
64
|
+
setTimeout(() => {
|
|
65
|
+
const element = document.createElement('model-viewer');
|
|
66
|
+
element.src = "https://api.cloud.needle.tools/v1/public/9191068/261b4395b/";
|
|
67
|
+
element.setAttribute("camera-controls", "");
|
|
68
|
+
const layout = document.querySelector('.layout');
|
|
69
|
+
layout.appendChild(element);
|
|
70
|
+
}, 2000)
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
</script>
|
|
74
|
+
|
|
75
|
+
<style>
|
|
76
|
+
body {
|
|
77
|
+
margin: 0;
|
|
78
|
+
background-color: rgba(245, 245, 245, 1);
|
|
79
|
+
font-family: "Open Sans", sans-serif;
|
|
80
|
+
font-optical-sizing: auto;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
* {
|
|
84
|
+
box-sizing: border-box;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
a {
|
|
88
|
+
text-decoration: none;
|
|
89
|
+
color: #cb0000;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.layout {
|
|
93
|
+
position: relative;
|
|
94
|
+
width: 100%;
|
|
95
|
+
min-height: 100%;
|
|
96
|
+
|
|
97
|
+
display: grid;
|
|
98
|
+
grid-template-columns: repeat(auto-fill, minmax(460px, 2fr));
|
|
99
|
+
gap: 1rem;
|
|
100
|
+
padding: 1rem;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.layout>* {
|
|
104
|
+
width: 100%;
|
|
105
|
+
height: auto;
|
|
106
|
+
aspect-ratio: 1;
|
|
107
|
+
flex: 1;
|
|
108
|
+
background: white;
|
|
109
|
+
border-radius: .3rem;
|
|
110
|
+
box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
|
|
111
|
+
outline: 1px solid white;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.card {
|
|
115
|
+
padding: 1rem;
|
|
116
|
+
max-width: calc(100vw - 2rem);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@media screen and (max-width: 800px) {
|
|
120
|
+
.layout {
|
|
121
|
+
grid-template-columns: 1fr;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
</style>
|
|
125
|
+
|
|
126
126
|
</html>
|
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
<html>
|
|
2
|
-
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>gltf-progressive & model-viewer</title>
|
|
7
|
-
<script type="importmap">
|
|
8
|
-
{
|
|
9
|
-
"imports": {
|
|
10
|
-
"three": "https://unpkg.com/three/build/three.module.js",
|
|
11
|
-
"three/": "https://unpkg.com/three/"
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
</script>
|
|
15
|
-
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
|
|
16
|
-
<script type="module"
|
|
17
|
-
src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"></script>
|
|
18
|
-
</head>
|
|
19
|
-
|
|
20
|
-
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" ar shadow-intensity="1"
|
|
21
|
-
camera-controls touch-action="pan-y" auto-rotate max-camera-orbit="auto 90deg auto"></model-viewer>
|
|
22
|
-
|
|
23
|
-
<style>
|
|
24
|
-
body {
|
|
25
|
-
margin: 0;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
model-viewer {
|
|
29
|
-
width: 100%;
|
|
30
|
-
height: 100%;
|
|
31
|
-
}
|
|
32
|
-
</style>
|
|
33
|
-
|
|
1
|
+
<html>
|
|
2
|
+
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>gltf-progressive & model-viewer</title>
|
|
7
|
+
<script type="importmap">
|
|
8
|
+
{
|
|
9
|
+
"imports": {
|
|
10
|
+
"three": "https://unpkg.com/three/build/three.module.js",
|
|
11
|
+
"three/": "https://unpkg.com/three/"
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
</script>
|
|
15
|
+
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
|
|
16
|
+
<script type="module"
|
|
17
|
+
src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"></script>
|
|
18
|
+
</head>
|
|
19
|
+
|
|
20
|
+
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" ar shadow-intensity="1"
|
|
21
|
+
camera-controls touch-action="pan-y" auto-rotate max-camera-orbit="auto 90deg auto"></model-viewer>
|
|
22
|
+
|
|
23
|
+
<style>
|
|
24
|
+
body {
|
|
25
|
+
margin: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
model-viewer {
|
|
29
|
+
width: 100%;
|
|
30
|
+
height: 100%;
|
|
31
|
+
}
|
|
32
|
+
</style>
|
|
33
|
+
|
|
34
34
|
</html>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
{
|
|
2
|
-
"printWidth": 140,
|
|
3
|
-
"tabWidth": 2,
|
|
4
|
-
"useTabs": false,
|
|
5
|
-
"semi": false,
|
|
6
|
-
"singleQuote": true,
|
|
7
|
-
"trailingComma": "none",
|
|
8
|
-
"bracketSpacing": true,
|
|
9
|
-
"jsxBracketSameLine": true
|
|
1
|
+
{
|
|
2
|
+
"printWidth": 140,
|
|
3
|
+
"tabWidth": 2,
|
|
4
|
+
"useTabs": false,
|
|
5
|
+
"semi": false,
|
|
6
|
+
"singleQuote": true,
|
|
7
|
+
"trailingComma": "none",
|
|
8
|
+
"bracketSpacing": true,
|
|
9
|
+
"jsxBracketSameLine": true
|
|
10
10
|
}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<link rel="icon" href="favicon.png">
|
|
6
|
-
<meta name="viewport" content="width=device-width, user-scalable=no">
|
|
7
|
-
|
|
8
|
-
<title>react-three-fiber with progressive loading</title>
|
|
9
|
-
<meta name="description" content="🌵 gltf-progressive example">
|
|
10
|
-
<meta name="twitter:card" content="summary_large_image">
|
|
11
|
-
<meta property="og:title" content="react-three-fiber with progressive loading" />
|
|
12
|
-
<meta property="og:description" content="🌵 gltf-progressive example" />
|
|
13
|
-
<meta property="twitter:image" content="" />
|
|
14
|
-
<meta property="og:image" content="" />
|
|
15
|
-
|
|
16
|
-
<meta name="robots" content="index,follow">
|
|
17
|
-
<link rel="stylesheet" href="./src/style.css">
|
|
18
|
-
</head>
|
|
19
|
-
|
|
20
|
-
<body>
|
|
21
|
-
<script type="module" src="./src/index.tsx"></script>
|
|
22
|
-
<div id="root" style="width:100vw; height:100vh;"></div>
|
|
23
|
-
</body>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" href="favicon.png">
|
|
6
|
+
<meta name="viewport" content="width=device-width, user-scalable=no">
|
|
7
|
+
|
|
8
|
+
<title>react-three-fiber with progressive loading</title>
|
|
9
|
+
<meta name="description" content="🌵 gltf-progressive example">
|
|
10
|
+
<meta name="twitter:card" content="summary_large_image">
|
|
11
|
+
<meta property="og:title" content="react-three-fiber with progressive loading" />
|
|
12
|
+
<meta property="og:description" content="🌵 gltf-progressive example" />
|
|
13
|
+
<meta property="twitter:image" content="" />
|
|
14
|
+
<meta property="og:image" content="" />
|
|
15
|
+
|
|
16
|
+
<meta name="robots" content="index,follow">
|
|
17
|
+
<link rel="stylesheet" href="./src/style.css">
|
|
18
|
+
</head>
|
|
19
|
+
|
|
20
|
+
<body>
|
|
21
|
+
<script type="module" src="./src/index.tsx"></script>
|
|
22
|
+
<div id="root" style="width:100vw; height:100vh;"></div>
|
|
23
|
+
</body>
|
|
24
24
|
</html>
|