Skip to content
This repository was archived by the owner on Dec 16, 2025. It is now read-only.

Commit b0dbcc3

Browse files
GitHubDragonFlyGitHubDragonFly
authored
Update VRML Viewer
1 parent 2322de2 commit b0dbcc3

File tree

1 file changed

+2
-232
lines changed

1 file changed

+2
-232
lines changed

‎viewers/templates/VRML Viewer.html‎

Lines changed: 2 additions & 232 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta http-equiv="encoding" content="utf-8" charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<meta name="description" content="VRML (Virtual Reality Modeling Language) Viewer">
7+
<link rel="stylesheet" href="../static/css/desktop-viewers.css">
78
<link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon"/>
89

910
<script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1.10.0/dist/es-module-shims.min.js"></script>
@@ -23,7 +24,7 @@
2324
"meshoptimizer_encoder": "https://cdn.jsdelivr.net/npm/meshoptimizer@0.24.0/meshopt_encoder.module.min.js",
2425
"meshoptimizer_simplifier": "https://cdn.jsdelivr.net/npm/meshoptimizer@0.24.0/meshopt_simplifier.module.min.js",
2526
"ktx2-encoder": "https://esm.sh/ktx2-encoder@0.1.1",
26-
"@jsquash/avif": "https://esm.sh/@jsquash/avif@2.0.0"
27+
"@jsquash/avif": "https://esm.sh/@jsquash/avif@2.1.1"
2728
}
2829
}
2930
</script>
@@ -83,237 +84,6 @@
8384
<script src="../static/js/omggif/omggif.min.js" defer></script>
8485
<script src="../static/js/pako/dist/pako.min.js" defer></script>
8586

