Skip to content

Commit ad952a5

Browse files
hujiulonghujiulong
committed
feat: add model-gltf to support the gltf format model.
1 parent 1f29f50 commit ad952a5

14 files changed

Lines changed: 2050 additions & 22171 deletions

File tree

‎examples/App.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@
3939
<li class="examples-menu-item">
4040
<router-link to="demo-ply">PLY Model (.ply)</router-link>
4141
</li>
42+
<li class="examples-menu-item">
43+
<router-link to="demo-gltf">glTF Model (.gltf)</router-link>
44+
</li>
4245
</ul>
4346
<div class="examples-pages">
4447
<router-view></router-view>

‎examples/pages/demo-gltf.vue‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
2-
<demo-block :code="code">
2+
<demo-block :vue-code="code" :html-code="htmlCode">
33
<template slot="preview">
44
<model-gltf :backgroundAlpha="0"
55
@on-load="onLoad"
6-
src="static/models/gltf/VC.gltf"></model-gltf>
6+
src="static/models/gltf/Duck/glTF/Duck.gltf"></model-gltf>
77
<div class="example-loading" v-show="loading"></div>
88
</template>
99
</demo-block>
@@ -16,26 +16,44 @@ import ModelGltf from '../../src/model-gltf.vue'
1616
const code = `
1717
1818
<template>
19-
<model-obj src="static/models/obj/tree.obj"></model-obj>
19+
<model-gltf src="static/models/gltf/Duck/glTF/Duck.gltf"></model-gltf>
2020
</template>
2121
2222
<script>
23-
import { ModelObj } from 'vue-3d-model'
23+
import { ModelGltf } from 'vue-3d-model'
2424
2525
export default {
2626
components: {
27-
ModelObj
27+
ModelGltf
2828
}
2929
}
3030
<\/script>
3131
3232
`
3333
34+
const htmlCode = `
35+
<body>
36+
<div id="app">
37+
<model-gltf
38+
src="static/models/gltf/Duck/glTF/Duck.gltf"
39+
@on-mousemove="onMouseMove">
40+
</model-gltf>
41+
</div>
42+
#scripts#
43+
<script>
44+
new Vue({
45+
el: '#app'
46+
})
47+
<\/script>
48+
</body>
49+
`
50+
3451
export default {
3552
name: 'demo-gltf',
3653
data () {
3754
return {
3855
code,
56+
htmlCode,
3957
loading: true
4058
}
4159
},

‎examples/pages/demo-json.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const htmlCode = `
4444
`
4545
4646
export default {
47-
name: 'demo-obj',
47+
name: 'demo-json',
4848
data () {
4949
return {
5050
code,

‎examples/pages/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import DemoBackground from './demo-background'
44
import DemoRotate from './demo-rotate'
55
import DemoObj from './demo-obj'
66
import DemoObjMtl from './demo-obj-mtl'
7-
// import DemoGltf from './demo-gltf'
7+
import DemoGltf from './demo-gltf'
88
import DemoStl from './demo-stl'
99
import DemoCollada from './demo-collada'
1010
// import DemoSea3d from './demo-sea3d'
@@ -21,7 +21,8 @@ const pages = [
2121
DemoStl,
2222
DemoCollada,
2323
DemoJson,
24-
DemoPly
24+
DemoPly,
25+
DemoGltf
2526
]
2627

2728
export { pages };

‎examples/static/models/gltf/Duck/glTF-Binary/Duck.glb‎

118 KB
Binary file not shown.

‎examples/static/models/gltf/Duck/glTF/Duck.gltf‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
{
2+
"asset": {
3+
"generator": "COLLADA2GLTF",
4+
"version": "2.0"
5+
},
6+
"scene": 0,
7+
"scenes": [
8+
{
9+
"nodes": [
10+
0
11+
]
12+
}
13+
],
14+
"nodes": [
15+
{
16+
"children": [
17+
2,
18+
1
19+
],
20+
"matrix": [
21+
0.009999999776482582,
22+
0.0,
23+
0.0,
24+
0.0,
25+
0.0,
26+
0.009999999776482582,
27+
0.0,
28+
0.0,
29+
0.0,
30+
0.0,
31+
0.009999999776482582,
32+
0.0,
33+
0.0,
34+
0.0,
35+
0.0,
36+
1.0
37+
]
38+
},
39+
{
40+
"matrix": [
41+
-0.7289686799049377,
42+
0.0,
43+
-0.6845470666885376,
44+
0.0,
45+
-0.4252049028873444,
46+
0.7836934328079224,
47+
0.4527972936630249,
48+
0.0,
49+
0.5364750623703003,
50+
0.6211478114128113,
51+
-0.571287989616394,
52+
0.0,
53+
400.1130065917969,
54+
463.2640075683594,
55+
-431.0780334472656,
56+
1.0
57+
],
58+
"camera": 0
59+
},
60+
{
61+
"mesh": 0
62+
}
63+
],
64+
"cameras": [
65+
{
66+
"perspective": {
67+
"aspectRatio": 1.5,
68+
"yfov": 0.6605925559997559,
69+
"zfar": 10000.0,
70+
"znear": 1.0
71+
},
72+
"type": "perspective"
73+
}
74+
],
75+
"meshes": [
76+
{
77+
"primitives": [
78+
{
79+
"attributes": {
80+
"NORMAL": 1,
81+
"POSITION": 2,
82+
"TEXCOORD_0": 3
83+
},
84+
"indices": 0,
85+
"mode": 4,
86+
"material": 0
87+
}
88+
],
89+
"name": "LOD3spShape"
90+
}
91+
],
92+
"accessors": [
93+
{
94+
"bufferView": 0,
95+
"byteOffset": 0,
96+
"componentType": 5123,
97+
"count": 12636,
98+
"max": [
99+
2398
100+
],
101+
"min": [
102+
0
103+
],
104+
"type": "SCALAR"
105+
},
106+
{
107+
"bufferView": 1,
108+
"byteOffset": 0,
109+
"componentType": 5126,
110+
"count": 2399,
111+
"max": [
112+
0.9995989799499512,
113+
0.999580979347229,
114+
0.9984359741210938
115+
],
116+
"min": [
117+
-0.9990839958190918,
118+
-1.0,
119+
-0.9998319745063782
120+
],
121+
"type": "VEC3"
122+
},
123+
{
124+
"bufferView": 1,
125+
"byteOffset": 28788,
126+
"componentType": 5126,
127+
"count": 2399,
128+
"max": [
129+
96.17990112304688,
130+
163.97000122070313,
131+
53.92519760131836
132+
],
133+
"min": [
134+
-69.29850006103516,
135+
9.929369926452637,
136+
-61.32819747924805
137+
],
138+
"type": "VEC3"
139+
},
140+
{
141+
"bufferView": 2,
142+
"byteOffset": 0,
143+
"componentType": 5126,
144+
"count": 2399,
145+
"max": [
146+
0.9833459854125976,
147+
0.9800369739532472
148+
],
149+
"min": [
150+
0.026409000158309938,
151+
0.01996302604675293
152+
],
153+
"type": "VEC2"
154+
}
155+
],
156+
"materials": [
157+
{
158+
"pbrMetallicRoughness": {
159+
"baseColorTexture": {
160+
"index": 0
161+
},
162+
"metallicFactor": 0.0
163+
},
164+
"emissiveFactor": [
165+
0.0,
166+
0.0,
167+
0.0
168+
],
169+
"name": "blinn3-fx"
170+
}
171+
],
172+
"textures": [
173+
{
174+
"sampler": 0,
175+
"source": 0
176+
}
177+
],
178+
"images": [
179+
{
180+
"uri": "DuckCM.png"
181+
}
182+
],
183+
"samplers": [
184+
{
185+
"magFilter": 9729,
186+
"minFilter": 9986,
187+
"wrapS": 10497,
188+
"wrapT": 10497
189+
}
190+
],
191+
"bufferViews": [
192+
{
193+
"buffer": 0,
194+
"byteOffset": 76768,
195+
"byteLength": 25272,
196+
"target": 34963
197+
},
198+
{
199+
"buffer": 0,
200+
"byteOffset": 0,
201+
"byteLength": 57576,
202+
"byteStride": 12,
203+
"target": 34962
204+
},
205+
{
206+
"buffer": 0,
207+
"byteOffset": 57576,
208+
"byteLength": 19192,
209+
"byteStride": 8,
210+
"target": 34962
211+
}
212+
],
213+
"buffers": [
214+
{
215+
"byteLength": 102040,
216+
"uri": "Duck0.bin"
217+
}
218+
]
219+
}

‎examples/static/models/gltf/Duck/glTF/Duck0.bin‎

99.6 KB
Binary file not shown.

‎examples/static/models/gltf/Duck/glTF/DuckCM.png‎

15.9 KB
Loading

0 commit comments

Comments
 (0)