[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
update+add 3d model picker
+370
-3090
+1
-1
package.json
+1
-1
package.json
+3
-1
src/lib/index.ts
+3
-1
src/lib/index.ts
···
46
46
export { default as Quote } from '$lib/components/extra/quote/Quote.svelte';
47
47
48
48
// 3d components
49
-
export { default as ModelPicker } from '$lib/components/3d/model-picker/ModelPicker.svelte';
49
+
export { default as ModelPicker } from '$lib/components/3d/model-picker/base/ModelPicker.svelte';
50
+
export { default as ModalModelPicker } from '$lib/components/3d/model-picker/modal/ModalModelPicker.svelte';
51
+
export { default as PopoverModelPicker } from '$lib/components/3d/model-picker/popover/PopoverModelPicker.svelte';
50
52
export { default as Depth3D } from '$lib/components/3d/depth3d/Depth3D.svelte';
51
53
export { default as VoxelArt } from '$lib/components/3d/voxel-art/VoxelArt.svelte';
static/env/workshop.hdr
static/env/workshop.hdr
This is a binary file and will not be displayed.
static/env/workshop.jpg
static/env/workshop.jpg
This is a binary file and will not be displayed.
+6
src/docs/site-components/components_3d.ts
+6
src/docs/site-components/components_3d.ts
···
1
1
import type { ComponentCard } from './components_base';
2
2
import CardDepth3D from '$docs/cards/3d/CardDepth3D.svelte';
3
3
import CardVoxelArt from '$docs/cards/3d/CardVoxelArt.svelte';
4
+
import CardModelPicker from '$docs/cards/3d/CardModelPicker.svelte';
4
5
5
6
export const threeDComponents: ComponentCard[] = [
6
7
{
···
12
13
component: CardVoxelArt,
13
14
label: 'Voxel Art',
14
15
href: 'voxel-art'
16
+
},
17
+
{
18
+
component: CardModelPicker,
19
+
label: 'Model Picker',
20
+
href: 'model-picker'
15
21
}
16
22
].sort((a, b) => a.label.localeCompare(b.label));
static/models/glb/vehicle-drag-racer.glb
static/models/glb/vehicle-drag-racer.glb
This is a binary file and will not be displayed.
static/models/glb/vehicle-monster-truck.glb
static/models/glb/vehicle-monster-truck.glb
This is a binary file and will not be displayed.
static/models/glb/vehicle-racer-low.glb
static/models/glb/vehicle-racer-low.glb
This is a binary file and will not be displayed.
static/models/glb/vehicle-racer.glb
static/models/glb/vehicle-racer.glb
This is a binary file and will not be displayed.
static/models/glb/vehicle-speedster.glb
static/models/glb/vehicle-speedster.glb
This is a binary file and will not be displayed.
static/models/glb/vehicle-suv.glb
static/models/glb/vehicle-suv.glb
This is a binary file and will not be displayed.
static/models/glb/vehicle-truck.glb
static/models/glb/vehicle-truck.glb
This is a binary file and will not be displayed.
static/models/glb/vehicle-vintage-racer.glb
static/models/glb/vehicle-vintage-racer.glb
This is a binary file and will not be displayed.
static/models/gltf/Barrel_A.bin
static/models/gltf/Barrel_A.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Barrel_A.gltf
-126
static/models/gltf/Barrel_A.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Barrel_A"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cylinder.020",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 386,
65
-
"max": [0.5, 0.5, 0.5],
66
-
"min": [-0.5, -0.5, -0.5],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 386,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 386,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 1152,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 4632,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 3088,
98
-
"byteOffset": 4632,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 4632,
104
-
"byteOffset": 7720,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 2304,
110
-
"byteOffset": 12352,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 14656,
123
-
"uri": "Barrel_A.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/Barrel_B.bin
static/models/gltf/Barrel_B.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Barrel_B.gltf
-126
static/models/gltf/Barrel_B.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Barrel_B"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cylinder.260",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 386,
65
-
"max": [0.5, 0.5, 0.5],
66
-
"min": [-0.5, -0.5, -0.5],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 386,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 386,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 1152,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 4632,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 3088,
98
-
"byteOffset": 4632,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 4632,
104
-
"byteOffset": 7720,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 2304,
110
-
"byteOffset": 12352,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 14656,
123
-
"uri": "Barrel_B.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/Box_A.bin
static/models/gltf/Box_A.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Box_A.gltf
-126
static/models/gltf/Box_A.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Box_A"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cube.006",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 114,
65
-
"max": [0.2280881255865097, 0.5088967084884644, 0.23510634899139404],
66
-
"min": [-0.2280881255865097, -5.0981654453607916e-8, -0.2280881255865097],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 114,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 114,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 168,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 1368,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 912,
98
-
"byteOffset": 1368,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 1368,
104
-
"byteOffset": 2280,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 336,
110
-
"byteOffset": 3648,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 3984,
123
-
"uri": "Box_A.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/Box_B.bin
static/models/gltf/Box_B.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Box_B.gltf
-126
static/models/gltf/Box_B.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Box_B"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cube.004",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 168,
65
-
"max": [0.30000004172325134, 0.40222930908203125, 0.2061539888381958],
66
-
"min": [-0.30000004172325134, -4.470348358154297e-8, -0.20000004768371582],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 168,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 168,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 240,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 2016,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 1344,
98
-
"byteOffset": 2016,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 2016,
104
-
"byteOffset": 3360,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 480,
110
-
"byteOffset": 5376,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 5856,
123
-
"uri": "Box_B.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/Can_A.bin
static/models/gltf/Can_A.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Can_A.gltf
-126
static/models/gltf/Can_A.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Can_A"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cylinder.002",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 238,
65
-
"max": [0.15000000596046448, 0.4823187589645386, 0.15000000596046448],
66
-
"min": [-0.15000000596046448, -3.352760558072987e-8, -0.15000000596046448],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 238,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 238,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 624,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 2856,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 1904,
98
-
"byteOffset": 2856,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 2856,
104
-
"byteOffset": 4760,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 1248,
110
-
"byteOffset": 7616,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 8864,
123
-
"uri": "Can_A.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/Can_B.bin
static/models/gltf/Can_B.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Can_B.gltf
-126
static/models/gltf/Can_B.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Can_B"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cylinder.001",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 238,
65
-
"max": [0.15000000596046448, 0.4823187589645386, 0.15000000596046448],
66
-
"min": [-0.15000000596046448, -3.352760558072987e-8, -0.15000000596046448],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 238,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 238,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 624,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 2856,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 1904,
98
-
"byteOffset": 2856,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 2856,
104
-
"byteOffset": 4760,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 1248,
110
-
"byteOffset": 7616,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 8864,
123
-
"uri": "Can_B.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/Coin_A.bin
static/models/gltf/Coin_A.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Coin_A.gltf
-126
static/models/gltf/Coin_A.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Coin_A"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cylinder",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 258,
65
-
"max": [0.5, 0.5, 0.17459581792354584],
66
-
"min": [-0.5, -0.5, -0.1745951920747757],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 258,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 258,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 708,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 3096,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 2064,
98
-
"byteOffset": 3096,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 3096,
104
-
"byteOffset": 5160,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 1416,
110
-
"byteOffset": 8256,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 9672,
123
-
"uri": "Coin_A.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/Coin_B.bin
static/models/gltf/Coin_B.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Coin_B.gltf
-126
static/models/gltf/Coin_B.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Coin_B"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cylinder.049",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 258,
65
-
"max": [0.5, 0.5, 0.17459581792354584],
66
-
"min": [-0.5, -0.5, -0.1745951920747757],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 258,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 258,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 708,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 3096,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 2064,
98
-
"byteOffset": 3096,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 3096,
104
-
"byteOffset": 5160,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 1416,
110
-
"byteOffset": 8256,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 9672,
123
-
"uri": "Coin_B.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/Coin_C.bin
static/models/gltf/Coin_C.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Coin_C.gltf
-126
static/models/gltf/Coin_C.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Coin_C"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cylinder.050",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 258,
65
-
"max": [0.5, 0.5, 0.17459581792354584],
66
-
"min": [-0.5, -0.5, -0.1745951920747757],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 258,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 258,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 708,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 3096,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 2064,
98
-
"byteOffset": 3096,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 3096,
104
-
"byteOffset": 5160,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 1416,
110
-
"byteOffset": 8256,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 9672,
123
-
"uri": "Coin_C.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/Cube_Prototype_Large_A.bin
static/models/gltf/Cube_Prototype_Large_A.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Cube_Prototype_Large_A.gltf
-126
static/models/gltf/Cube_Prototype_Large_A.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Cube_Prototype_Large_A"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cube.16091",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 61,
65
-
"max": [2, 4.000000476837158, 2],
66
-
"min": [-2, 1.4901161193847656e-7, -2],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 61,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 61,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 132,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 732,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 488,
98
-
"byteOffset": 732,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 732,
104
-
"byteOffset": 1220,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 264,
110
-
"byteOffset": 1952,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 2216,
123
-
"uri": "Cube_Prototype_Large_A.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/Cube_Prototype_Large_B.bin
static/models/gltf/Cube_Prototype_Large_B.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Cube_Prototype_Large_B.gltf
-126
static/models/gltf/Cube_Prototype_Large_B.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Cube_Prototype_Large_B"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cube.16101",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 61,
65
-
"max": [2, 4.000000476837158, 2],
66
-
"min": [-2, 1.4901161193847656e-7, -2],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 61,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 61,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 132,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 732,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 488,
98
-
"byteOffset": 732,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 732,
104
-
"byteOffset": 1220,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 264,
110
-
"byteOffset": 1952,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 2216,
123
-
"uri": "Cube_Prototype_Large_B.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/Cube_Prototype_Small.bin
static/models/gltf/Cube_Prototype_Small.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Cube_Prototype_Small.gltf
-126
static/models/gltf/Cube_Prototype_Small.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Cube_Prototype_Small"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cube.16092",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 65,
65
-
"max": [1, 2.000000238418579, 1],
66
-
"min": [-1, 7.450580596923828e-8, -1],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 65,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 65,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 132,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 780,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 520,
98
-
"byteOffset": 780,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 780,
104
-
"byteOffset": 1300,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 264,
110
-
"byteOffset": 2080,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 2344,
123
-
"uri": "Cube_Prototype_Small.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/Door_A.bin
static/models/gltf/Door_A.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Door_A.gltf
-126
static/models/gltf/Door_A.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Door_A"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cube.16499",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 406,
65
-
"max": [1.6000001430511475, 2.8000001907348633, 0.2730309069156647],
66
-
"min": [-3.5762786865234375e-7, 0, -0.27303093671798706],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 406,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 406,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 888,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 4872,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 3248,
98
-
"byteOffset": 4872,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 4872,
104
-
"byteOffset": 8120,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 1776,
110
-
"byteOffset": 12992,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 14768,
123
-
"uri": "Door_A.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/Door_A_Decorated.bin
static/models/gltf/Door_A_Decorated.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Door_A_Decorated.gltf
-126
static/models/gltf/Door_A_Decorated.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Door_A_Decorated"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cube.16500",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 496,
65
-
"max": [1.6000001430511475, 2.8000001907348633, 0.3538309335708618],
66
-
"min": [-3.5762786865234375e-7, 0, -0.27303093671798706],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 496,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 496,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 1176,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 5952,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 3968,
98
-
"byteOffset": 5952,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 5952,
104
-
"byteOffset": 9920,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 2352,
110
-
"byteOffset": 15872,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 18224,
123
-
"uri": "Door_A_Decorated.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/Door_B.bin
static/models/gltf/Door_B.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Door_B.gltf
-126
static/models/gltf/Door_B.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Door_B"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cube.16501",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 304,
65
-
"max": [1.6000001430511475, 2.8000001907348633, 0.3856933116912842],
66
-
"min": [-3.5762786865234375e-7, 0, -0.15000005066394806],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 304,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 304,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 501,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 3648,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 2432,
98
-
"byteOffset": 3648,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 3648,
104
-
"byteOffset": 6080,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 1002,
110
-
"byteOffset": 9728,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 10732,
123
-
"uri": "Door_B.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/Dummy_Base.bin
static/models/gltf/Dummy_Base.bin
This is a binary file and will not be displayed.
-473
static/models/gltf/Dummy_Base.gltf
-473
static/models/gltf/Dummy_Base.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [5]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Dummy_ArmLeft",
17
-
"translation": [0.20001220703125, 0.6999998092651367, 0]
18
-
},
19
-
{
20
-
"mesh": 1,
21
-
"name": "Dummy_ArmRight",
22
-
"translation": [-0.20001220703125, 0.6999998092651367, 0]
23
-
},
24
-
{
25
-
"mesh": 2,
26
-
"name": "Dummy_Head",
27
-
"translation": [0, 0.8158736228942871, 0]
28
-
},
29
-
{
30
-
"mesh": 3,
31
-
"name": "Dummy_Target",
32
-
"translation": [0, 0.4902348518371582, -0.2750742435455322]
33
-
},
34
-
{
35
-
"children": [0, 1, 2, 3],
36
-
"mesh": 4,
37
-
"name": "Dummy_Body",
38
-
"translation": [0, 0.40000009536743164, 0]
39
-
},
40
-
{
41
-
"children": [4],
42
-
"mesh": 5,
43
-
"name": "Dummy_Base"
44
-
}
45
-
],
46
-
"materials": [
47
-
{
48
-
"name": "prototype_texture",
49
-
"pbrMetallicRoughness": {
50
-
"baseColorTexture": {
51
-
"index": 0
52
-
},
53
-
"metallicFactor": 0,
54
-
"roughnessFactor": 0.4000000059604645
55
-
}
56
-
}
57
-
],
58
-
"meshes": [
59
-
{
60
-
"name": "Cube.16119",
61
-
"primitives": [
62
-
{
63
-
"attributes": {
64
-
"POSITION": 0,
65
-
"TEXCOORD_0": 1,
66
-
"NORMAL": 2
67
-
},
68
-
"indices": 3,
69
-
"material": 0
70
-
}
71
-
]
72
-
},
73
-
{
74
-
"name": "Cube.16120",
75
-
"primitives": [
76
-
{
77
-
"attributes": {
78
-
"POSITION": 4,
79
-
"TEXCOORD_0": 5,
80
-
"NORMAL": 6
81
-
},
82
-
"indices": 7,
83
-
"material": 0
84
-
}
85
-
]
86
-
},
87
-
{
88
-
"name": "PrototypePete_head.003",
89
-
"primitives": [
90
-
{
91
-
"attributes": {
92
-
"POSITION": 8,
93
-
"TEXCOORD_0": 9,
94
-
"NORMAL": 10
95
-
},
96
-
"indices": 11,
97
-
"material": 0
98
-
}
99
-
]
100
-
},
101
-
{
102
-
"name": "Cylinder.315",
103
-
"primitives": [
104
-
{
105
-
"attributes": {
106
-
"POSITION": 12,
107
-
"TEXCOORD_0": 13,
108
-
"NORMAL": 14
109
-
},
110
-
"indices": 15,
111
-
"material": 0
112
-
}
113
-
]
114
-
},
115
-
{
116
-
"name": "PrototypePete_body.010",
117
-
"primitives": [
118
-
{
119
-
"attributes": {
120
-
"POSITION": 16,
121
-
"TEXCOORD_0": 17,
122
-
"NORMAL": 18
123
-
},
124
-
"indices": 19,
125
-
"material": 0
126
-
}
127
-
]
128
-
},
129
-
{
130
-
"name": "Cube.16121",
131
-
"primitives": [
132
-
{
133
-
"attributes": {
134
-
"POSITION": 20,
135
-
"TEXCOORD_0": 21,
136
-
"NORMAL": 22
137
-
},
138
-
"indices": 23,
139
-
"material": 0
140
-
}
141
-
]
142
-
}
143
-
],
144
-
"textures": [
145
-
{
146
-
"sampler": 0,
147
-
"source": 0
148
-
}
149
-
],
150
-
"images": [
151
-
{
152
-
"mimeType": "image/png",
153
-
"name": "prototypebits_texture",
154
-
"uri": "prototypebits_texture.png"
155
-
}
156
-
],
157
-
"accessors": [
158
-
{
159
-
"bufferView": 0,
160
-
"componentType": 5126,
161
-
"count": 474,
162
-
"max": [0.7712533473968506, 0.10866224765777588, 0.1161327213048935],
163
-
"min": [-0.11115402728319168, -0.11538654565811157, -0.11613257229328156],
164
-
"type": "VEC3"
165
-
},
166
-
{
167
-
"bufferView": 1,
168
-
"componentType": 5126,
169
-
"count": 474,
170
-
"type": "VEC2"
171
-
},
172
-
{
173
-
"bufferView": 2,
174
-
"componentType": 5126,
175
-
"count": 474,
176
-
"type": "VEC3"
177
-
},
178
-
{
179
-
"bufferView": 3,
180
-
"componentType": 5123,
181
-
"count": 1404,
182
-
"type": "SCALAR"
183
-
},
184
-
{
185
-
"bufferView": 4,
186
-
"componentType": 5126,
187
-
"count": 474,
188
-
"max": [0.11115402728319168, 0.10866224765777588, 0.1161327213048935],
189
-
"min": [-0.7712533473968506, -0.11538654565811157, -0.11613257229328156],
190
-
"type": "VEC3"
191
-
},
192
-
{
193
-
"bufferView": 5,
194
-
"componentType": 5126,
195
-
"count": 474,
196
-
"type": "VEC2"
197
-
},
198
-
{
199
-
"bufferView": 6,
200
-
"componentType": 5126,
201
-
"count": 474,
202
-
"type": "VEC3"
203
-
},
204
-
{
205
-
"bufferView": 7,
206
-
"componentType": 5123,
207
-
"count": 1404,
208
-
"type": "SCALAR"
209
-
},
210
-
{
211
-
"bufferView": 8,
212
-
"componentType": 5126,
213
-
"count": 586,
214
-
"max": [0.4827654957771301, 0.9812533855438232, 0.5434228777885437],
215
-
"min": [-0.4827365279197693, 0, -0.4500238597393036],
216
-
"type": "VEC3"
217
-
},
218
-
{
219
-
"bufferView": 9,
220
-
"componentType": 5126,
221
-
"count": 586,
222
-
"type": "VEC2"
223
-
},
224
-
{
225
-
"bufferView": 10,
226
-
"componentType": 5126,
227
-
"count": 586,
228
-
"type": "VEC3"
229
-
},
230
-
{
231
-
"bufferView": 11,
232
-
"componentType": 5123,
233
-
"count": 1770,
234
-
"type": "SCALAR"
235
-
},
236
-
{
237
-
"bufferView": 12,
238
-
"componentType": 5126,
239
-
"count": 260,
240
-
"max": [0.28749996423721313, 0.28749996423721313, 0.11499998718500137],
241
-
"min": [-0.28749996423721313, -0.2874999940395355, 4.354193949840379e-10],
242
-
"type": "VEC3"
243
-
},
244
-
{
245
-
"bufferView": 13,
246
-
"componentType": 5126,
247
-
"count": 260,
248
-
"type": "VEC2"
249
-
},
250
-
{
251
-
"bufferView": 14,
252
-
"componentType": 5126,
253
-
"count": 260,
254
-
"type": "VEC3"
255
-
},
256
-
{
257
-
"bufferView": 15,
258
-
"componentType": 5123,
259
-
"count": 360,
260
-
"type": "SCALAR"
261
-
},
262
-
{
263
-
"bufferView": 16,
264
-
"componentType": 5126,
265
-
"count": 669,
266
-
"max": [0.3586497902870178, 0.8481189012527466, 0.3334102928638458],
267
-
"min": [-0.35865044593811035, -0.02358829975128174, -0.2985883355140686],
268
-
"type": "VEC3"
269
-
},
270
-
{
271
-
"bufferView": 17,
272
-
"componentType": 5126,
273
-
"count": 669,
274
-
"type": "VEC2"
275
-
},
276
-
{
277
-
"bufferView": 18,
278
-
"componentType": 5126,
279
-
"count": 669,
280
-
"type": "VEC3"
281
-
},
282
-
{
283
-
"bufferView": 19,
284
-
"componentType": 5123,
285
-
"count": 1824,
286
-
"type": "SCALAR"
287
-
},
288
-
{
289
-
"bufferView": 20,
290
-
"componentType": 5126,
291
-
"count": 226,
292
-
"max": [0.2500152587890625, 0.5020763874053955, 0.25],
293
-
"min": [-0.2499847412109375, 0, -0.25],
294
-
"type": "VEC3"
295
-
},
296
-
{
297
-
"bufferView": 21,
298
-
"componentType": 5126,
299
-
"count": 226,
300
-
"type": "VEC2"
301
-
},
302
-
{
303
-
"bufferView": 22,
304
-
"componentType": 5126,
305
-
"count": 226,
306
-
"type": "VEC3"
307
-
},
308
-
{
309
-
"bufferView": 23,
310
-
"componentType": 5123,
311
-
"count": 600,
312
-
"type": "SCALAR"
313
-
}
314
-
],
315
-
"bufferViews": [
316
-
{
317
-
"buffer": 0,
318
-
"byteLength": 5688,
319
-
"byteOffset": 0,
320
-
"target": 34962
321
-
},
322
-
{
323
-
"buffer": 0,
324
-
"byteLength": 3792,
325
-
"byteOffset": 5688,
326
-
"target": 34962
327
-
},
328
-
{
329
-
"buffer": 0,
330
-
"byteLength": 5688,
331
-
"byteOffset": 9480,
332
-
"target": 34962
333
-
},
334
-
{
335
-
"buffer": 0,
336
-
"byteLength": 2808,
337
-
"byteOffset": 15168,
338
-
"target": 34963
339
-
},
340
-
{
341
-
"buffer": 0,
342
-
"byteLength": 5688,
343
-
"byteOffset": 17976,
344
-
"target": 34962
345
-
},
346
-
{
347
-
"buffer": 0,
348
-
"byteLength": 3792,
349
-
"byteOffset": 23664,
350
-
"target": 34962
351
-
},
352
-
{
353
-
"buffer": 0,
354
-
"byteLength": 5688,
355
-
"byteOffset": 27456,
356
-
"target": 34962
357
-
},
358
-
{
359
-
"buffer": 0,
360
-
"byteLength": 2808,
361
-
"byteOffset": 33144,
362
-
"target": 34963
363
-
},
364
-
{
365
-
"buffer": 0,
366
-
"byteLength": 7032,
367
-
"byteOffset": 35952,
368
-
"target": 34962
369
-
},
370
-
{
371
-
"buffer": 0,
372
-
"byteLength": 4688,
373
-
"byteOffset": 42984,
374
-
"target": 34962
375
-
},
376
-
{
377
-
"buffer": 0,
378
-
"byteLength": 7032,
379
-
"byteOffset": 47672,
380
-
"target": 34962
381
-
},
382
-
{
383
-
"buffer": 0,
384
-
"byteLength": 3540,
385
-
"byteOffset": 54704,
386
-
"target": 34963
387
-
},
388
-
{
389
-
"buffer": 0,
390
-
"byteLength": 3120,
391
-
"byteOffset": 58244,
392
-
"target": 34962
393
-
},
394
-
{
395
-
"buffer": 0,
396
-
"byteLength": 2080,
397
-
"byteOffset": 61364,
398
-
"target": 34962
399
-
},
400
-
{
401
-
"buffer": 0,
402
-
"byteLength": 3120,
403
-
"byteOffset": 63444,
404
-
"target": 34962
405
-
},
406
-
{
407
-
"buffer": 0,
408
-
"byteLength": 720,
409
-
"byteOffset": 66564,
410
-
"target": 34963
411
-
},
412
-
{
413
-
"buffer": 0,
414
-
"byteLength": 8028,
415
-
"byteOffset": 67284,
416
-
"target": 34962
417
-
},
418
-
{
419
-
"buffer": 0,
420
-
"byteLength": 5352,
421
-
"byteOffset": 75312,
422
-
"target": 34962
423
-
},
424
-
{
425
-
"buffer": 0,
426
-
"byteLength": 8028,
427
-
"byteOffset": 80664,
428
-
"target": 34962
429
-
},
430
-
{
431
-
"buffer": 0,
432
-
"byteLength": 3648,
433
-
"byteOffset": 88692,
434
-
"target": 34963
435
-
},
436
-
{
437
-
"buffer": 0,
438
-
"byteLength": 2712,
439
-
"byteOffset": 92340,
440
-
"target": 34962
441
-
},
442
-
{
443
-
"buffer": 0,
444
-
"byteLength": 1808,
445
-
"byteOffset": 95052,
446
-
"target": 34962
447
-
},
448
-
{
449
-
"buffer": 0,
450
-
"byteLength": 2712,
451
-
"byteOffset": 96860,
452
-
"target": 34962
453
-
},
454
-
{
455
-
"buffer": 0,
456
-
"byteLength": 1200,
457
-
"byteOffset": 99572,
458
-
"target": 34963
459
-
}
460
-
],
461
-
"samplers": [
462
-
{
463
-
"magFilter": 9729,
464
-
"minFilter": 9987
465
-
}
466
-
],
467
-
"buffers": [
468
-
{
469
-
"byteLength": 100772,
470
-
"uri": "Dummy_Base.bin"
471
-
}
472
-
]
473
-
}
static/models/gltf/Pallet_Large.bin
static/models/gltf/Pallet_Large.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Pallet_Large.gltf
-126
static/models/gltf/Pallet_Large.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Pallet_Large"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cube.024",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 264,
65
-
"max": [2, 0.4999999403953552, 2],
66
-
"min": [-2, -2.9802322387695312e-8, -2],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 264,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 264,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 396,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 3168,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 2112,
98
-
"byteOffset": 3168,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 3168,
104
-
"byteOffset": 5280,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 792,
110
-
"byteOffset": 8448,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 9240,
123
-
"uri": "Pallet_Large.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/Pillar_A.bin
static/models/gltf/Pillar_A.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Pillar_A.gltf
-126
static/models/gltf/Pillar_A.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Pillar_A"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cube.16099",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 88,
65
-
"max": [0.30000001192092896, 4.099999904632568, 0.30000001192092896],
66
-
"min": [-0.30000001192092896, 0, -0.30000001192092896],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 88,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 88,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 132,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 1056,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 704,
98
-
"byteOffset": 1056,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 1056,
104
-
"byteOffset": 1760,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 264,
110
-
"byteOffset": 2816,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 3080,
123
-
"uri": "Pillar_A.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/Pillar_B.bin
static/models/gltf/Pillar_B.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Pillar_B.gltf
-126
static/models/gltf/Pillar_B.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Pillar_B"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cube.16100",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 88,
65
-
"max": [0.5, 4.099999904632568, 0.5],
66
-
"min": [-0.5, 0, -0.5],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 88,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 88,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 132,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 1056,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 704,
98
-
"byteOffset": 1056,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 1056,
104
-
"byteOffset": 1760,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 264,
110
-
"byteOffset": 2816,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 3080,
123
-
"uri": "Pillar_B.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/Primitive_Slope_Half.bin
static/models/gltf/Primitive_Slope_Half.bin
This is a binary file and will not be displayed.
-126
static/models/gltf/Primitive_Slope_Half.gltf
-126
static/models/gltf/Primitive_Slope_Half.gltf
···
1
-
{
2
-
"asset": {
3
-
"generator": "Khronos glTF Blender I/O v3.4.50",
4
-
"version": "2.0"
5
-
},
6
-
"scene": 0,
7
-
"scenes": [
8
-
{
9
-
"name": "Scene",
10
-
"nodes": [0]
11
-
}
12
-
],
13
-
"nodes": [
14
-
{
15
-
"mesh": 0,
16
-
"name": "Primitive_Slope_Half"
17
-
}
18
-
],
19
-
"materials": [
20
-
{
21
-
"name": "prototype_texture",
22
-
"pbrMetallicRoughness": {
23
-
"baseColorTexture": {
24
-
"index": 0
25
-
},
26
-
"metallicFactor": 0,
27
-
"roughnessFactor": 0.4000000059604645
28
-
}
29
-
}
30
-
],
31
-
"meshes": [
32
-
{
33
-
"name": "Cube.16431",
34
-
"primitives": [
35
-
{
36
-
"attributes": {
37
-
"POSITION": 0,
38
-
"TEXCOORD_0": 1,
39
-
"NORMAL": 2
40
-
},
41
-
"indices": 3,
42
-
"material": 0
43
-
}
44
-
]
45
-
}
46
-
],
47
-
"textures": [
48
-
{
49
-
"sampler": 0,
50
-
"source": 0
51
-
}
52
-
],
53
-
"images": [
54
-
{
55
-
"mimeType": "image/png",
56
-
"name": "prototypebits_texture",
57
-
"uri": "prototypebits_texture.png"
58
-
}
59
-
],
60
-
"accessors": [
61
-
{
62
-
"bufferView": 0,
63
-
"componentType": 5126,
64
-
"count": 30,
65
-
"max": [2, 4.000000476837158, 2],
66
-
"min": [-2, 1.4901161193847656e-7, -2],
67
-
"type": "VEC3"
68
-
},
69
-
{
70
-
"bufferView": 1,
71
-
"componentType": 5126,
72
-
"count": 30,
73
-
"type": "VEC2"
74
-
},
75
-
{
76
-
"bufferView": 2,
77
-
"componentType": 5126,
78
-
"count": 30,
79
-
"type": "VEC3"
80
-
},
81
-
{
82
-
"bufferView": 3,
83
-
"componentType": 5123,
84
-
"count": 48,
85
-
"type": "SCALAR"
86
-
}
87
-
],
88
-
"bufferViews": [
89
-
{
90
-
"buffer": 0,
91
-
"byteLength": 360,
92
-
"byteOffset": 0,
93
-
"target": 34962
94
-
},
95
-
{
96
-
"buffer": 0,
97
-
"byteLength": 240,
98
-
"byteOffset": 360,
99
-
"target": 34962
100
-
},
101
-
{
102
-
"buffer": 0,
103
-
"byteLength": 360,
104
-
"byteOffset": 600,
105
-
"target": 34962
106
-
},
107
-
{
108
-
"buffer": 0,
109
-
"byteLength": 96,
110
-
"byteOffset": 960,
111
-
"target": 34963
112
-
}
113
-
],
114
-
"samplers": [
115
-
{
116
-
"magFilter": 9729,
117
-
"minFilter": 9987
118
-
}
119
-
],
120
-
"buffers": [
121
-
{
122
-
"byteLength": 1056,
123
-
"uri": "Primitive_Slope_Half.bin"
124
-
}
125
-
]
126
-
}
static/models/gltf/prototypebits_texture.png
static/models/gltf/prototypebits_texture.png
This is a binary file and will not be displayed.
src/docs/assets/models/vehicle-monster-truck.png
src/docs/assets/models/vehicle-monster-truck.png
This is a binary file and will not be displayed.
src/docs/assets/models/vehicle-racer-low.png
src/docs/assets/models/vehicle-racer-low.png
This is a binary file and will not be displayed.
src/docs/assets/models/vehicle-racer.png
src/docs/assets/models/vehicle-racer.png
This is a binary file and will not be displayed.
+15
src/docs/cards/3d/CardModelPicker.svelte
+15
src/docs/cards/3d/CardModelPicker.svelte
···
1
+
<script lang="ts">
2
+
import { base } from '$app/paths';
3
+
import { ModelPicker } from '$lib';
4
+
import Image from '$lib/components/base/image/Image.svelte';
5
+
6
+
import image from '$docs/assets/models/vehicle-monster-truck.png';
7
+
import image2 from '$docs/assets/models/vehicle-racer.png';
8
+
import image3 from '$docs/assets/models/vehicle-racer-low.png';
9
+
</script>
10
+
11
+
<div class="h-44 w-full max-h-44 max-w-full flex items-center justify-center gap-6">
12
+
<Image src={image} alt="Vehicle Monster Truck" class="scale-125" />
13
+
<Image src={image2} alt="Vehicle Racer" class="scale-125" />
14
+
<Image src={image3} alt="Vehicle Racer Low" class="scale-125" />
15
+
</div>
static/models/glb/Textures/colormap.png
static/models/glb/Textures/colormap.png
This is a binary file and will not be displayed.
-67
src/lib/components/3d/model-picker/ModelPicker.svelte
-67
src/lib/components/3d/model-picker/ModelPicker.svelte
···
1
-
<script lang="ts">
2
-
import { Canvas } from '@threlte/core';
3
-
import { View } from '@threlte/extras';
4
-
import Scene from './ModelPickerScene.svelte';
5
-
import Modal from '$lib/components/base/modal/Modal.svelte';
6
-
import { Portal } from 'bits-ui';
7
-
8
-
let {
9
-
items,
10
-
open = $bindable(),
11
-
alwaysRotate = false,
12
-
title,
13
-
onselect
14
-
}: {
15
-
open: boolean;
16
-
items: { path: string; label: string }[];
17
-
alwaysRotate?: boolean;
18
-
onselect?: ({ path, label }: { path: string; label: string }) => void;
19
-
title?: string;
20
-
} = $props();
21
-
22
-
let states = $state(
23
-
new Array<{ hover: boolean; dom: HTMLElement | undefined }>(items.length).fill({
24
-
hover: false,
25
-
dom: undefined
26
-
})
27
-
);
28
-
</script>
29
-
30
-
<Modal bind:open class="mx-auto max-h-[100dvh] max-w-5xl overflow-hidden overflow-y-scroll" {title}>
31
-
<div
32
-
class="relative mx-auto grid h-full w-full max-w-5xl grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4"
33
-
>
34
-
{#each items as item, index}
35
-
<button
36
-
id="item"
37
-
class="hover:bg-base-200/40 dark:hover:bg-base-800/40 m-4 inline-block cursor-pointer rounded-2xl p-4 transition-all duration-300 hover:scale-105"
38
-
onclick={() => {
39
-
open = false;
40
-
states[index].hover = false;
41
-
onselect?.({ path: item.path, label: item.label });
42
-
}}
43
-
onpointerenter={() => {
44
-
states[index].hover = true;
45
-
}}
46
-
onpointerleave={() => {
47
-
states[index].hover = false;
48
-
}}
49
-
>
50
-
<div class="aspect-square" bind:this={states[index].dom}></div>
51
-
<div class="text-base-700 dark:text-base-300 text-sm">{item.label}</div>
52
-
</button>
53
-
{/each}
54
-
</div>
55
-
</Modal>
56
-
57
-
<Portal>
58
-
<div class="pointer-events-none fixed top-0 z-[1000] h-full w-full">
59
-
<Canvas>
60
-
{#each items as item, index}
61
-
<View dom={states[index].dom}>
62
-
<Scene path={item.path} hover={states[index].hover || alwaysRotate} />
63
-
</View>
64
-
{/each}
65
-
</Canvas>
66
-
</div>
67
-
</Portal>
-57
src/lib/components/3d/model-picker/ModelPickerScene.svelte
-57
src/lib/components/3d/model-picker/ModelPickerScene.svelte
···
1
-
<script lang="ts">
2
-
import { T, useTask } from '@threlte/core';
3
-
import { GLTF } from '@threlte/extras';
4
-
import { Box3, Group, Object3D, Vector3 } from 'three';
5
-
6
-
let {
7
-
path,
8
-
hover = false
9
-
}: {
10
-
path: string;
11
-
scaleFactor?: number;
12
-
hover?: boolean;
13
-
} = $props();
14
-
15
-
let rotation = $state(0);
16
-
let group: Group | undefined = $state();
17
-
18
-
const { start, stop } = useTask((delta) => {
19
-
rotation += delta;
20
-
});
21
-
22
-
$effect(() => {
23
-
if (hover) {
24
-
start();
25
-
} else {
26
-
stop();
27
-
}
28
-
});
29
-
</script>
30
-
31
-
<T.PerspectiveCamera makeDefault position={[0, 0, 2]} fov={50} near={0.1} far={10} />
32
-
33
-
<T.HemisphereLight args={[0xaaaaaa, 0x444444, 1]} />
34
-
<T.DirectionalLight args={[0xffffff, 1]} position={[1, 1, 1]} />
35
-
36
-
<T.Group rotation={[0.5, rotation + 0.5, 0]}>
37
-
<T.Group bind:ref={group}>
38
-
<GLTF
39
-
url={path}
40
-
onload={(gltf: Group & { scene: Object3D }) => {
41
-
if (!group) return;
42
-
43
-
const box = new Box3().setFromObject(gltf.scene);
44
-
const size = box.getSize(new Vector3());
45
-
const center = box.getCenter(new Vector3());
46
-
47
-
let maxSize = Math.max(size.x, size.y, size.z);
48
-
let myMaxSize = 1;
49
-
50
-
let scale = 0.9 / maxSize;
51
-
52
-
group.scale.set(scale, scale, scale);
53
-
group.position.set(-center.x * scale, -center.y * scale, -center.z * scale);
54
-
}}
55
-
/>
56
-
</T.Group>
57
-
</T.Group>
+5
-4
src/lib/components/colors/color-gradient-picker/ColorGradientPicker.svelte
+5
-4
src/lib/components/colors/color-gradient-picker/ColorGradientPicker.svelte
···
47
47
.join(', ')})`
48
48
);
49
49
50
-
$inspect(gradientString);
51
-
52
50
let colorsRef = $state<(HTMLDivElement | null)[]>(new Array(colors.length).fill(null));
53
51
let gradientRef = $state<HTMLDivElement | undefined>(undefined);
54
52
let isDragging = $state(new Array(colors.length).fill(false));
···
61
59
62
60
gestures.push(
63
61
new DragGesture(ref, (state) => {
64
-
console.log(state);
65
62
const { delta } = state;
66
63
67
64
const newPosition = delta[0] / (gradientRef?.clientWidth ?? 1);
···
75
72
isDragging[i] = state.active;
76
73
}
77
74
78
-
// let offset = Math.hypot(state.movement[0], state.movement[1]);
79
75
if (state.tap) {
80
76
allOpen[i] = !allOpen[i];
77
+
}
78
+
}, {
79
+
preventDefault: true,
80
+
eventOptions: {
81
+
passive: false
81
82
}
82
83
})
83
84
);
+75
src/lib/components/3d/model-picker/base/ModelPicker.svelte
+75
src/lib/components/3d/model-picker/base/ModelPicker.svelte
···
1
+
<script lang="ts">
2
+
import { Canvas } from '@threlte/core';
3
+
import { View } from '@threlte/extras';
4
+
import Scene from './ModelPickerScene.svelte';
5
+
import { Portal } from 'bits-ui';
6
+
import { cn } from '$lib';
7
+
import { ACESFilmicToneMapping, CineonToneMapping } from 'three';
8
+
9
+
let {
10
+
items,
11
+
alwaysRotate = false,
12
+
onselect,
13
+
canvasClasses = '',
14
+
class: className,
15
+
gridClasses,
16
+
maxColumns = 4
17
+
}: {
18
+
items: { path: string; label: string }[];
19
+
alwaysRotate?: boolean;
20
+
onselect?: ({ path, label }: { path: string; label: string }) => void;
21
+
canvasClasses?: string;
22
+
portalTo?: string;
23
+
class?: string;
24
+
gridClasses?: string;
25
+
maxColumns?: number;
26
+
} = $props();
27
+
28
+
let states = $state(
29
+
new Array<{ hover: boolean; dom: HTMLElement | undefined }>(items.length).fill({
30
+
hover: false,
31
+
dom: undefined
32
+
})
33
+
);
34
+
</script>
35
+
36
+
<div class={cn('relative h-full w-full', className)}>
37
+
<div
38
+
class={cn(
39
+
'grid h-full w-full grid-cols-2 gap-4',
40
+
maxColumns > 2 ? 'md:grid-cols-3' : '',
41
+
maxColumns > 3 ? 'lg:grid-cols-4' : '',
42
+
gridClasses
43
+
)}
44
+
>
45
+
{#each items as item, index}
46
+
<button
47
+
id="item"
48
+
class="hover:bg-base-200/40 dark:hover:bg-base-800/40 m-4 inline-block cursor-pointer rounded-2xl p-4 transition-all duration-300 hover:scale-105"
49
+
onclick={() => {
50
+
states[index].hover = false;
51
+
onselect?.({ path: item.path, label: item.label });
52
+
}}
53
+
onpointerenter={() => {
54
+
states[index].hover = true;
55
+
}}
56
+
onpointerleave={() => {
57
+
states[index].hover = false;
58
+
}}
59
+
>
60
+
<div class="aspect-square" bind:this={states[index].dom}></div>
61
+
<div class="text-base-700 dark:text-base-300 text-sm">{item.label}</div>
62
+
</button>
63
+
{/each}
64
+
</div>
65
+
66
+
<div class={cn('pointer-events-none absolute inset-0 h-full w-full', canvasClasses)}>
67
+
<Canvas toneMapping={CineonToneMapping}>
68
+
{#each items as item, index}
69
+
<View dom={states[index].dom}>
70
+
<Scene path={item.path} hover={states[index].hover || alwaysRotate} />
71
+
</View>
72
+
{/each}
73
+
</Canvas>
74
+
</div>
75
+
</div>
+64
src/lib/components/3d/model-picker/base/ModelPickerScene.svelte
+64
src/lib/components/3d/model-picker/base/ModelPickerScene.svelte
···
1
+
<script lang="ts">
2
+
import { base } from '$app/paths';
3
+
import { T, useTask, useThrelte } from '@threlte/core';
4
+
import { Environment, GLTF } from '@threlte/extras';
5
+
import { onMount } from 'svelte';
6
+
import { Box3, Group, Object3D, Vector3 } from 'three';
7
+
8
+
let {
9
+
path,
10
+
hover = false
11
+
}: {
12
+
path: string;
13
+
scaleFactor?: number;
14
+
hover?: boolean;
15
+
} = $props();
16
+
17
+
let rotation = $state(0);
18
+
let group: Group | undefined = $state();
19
+
20
+
const { start, stop } = useTask((delta) => {
21
+
rotation += delta;
22
+
});
23
+
24
+
$effect(() => {
25
+
if (hover) {
26
+
start();
27
+
} else {
28
+
stop();
29
+
}
30
+
});
31
+
32
+
const { renderer } = useThrelte();
33
+
34
+
onMount(() => {
35
+
renderer.toneMappingExposure = 0.7;
36
+
});
37
+
</script>
38
+
39
+
<T.PerspectiveCamera makeDefault position={[0, 0, 2]} fov={50} near={0.1} far={10} />
40
+
41
+
<T.DirectionalLight args={[0xffffff, 1]} position={[-1, 1, 1]} />
42
+
43
+
<T.Group rotation={[0.5, rotation + 2.5, 0]}>
44
+
<T.Group bind:ref={group}>
45
+
<GLTF
46
+
url={path}
47
+
onload={(gltf: Group & { scene: Object3D }) => {
48
+
if (!group) return;
49
+
50
+
const box = new Box3().setFromObject(gltf.scene);
51
+
const size = box.getSize(new Vector3());
52
+
const center = box.getCenter(new Vector3());
53
+
54
+
let maxSize = Math.max(size.x, size.y, size.z);
55
+
let scale = 0.9 / maxSize;
56
+
57
+
group.scale.set(scale, scale, scale);
58
+
group.position.set(-center.x * scale, -center.y * scale, -center.z * scale);
59
+
}}
60
+
/>
61
+
</T.Group>
62
+
</T.Group>
63
+
64
+
<Environment isBackground={false} url={base + '/env/workshop.jpg'} />
+32
src/lib/components/3d/model-picker/modal/ModalModelPicker.svelte
+32
src/lib/components/3d/model-picker/modal/ModalModelPicker.svelte
···
1
+
<script lang="ts">
2
+
import { cn, Modal } from '$lib';
3
+
import ModelPicker from '../base/ModelPicker.svelte';
4
+
5
+
let {
6
+
items,
7
+
open = $bindable(),
8
+
alwaysRotate = false,
9
+
onselect,
10
+
canvasClasses = '',
11
+
title
12
+
}: {
13
+
open: boolean;
14
+
items: { path: string; label: string }[];
15
+
alwaysRotate?: boolean;
16
+
onselect?: ({ path, label }: { path: string; label: string }) => void;
17
+
canvasClasses?: string;
18
+
title?: string;
19
+
} = $props();
20
+
</script>
21
+
22
+
<Modal bind:open class="mx-auto max-h-[80dvh] max-w-5xl overflow-hidden overflow-y-scroll" {title}>
23
+
<ModelPicker
24
+
{items}
25
+
{alwaysRotate}
26
+
onselect={({ path, label }) => {
27
+
onselect?.({ path, label });
28
+
open = false;
29
+
}}
30
+
{canvasClasses}
31
+
/>
32
+
</Modal>
+46
src/lib/components/3d/model-picker/popover/PopoverModelPicker.svelte
+46
src/lib/components/3d/model-picker/popover/PopoverModelPicker.svelte
···
1
+
<script lang="ts">
2
+
import { cn, ModelPicker } from '$lib';
3
+
import { buttonVariants } from '$lib/components/base/button';
4
+
import * as Popover from '$lib/components/base/popover';
5
+
6
+
let {
7
+
items,
8
+
open = $bindable(false),
9
+
alwaysRotate = false,
10
+
onselect,
11
+
canvasClasses = '',
12
+
triggerClasses = '',
13
+
title
14
+
}: {
15
+
open?: boolean;
16
+
items: { path: string; label: string }[];
17
+
alwaysRotate?: boolean;
18
+
onselect?: ({ path, label }: { path: string; label: string }) => void;
19
+
canvasClasses?: string;
20
+
triggerClasses?: string;
21
+
title?: string;
22
+
} = $props();
23
+
24
+
let ref = $state(null);
25
+
</script>
26
+
27
+
<Popover.Root bind:open>
28
+
<Popover.Trigger class={cn(buttonVariants(), triggerClasses)}>
29
+
{title}
30
+
</Popover.Trigger>
31
+
<Popover.Content
32
+
side={'top'}
33
+
sideOffset={10}
34
+
class="max-h-[60dvh] w-full max-w-[calc(100vw-1rem)] overflow-y-scroll mx-2"
35
+
>
36
+
<ModelPicker
37
+
{items}
38
+
{alwaysRotate}
39
+
onselect={({ path, label }) => {
40
+
onselect?.({ path, label });
41
+
open = false;
42
+
}}
43
+
{canvasClasses}
44
+
/>
45
+
</Popover.Content>
46
+
</Popover.Root>
+6
-93
src/routes/(main)/components/3d/model-picker/+page.svelte
+6
-93
src/routes/(main)/components/3d/model-picker/+page.svelte
···
1
-
<script lang="ts">
2
-
import { base } from '$app/paths';
3
-
import { ModelPicker } from '$lib';
4
-
import Button from '$lib/components/base/button/Button.svelte';
5
-
import Subheading from '$lib/components/base/heading/Subheading.svelte';
6
-
import { toast } from 'svelte-sonner';
7
-
8
-
let open = $state(false);
1
+
<script>
2
+
import Prose from '$lib/components/base/prose/Prose.svelte';
3
+
import ModelPickerDocs from './ModelPicker.md';
9
4
</script>
10
5
11
-
<Subheading class="mb-4">Model Picker</Subheading>
12
-
13
-
<ModelPicker
14
-
items={[
15
-
{
16
-
path: base + '/models/gltf/Barrel_A.gltf',
17
-
label: 'Barrel A'
18
-
},
19
-
{
20
-
path: base + '/models/gltf/Barrel_B.gltf',
21
-
label: 'Barrel B'
22
-
},
23
-
{
24
-
path: base + '/models/gltf/Box_A.gltf',
25
-
label: 'Box A'
26
-
},
27
-
{
28
-
path: base + '/models/gltf/Box_B.gltf',
29
-
label: 'Box B'
30
-
},
31
-
{
32
-
path: base + '/models/gltf/Coin_A.gltf',
33
-
label: 'Coin A'
34
-
},
35
-
{
36
-
path: base + '/models/gltf/Coin_B.gltf',
37
-
label: 'Coin B'
38
-
},
39
-
{
40
-
path: base + '/models/gltf/Coin_C.gltf',
41
-
label: 'Coin C'
42
-
},
43
-
{
44
-
path: base + '/models/gltf/Cube_Prototype_Large_A.gltf',
45
-
label: 'Cube Prototype Large A'
46
-
},
47
-
{
48
-
path: base + '/models/gltf/Cube_Prototype_Large_B.gltf',
49
-
label: 'Cube Prototype Large B'
50
-
},
51
-
{
52
-
path: base + '/models/gltf/Cube_Prototype_Small.gltf',
53
-
label: 'Cube Prototype Small'
54
-
},
55
-
{
56
-
path: base + '/models/gltf/Door_A_Decorated.gltf',
57
-
label: 'Door A Decorated'
58
-
},
59
-
{
60
-
path: base + '/models/gltf/Door_A.gltf',
61
-
label: 'Door A'
62
-
},
63
-
{
64
-
path: base + '/models/gltf/Door_B.gltf',
65
-
label: 'Door B'
66
-
},
67
-
{
68
-
path: base + '/models/gltf/Dummy_Base.gltf',
69
-
label: 'Dummy Base'
70
-
},
71
-
{
72
-
path: base + '/models/gltf/Pallet_Large.gltf',
73
-
label: 'Pallet Large'
74
-
},
75
-
{
76
-
path: base + '/models/gltf/Pillar_A.gltf',
77
-
label: 'Pillar A'
78
-
},
79
-
{
80
-
path: base + '/models/gltf/Pillar_B.gltf',
81
-
label: 'Pillar B'
82
-
},
83
-
{
84
-
path: base + '/models/gltf/Primitive_Slope_Half.gltf',
85
-
label: 'Primitive Slope Half'
86
-
}
87
-
]}
88
-
bind:open
89
-
onselect={(item) => {
90
-
toast.success(`Selected ${item.label}`);
91
-
}}
92
-
title="Select a model"
93
-
/>
94
-
95
-
<Button onclick={() => (open = true)}>Open</Button>
6
+
<Prose>
7
+
<ModelPickerDocs />
8
+
</Prose>
+80
src/routes/(main)/components/3d/model-picker/Example.svelte
+80
src/routes/(main)/components/3d/model-picker/Example.svelte
···
1
+
<script lang="ts">
2
+
import { base } from '$app/paths';
3
+
import { toast } from 'svelte-sonner';
4
+
5
+
import { ModelPicker } from '$lib';
6
+
import ModalModelPicker from '$lib/components/3d/model-picker/modal/ModalModelPicker.svelte';
7
+
import PopoverModelPicker from '$lib/components/3d/model-picker/popover/PopoverModelPicker.svelte';
8
+
import Button from '$lib/components/base/button/Button.svelte';
9
+
10
+
let open = $state(false);
11
+
12
+
let vehicles = [
13
+
{
14
+
path: base + '/models/glb/vehicle-monster-truck.glb',
15
+
label: 'Monster Truck'
16
+
},
17
+
{
18
+
path: base + '/models/glb/vehicle-racer.glb',
19
+
label: 'Racer'
20
+
},
21
+
{
22
+
path: base + '/models/glb/vehicle-racer-low.glb',
23
+
label: 'Racer Low'
24
+
},
25
+
{
26
+
path: base + '/models/glb/vehicle-speedster.glb',
27
+
label: 'Speedster'
28
+
},
29
+
{
30
+
path: base + '/models/glb/vehicle-drag-racer.glb',
31
+
label: 'Drag Racer'
32
+
},
33
+
{
34
+
path: base + '/models/glb/vehicle-suv.glb',
35
+
label: 'SUV'
36
+
},
37
+
{
38
+
path: base + '/models/glb/vehicle-truck.glb',
39
+
label: 'Truck'
40
+
},
41
+
{
42
+
path: base + '/models/glb/vehicle-vintage-racer.glb',
43
+
label: 'Vintage Racer'
44
+
}
45
+
];
46
+
</script>
47
+
48
+
<h3>Inline Model Picker</h3>
49
+
50
+
<ModelPicker
51
+
items={vehicles.slice(0, 5)}
52
+
onselect={(item) => {
53
+
toast.success(`Selected ${item.label}`);
54
+
}}
55
+
maxColumns={3}
56
+
/>
57
+
58
+
<h3>Modal Model Picker</h3>
59
+
60
+
<Button onclick={() => (open = true)} class="mt-4">Open Modal</Button>
61
+
62
+
<ModalModelPicker
63
+
items={vehicles}
64
+
bind:open
65
+
title="Select a model"
66
+
onselect={(item) => {
67
+
toast.success(`Selected ${item.label}`);
68
+
}}
69
+
/>
70
+
71
+
<h3>Popover Model Picker</h3>
72
+
73
+
<PopoverModelPicker
74
+
items={vehicles}
75
+
onselect={(item) => {
76
+
toast.success(`Selected ${item.label}`);
77
+
}}
78
+
title="Select a model"
79
+
triggerClasses="mt-4"
80
+
/>
+37
src/routes/(main)/components/3d/model-picker/ModelPicker.md
+37
src/routes/(main)/components/3d/model-picker/ModelPicker.md
···
1
+
<script lang="ts">
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Depth 3D
6
+
7
+
## Example
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script lang="ts">
15
+
import { ModelPicker } from 'fuchs';
16
+
17
+
const items = [
18
+
{
19
+
path:'/path/to/model.gltf',
20
+
label: 'Model A'
21
+
},
22
+
{
23
+
path: '/path/to/model.gltf',
24
+
label: 'Model B'
25
+
}
26
+
]
27
+
</script>
28
+
29
+
<ModelPicker items={items} onselect={({ path, label }) => {
30
+
console.log(path, label);
31
+
}}
32
+
/>
33
+
```
34
+
35
+
## Credits
36
+
37
+
- Models from [Toy Car Kit](https://kenney.nl/assets/toy-car-kit) by [Kenney](https://kenney.nl)