86-
<style>
87-
body, html {
88-
position: relative;
89-
display: block;
90-
background-color: black;
91-
background-image: url( '../../images/DragonFly.webp' ), url( '../../images/DragonFly.png' );
92-
background-image: -webkit-image-set( url( '../../images/DragonFly.webp' ), url( '../../images/DragonFly.png' ) );
93-
background-position: calc(50vw - 115px) calc(50vh - 115px);
94-
background-repeat: no-repeat;
95-
width: 100%;
96-
min-height: 100vh;
97-
border: 0;
98-
padding: 0;
99-
margin: 0;
100-
overflow: hidden;
101-
}
102-
103-
button {
104-
background-color: #d1cefc;
105-
border: 1px solid blue;
106-
-webkit-border-radius: 3px;
107-
border-radius: 3px;
108-
vertical-align: middle;
109-
margin: 2px 2px 2px 0;
110-
min-width: 20px;
111-
height: 22px;
112-
padding: 1px;
113-
}
114-
115-
label {
116-
vertical-align: middle;
117-
white-space: nowrap;
118-
margin: 2px 0 2px 0;
119-
text-align: center;
120-
font-size: 110%;
121-
height: 22px;
122-
}
123-
124-
input[type=color] {
125-
border: 1px solid whitesmoke;
126-
vertical-align: middle;
127-
margin: 0 2px 3px 2px;
128-
background: none;
129-
height: 18px;
130-
width: 16px;
131-
padding: 0;
132-
}
133-
134-
input[type=file] {
135-
vertical-align: middle;
136-
margin: 2px 0 2px 0;
137-
max-width: 160px;
138-
}
139-
140-
input[type=radio] {
141-
vertical-align: middle;
142-
margin: 0 2px 0 2px;
143-
}
144-
145-
input[type=checkbox] {
146-
margin: 0 2px 0 3px;
147-
}
148-
149-
input[type=range] {
150-
vertical-align: middle;
151-
margin: 2px 0 2px 0;
152-
min-width: 30px;
153-
}
154-
155-
input[type=text] {
156-
vertical-align: middle;
157-
margin: 2px 2px 2px 0;
158-
}
159-
160-
.dropdown {
161-
background-color: transparent;
162-
vertical-align: middle;
163-
display: inline-block;
164-
position: relative;
165-
min-width: 40px;
166-
font-size: 85%;
167-
color: blue;
168-
border: none;
169-
padding: 1px;
170-
}
171-
172-
.dropdown-content {
173-
background-color: #FFFAD5;
174-
border: 1px solid #DEAF64;
175-
-webkit-border-radius: 3px;
176-
border-radius: 3px;
177-
position: absolute;
178-
margin-top: 2px;
179-
z-index: 10;
180-
}
181-
182-
select {
183-
vertical-align: middle;
184-
border: 1px solid blue;
185-
-webkit-border-radius: 3px;
186-
border-radius: 3px;
187-
background: none;
188-
min-width: 72px;
189-
height: 22px;
190-
color: blue;
191-
}
192-
193-
.gif_rectangle {
194-
background-color: transparent;
195-
border: 1px solid blue;
196-
left: calc(50% - 252px);
197-
top: calc(50% - 252px);
198-
position: absolute;
199-
display: none;
200-
height: 500px;
201-
width: 500px;
202-
z-index: 1;
203-
}
204-
205-
.spinner {
206-
position: absolute;
207-
display: block;
208-
background-color: transparent;
209-
width: 240px;
210-
height: 240px;
211-
top: calc(50% - 130px);
212-
left: calc(50% - 130px);
213-
padding: 4px;
214-
border: 6px solid blue;
215-
-webkit-border-radius: 50%;
216-
border-radius: 50%;
217-
border-top-color: lightblue;
218-
border-bottom-color: lightblue;
219-
-webkit-animation: spin 8s ease-in-out infinite;
220-
animation: spin 8s ease-in-out infinite;
221-
}
222-
223-
@-webkit-keyframes spin { to { -webkit-transform: rotate( 360deg ); } }
224-
@keyframes spin { to { transform: rotate( 360deg ); } }
225-
226-
.error_msg {
227-
background-color: transparent;
228-
position: absolute;
229-
text-align: center;
230-
font-size: x-large;
231-
display: none;
232-
color: red;
233-
width: 50vw;
234-
height: 50vh;
235-
top: 50vh;
236-
left: 25vw;
237-
padding: 5px;
238-
border: none;
239-
}
240-
241-
.loading_msg {
242-
background-color: transparent;
243-
color: greenyellow;
244-
position: absolute;
245-
text-align: center;
246-
font-size: x-large;
247-
display: none;
248-
width: 50vw;
249-
height: 50vh;
250-
top: 50vh;
251-
left: 25vw;
252-
padding: 5px;
253-
border: none;
254-
}
255-
256-
p.full_screen {
257-
text-align: center;
258-
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAf0lEQVRIie1VQQ6AMAjb/x9M4IRePICoK7GLB5eQbElpCTAY7j6YRiUPAvvxbNMkN76XIDhSRKCdjhmB494hzzwngcoBIa/eASgisMgTBo4ODqCTAiSFrW6Biv8LfL/I1DbtfDRV9VLgjVFhZp59A4g+7JaM6yULh7IyWUYX2AAPDxz26GjX+gAAAABJRU5ErkJggg==);
259-
margin: 1px 1px 1px 2px;
260-
padding: 0;
261-
width: 15px;
262-
height: 15px;
263-
}
264-
265-
p.polar {
266-
text-align: center;
267-
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAv0lEQVRIic2V6wqFIBCEe3PfWhDEjYIDtc7s5VjQDwkvO9/uaLqJyPZmCy0qpQhqywBPKAK6d85uLJCBfhq0Ar0gYxGKnYT0Qs+iqziEZgMQRCfUe5cJcEzUWoUF0k0EidwSRYO6EkvcjbcmtZB1WlgVIYAWZFUhnRDgn7FvAV63aHmTLcgjx5Rl8OiPhjLPXhWttSkGAnTp7MQgK02AlXnkNTOv6zHGWerxRZl4NoUfHMuG7LwLYPZkntQQYKXtSAJKMrYucd0AAAAASUVORK5CYII=);
268-
margin: 1px 1px 1px 2px;
269-
padding: 0;
270-
width: 15px;
271-
height: 15px;
272-
}
273-
274-
#gui_position {
275-
position: absolute;
276-
display: none;
277-
min-width: 200px;
278-
border: 1px solid navy;
279-
-webkit-border-radius: 2px;
280-
border-radius: 2px;
281-
min-height: 22px;
282-
margin-left: 2px;
283-
}
284-
285-
.fm {
286-
color: navy;
287-
width: 99%;
288-
border: 1px solid navy;
289-
-webkit-border-radius: 2px;
290-
border-radius: 2px;
291-
padding: 4px;
292-
margin: 1px;
293-
}
294-
295-
.fixed-menu {
296-
background-color: whitesmoke;
297-
display: inline-block;
298-
position: fixed;
299-
padding: 1px;
300-
width: 100%;
301-
z-index: 1;
302-
margin: 0;
303-
}
304-
305-
#progress {
306-
width: 99.5%;
307-
height: 2px;
308-
margin-left: 3px;
309-
margin-right: 3px;
310-
text-align: center;
311-
-webkit-appearance: none;
312-
-moz-appearance: none;
313-
appearance: none;
314-
}
315-
</style>
316-
31787
<!-- Original OBJ source code that inspired this: https://codepen.io/Mamboleoo/pen/PqjGdN -->
31888
<!-- Using three.js library: https://github.com/mrdoob/three.js -->
31989
<!-- Using jQuery: https://github.com/jquery/jquery -->

0 commit comments

Comments
 (0)