@needle-tools/gltf-progressive 1.2.2-alpha.2 → 1.2.2-alpha.3
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/examples/modelviewer-multiple.html +62 -8
- package/gltf-progressive.js +261 -247
- package/gltf-progressive.min.js +5 -5
- package/gltf-progressive.umd.cjs +5 -5
- package/lib/lods_manager.d.ts +8 -1
- package/lib/lods_manager.js +10 -1
- package/lib/plugins/modelviewer.js +20 -7
- package/lib/version.js +1 -1
- package/package.json +1 -1
|
@@ -4,6 +4,12 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
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
|
+
|
|
7
13
|
<script type="importmap">
|
|
8
14
|
{
|
|
9
15
|
"imports": {
|
|
@@ -17,36 +23,84 @@
|
|
|
17
23
|
</head>
|
|
18
24
|
|
|
19
25
|
<div class="layout">
|
|
20
|
-
<
|
|
26
|
+
<div class="card">
|
|
27
|
+
<h1>glTF Progressive</h1>
|
|
28
|
+
<h3><a href="https://www.npmjs.com/package/@needle-tools/gltf-progressive"
|
|
29
|
+
target="_blank">@needle-tools/gltf-progressive</a></h3>
|
|
30
|
+
<p>Load high quality assets in model-viewer without having to worry about loading times, bandwidth or
|
|
31
|
+
performance.</p>
|
|
32
|
+
<p>Get started now at <a href="https://cloud.needle.tools">cloud.needle.tools</a></p>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" ar auto-rotate
|
|
21
36
|
shadow-intensity="1" camera-controls touch-action="pan-y" auto-rotate autoplay field-of-view="10deg"
|
|
22
37
|
max-camera-orbit="auto 90deg auto"></model-viewer>
|
|
23
|
-
|
|
38
|
+
|
|
39
|
+
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/putti gruppe/model.glb" ar auto-rotate
|
|
24
40
|
shadow-intensity="1" camera-controls touch-action="pan-y" auto-rotate autoplay
|
|
25
41
|
max-camera-orbit="auto 90deg auto"></model-viewer>
|
|
42
|
+
|
|
43
|
+
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/jupiter_und_ganymed/model.glb" ar
|
|
44
|
+
auto-rotate shadow-intensity=".5" camera-controls touch-action="pan-y"></model-viewer>
|
|
45
|
+
|
|
26
46
|
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/cyberpunk/model.glb" ar auto-rotate
|
|
27
|
-
shadow-intensity=".5" camera-controls autoplay rotation-per-second="60deg"></model-viewer>
|
|
47
|
+
shadow-intensity=".5" camera-controls touch-action="pan-y" autoplay rotation-per-second="60deg"></model-viewer>
|
|
48
|
+
|
|
28
49
|
<model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/vase/model.glb" ar
|
|
29
|
-
shadow-intensity=".5" camera-controls></model-viewer>
|
|
50
|
+
shadow-intensity=".5" camera-controls touch-action="pan-y"></model-viewer>
|
|
51
|
+
|
|
52
|
+
<model-viewer src="https://api.cloud.needle.tools/v1/public/908aa03/29b3b3743/" ar auto-rotate shadow-intensity=".5"
|
|
53
|
+
camera-controls touch-action="pan-y" autoplay></model-viewer>
|
|
54
|
+
|
|
55
|
+
<model-viewer src="https://api.cloud.needle.tools/v1/public/9162350/2b4509376/" ar auto-rotate shadow-intensity=".5"
|
|
56
|
+
camera-controls touch-action="pan-y" autoplay></model-viewer>
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
30
60
|
</div>
|
|
31
61
|
|
|
32
62
|
<style>
|
|
33
63
|
body {
|
|
34
64
|
margin: 0;
|
|
65
|
+
background-color: rgba(245, 245, 245, 1);
|
|
66
|
+
font-family: "Open Sans", sans-serif;
|
|
67
|
+
font-optical-sizing: auto;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
* {
|
|
71
|
+
box-sizing: border-box;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
a {
|
|
75
|
+
text-decoration: none;
|
|
76
|
+
color: #cb0000;
|
|
35
77
|
}
|
|
36
78
|
|
|
37
79
|
.layout {
|
|
38
80
|
position: relative;
|
|
39
81
|
width: 100%;
|
|
40
|
-
height: 100%;
|
|
82
|
+
min-height: 100%;
|
|
41
83
|
|
|
42
84
|
display: grid;
|
|
43
|
-
grid-template-columns:
|
|
85
|
+
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
|
|
86
|
+
gap: 1rem;
|
|
87
|
+
padding: 1rem;
|
|
44
88
|
}
|
|
45
89
|
|
|
46
|
-
|
|
90
|
+
.layout>* {
|
|
47
91
|
width: 100%;
|
|
48
|
-
height:
|
|
92
|
+
height: auto;
|
|
93
|
+
aspect-ratio: 1;
|
|
49
94
|
flex: 1;
|
|
95
|
+
background: white;
|
|
96
|
+
border-radius: .3rem;
|
|
97
|
+
box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
|
|
98
|
+
outline: 1px solid white;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.card {
|
|
102
|
+
padding: 1rem;
|
|
103
|
+
max-width: calc(100vw - 2rem);
|
|
50
104
|
}
|
|
51
105
|
|
|
52
106
|
@media screen and (max-width: 800px) {
|