-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (97 loc) · 3.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>glTF Viewer- Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.min.css">
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.0.1/model-viewer.min.js"></script>
<style>
model-viewer {
width: 400px;
height: 300px;
border: 1px solid lightgray;
}
section {
display: flex;
}
fieldset {
all: unset;
flex-direction: column;
display: flex;
padding: 0.5rem;
}
fieldset legend {
font-size: smaller;
font-weight: bold;
}
cite {
display: block;
border-left: 4px solid gray;
padding-left: 0.5rem;
}
</style>
</head>
<body>
<main class="container">
<header>
<h1>model-viewer</h1>
<p>
This page demonstrated the basic usage of the <a href="https://modelviewer.dev/">model-viewer</a> web-component.
</p>
<p>
<cite>
glTF is a standard file format for three-dimensional scenes and models.
A glTF file uses one of two possible file extensions: .gltf (JSON/ASCII) or .glb (binary).
Both .gltf and .glb files may reference external binary and texture resources.
Alternatively, both formats may be self-contained by directly embedding binary data buffers (as base64-encoded strings in .gltf files or as raw byte arrays in .glb files).
An open standard developed and maintained by the Khronos Group, it supports 3D model geometry, appearance, scene graph hierarchy, and animation.
It is intended to be a streamlined, interoperable format for the delivery of 3D assets, while minimizing file size and runtime processing by apps.
As such, its creators have described it as the "JPEG of 3D."
</cite>
— <a href="https://en.wikipedia.org/wiki/GlTF">glTF (wikipedia)</a>
</p>
</header>
<article>
<h2>GL Transmission Format (glTF)</h2>
<ul>
<li>Multi-Datei Format</li>
<li><a href="https://creazilla.com/nodes/66809-pottery-flask-3d-model">Source: 66809-pottery-flask-3d-model</a></li>
</ul>
<section>
<fieldset>
<legend>cantil-pottery-flask-3d-model/scene.gltf (11.1 MB)</legend>
<model-viewer
src="./cantil-pottery-flask-3d-model/scene.gltf"
poster="./cantil-pottery-flask-3d-model.jpeg"
shadow-intensity="1"
camera-controls touch-action="pan-y" ar>
</model-viewer>
</fieldset>
</section>
</article>
<article>
<h2>Binary GL Transmission Format File (glb)</h2>
<ul>
<li>One-File Format</li>
<li><a href="https://github.com/sbtron/makeglb">MakeGlb (Javascript)</a></li>
<li><a href="https://filestar.com/skills/gltf/convert-gltf-to-glb">convert-gltf-to-glb</a></li>
</ul>
<section>
<fieldset>
<legend>cantil-pottery-flask-3d-model/scene.glb (11.1 MB)</legend>
<model-viewer
src="./cantil-pottery-flask-3d-model.glb"
poster="./cantil-pottery-flask-3d-model.jpeg"
shadow-intensity="1"
camera-controls touch-action="pan-y" ar>
</model-viewer>
</fieldset>
</section>
</article>
<footer>
<a href="https://www.fuerthwiki.de/wiki/index.php/F%C3%BCrthWiki:Impressum">Impressum</a>
</footer>
</main>
</body>
</html>