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

Commit 8c31f1c

Browse files
GitHubDragonFlyGitHubDragonFly
authored
Update multiple viewers
1 parent 17d69b2 commit 8c31f1c

File tree

3 files changed

+39
-244
lines changed

3 files changed

+39
-244
lines changed

‎viewers/templates/GLTF WebGPU.html‎

Lines changed: 21 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
var THREE, fflate, manager, g_loader, gltf_loader, ktx2_loader, texture_loader;
3636
var skeletonUtils, draco_loader, tga_loader, dds_loader, exr_loader, rgbe_loader;
3737
var gpu, gl2, renderer, scene, scenes, default_camera, camera, cameras, cam_id;
38-
var controls, orb_controls, gizmo, orb_controls_gizmo, clock, count = 0;
38+
var controls, clock, count = 0, tex_res, tex_flip, tex_fmt;
3939
var postProcessing, outputPass, bloomPass, bloom_enabled, emissive_present;
4040
var grid, polar_grid, grid_visible, polar_grid_visible, model_modified;
4141
var animations, animation_mixer, current_animation, extras, current_extra;
@@ -44,7 +44,7 @@
4444
var gui, gui_set = false, guiExposure, params, toneMappingOptions, draco_material;
4545
var variants, variant_materials, current_variant, variants_available, link;
4646
var ambientLight, directionalLight, isMobile, equi_enabled, depthTest_enabled;
47-
var ww = window.innerWidth, wh = window.innerHeight, tex_res, tex_flip, tex_fmt;
47+
var ww = window.innerWidth, wh = window.innerHeight;
4848
var animation_running, extra_running, gif_export, object_is_points;
4949
var rot_x = 0, rot_y = 0, rot_z = 0, initial_rotation, texture_maps;
5050
var render_requested, flat_shading_enabled, filename, enabled_features;
@@ -68,8 +68,6 @@
6868
import { KTX2Loader } from "three/addons/loaders/KTX2Loader.min.js";
6969
import { DRACOLoader } from "three/addons/loaders/DRACOLoader.min.js";
7070
import { GLTFLoader } from "../static/jsm/loaders/GLTFLoader.min.js";
71-
import { OrbitControls } from "../static/jsm/controls/OrbitControls.min.js";
72-
import { OrbitControlsGizmo } from "../static/jsm/controls/OrbitControlsGizmo.min.js";
7371

7472
THREE = three_js;
7573
fflate = fflate_js;
@@ -96,9 +94,6 @@
9694

9795
gui = new GUI( { autoPlace: false, container: document.getElementById("gui_position") } );
9896
set_gui_position();
99-
100-
orb_controls = OrbitControls;
101-
orb_controls_gizmo = OrbitControlsGizmo;
10297
</script>
10398

10499
<script src="../static/js/upng/UPNG.min.js" defer></script>
@@ -110,10 +105,6 @@
110105
position: relative;
111106
display: block;
112107
background-color: black;
113-
background-image: url( '../../images/DragonFly.webp' ), url( '../../images/DragonFly.png' );
114-
background-image: -webkit-image-set( url( '../../images/DragonFly.webp' ), url( '../../images/DragonFly.png' ) );
115-
background-position: calc(50vw - 115px) calc(50vh - 115px);
116-
background-repeat: no-repeat;
117108
width: 100%;
118109
min-height: 100vh;
119110
border: 0;
@@ -224,27 +215,6 @@
224215
z-index: 1;
225216
}
226217

227-
.spinner {
228-
position: absolute;
229-
display: block;
230-
width: 240px;
231-
height: 240px;
232-
top: calc(50% - 130px);
233-
left: calc(50% - 130px);
234-
padding: 4px;
235-
border: 6px solid blue;
236-
-webkit-border-radius: 50%;
237-
border-radius: 50%;
238-
border-top-color: lightblue;
239-
border-bottom-color: lightblue;
240-
background-color: transparent;
241-
-webkit-animation: spin 8s ease-in-out infinite;
242-
animation: spin 8s ease-in-out infinite;
243-
}
244-
245-
@-webkit-keyframes spin { to { -webkit-transform: rotate( 360deg ); } }
246-
@keyframes spin { to { transform: rotate( 360deg ); } }
247-
248218
.error_msg {
249219
background-color: transparent;
250220
position: absolute;
@@ -267,7 +237,6 @@
267237
position: absolute;
268238
text-align: center;
269239
font-size: large;
270-
display: none;
271240
height: 240px;
272241
width: 240px;
273242
top: 50%;
@@ -295,16 +264,6 @@
295264
height: 15px;
296265
}
297266

298-
.fm {
299-
color: navy;
300-
width: calc(100% - 86px);
301-
border: 1px solid navy;
302-
-webkit-border-radius: 2px;
303-
border-radius: 2px;
304-
padding: 4px;
305-
margin: 1px;
306-
}
307-
308267
#gui_position {
309268
position: absolute;
310269
display: none;
@@ -316,11 +275,14 @@
316275
margin-left: 2px;
317276
}
318277

319-
.fm_gizmo {
320-
width: 63px;
321-
height: 63px;
278+
.fm {
279+
color: navy;
280+
width: 99%;
281+
border: 1px solid navy;
282+
-webkit-border-radius: 2px;
283+
border-radius: 2px;
322284
padding: 4px;
323-
margin: 2px;
285+
margin: 1px;
324286
}
325287

326288
.fixed-menu {
@@ -347,7 +309,6 @@
347309

348310
<!-- Original OBJ source code that inspired this: https://codepen.io/Mamboleoo/pen/PqjGdN -->
349311
<!-- Using three.js library: https://github.com/mrdoob/three.js -->
350-
<!-- OrbitControlsGizmo from: https://github.com/Fennec-hub/ThreeOrbitControlsGizmo -->
351312
<!-- Animated GIF export is based on the following example and library: -->
352313
<!-- https://github.com/mrdoob/omggif-example -->
353314
<!-- https://github.com/deanm/omggif -->
@@ -361,7 +322,6 @@
361322
</head>
362323
<body onload="reset_all(); document_ready(); disabled_changed();" onresize="resize();">
363324
<div id="fixed_menu" class="fixed-menu">
364-
<div class="fm_gizmo" id="gizmo" title="Interactive Orbit Controls Gizmo" style="float: right; background-color: black;"></div>
365325
<div class="fm" id="fm1">
366326
<label for="file_input" title="3D Model Formats: GLTF + BIN, GLB, VRM, DRC Formats" style="color: #553801; margin-left: 3px;">3D</label>
367327
<button title="URL of the remote 3D model" id="btn_url" onclick="show_url();" style="background-color: transparent; min-width: 34px;">URL</button>
@@ -515,9 +475,8 @@
515475
<progress id="progress" value="0" max="1"></progress>
516476
</div>
517477

518-
<div id="div_spinner" class="spinner"></div>
519478
<div id="div_error" class="error_msg">E R R O R !</div>
520-
<div id="div_loading" class="loading_msg">Loading</div>
479+
<div id="div_loading" class="loading_msg">GLTF WebGPU</div>
521480
<div id="div_gif_rectangle" class="gif_rectangle"></div>
522481

523482
<script>
@@ -685,20 +644,16 @@
685644
function show_url() {
686645
if (url_displayed === true) {
687646
document.getElementById('url').style.display = 'none';
688-
document.getElementById('fm2').style.width = isMobile === true ? '99%' : 'calc(100% - 86px)';
689647
document.getElementById('btn_url').style.backgroundColor = 'transparent';
690648
url_displayed = false;
691649
} else {
692650
document.getElementById('url').style.display = 'block';
693-
document.getElementById('fm2').style.width = '99%';
694651
document.getElementById('btn_url').style.backgroundColor = 'lightgreen';
695652
url_displayed = true;
696653
}
697654

698655
resize();
699656

700-
if (gui) set_gui_position();
701-
702657
mouse_wheel = true;
703658
}
704659

@@ -742,18 +697,7 @@
742697
document.getElementById('btn_full_screen').style.backgroundColor = 'transparent';
743698
}
744699

745-
if (typeof $ !== 'undefined' && isMobile === false) {
746-
let fm1_bottom = ( parseInt( $('#fm1').outerHeight( true ) ) );
747-
748-
if (url_displayed === true) {
749-
document.getElementById('url').style.width = fm1_bottom > 70 ? '99%' : 'calc(100% - 86px)';
750-
751-
let url_bottom = ( fm1_bottom + parseInt( $('#url').outerHeight( true ) ) );
752-
document.getElementById('fm2').style.width = url_bottom > 70 ? '99%' : 'calc(100% - 86px)';
753-
} else {
754-
document.getElementById('fm2').style.width = fm1_bottom > 70 ? '99%' : 'calc(100% - 86px)';
755-
}
756-
}
700+
set_gui_position();
757701

758702
if (scene !== undefined) {
759703
mouse_wheel = true;
@@ -766,8 +710,6 @@
766710
default_camera.aspect = ww / wh;
767711
default_camera.updateProjectionMatrix();
768712

769-
if (gui) set_gui_position();
770-
771713
mouse_wheel = true;
772714
}
773715
}
@@ -801,7 +743,7 @@
801743
document.getElementById('btn_menu_location').style.backgroundColor = '#FFFF00';
802744
}
803745

804-
if (gui) set_gui_position();
746+
set_gui_position();
805747

806748
mouse_wheel = true;
807749
}
@@ -1809,7 +1751,7 @@
18091751
document.getElementById('div_message').style.display = '';
18101752
}
18111753

1812-
if (gui) set_gui_position();
1754+
set_gui_position();
18131755
}
18141756

18151757
async function set_scene_image( reset = false ) {
@@ -2309,11 +2251,6 @@
23092251

23102252
await scene_cleanup();
23112253

2312-
if (gizmo) {
2313-
document.getElementById('gizmo').removeChild( gizmo.domElement );
2314-
gizmo = undefined;
2315-
}
2316-
23172254
await reset_all( true );
23182255
}
23192256

@@ -2426,7 +2363,6 @@
24262363

24272364
console.time( 'Loading Time' );
24282365
document.body.style.backgroundImage = 'none';
2429-
document.getElementById('div_spinner').style.display = 'none';
24302366
document.getElementById('div_error').style.display = 'none';
24312367
document.getElementById('div_loading').style.display = 'block';
24322368
document.getElementById('div_loading').innerHTML = 'Load & Visualize';
@@ -2564,12 +2500,14 @@
25642500
}
25652501

25662502
if (controls === undefined) {
2567-
controls = new orb_controls( default_camera, renderer.domElement );
2568-
controls.enableZoomToCursor = true;
2569-
controls.zoomSpeed = 0.8;
2570-
controls.rotateSpeed = 0.8;
2571-
controls.keyPanSpeed = 0.8;
2572-
controls.panSpeed = 0.8;
2503+
const { OrbitControls } = await import( "three/addons/controls/OrbitControls.min.js" );
2504+
2505+
controls = new OrbitControls( default_camera, renderer.domElement );
2506+
controls.zoomToCursor = true;
2507+
controls.zoomSpeed = 0.6;
2508+
controls.rotateSpeed = 0.6;
2509+
controls.keyPanSpeed = 0.6;
2510+
controls.panSpeed = 0.6;
25732511
//controls.enableDamping = true;
25742512
//controls.dampingFactor = 0.05;
25752513
//controls.enableKeys = false;
@@ -3194,26 +3132,6 @@
31943132
disabled_changed();
31953133
}
31963134

3197-
if (isMobile === true) {
3198-
document.getElementById('gizmo').style.display = 'none';
3199-
} else {
3200-
if (gizmo === undefined) {
3201-
gizmo = new orb_controls_gizmo( controls, {
3202-
size: 65,
3203-
padding: 4,
3204-
bubbleSizePrimary: 7,
3205-
bubbleSizeSecondary: 3,
3206-
lineWidth: 1,
3207-
fontSize: '8px',
3208-
fontColor: 'black',
3209-
fontWeight: 'bold'
3210-
});
3211-
3212-
document.getElementById('gizmo').addEventListener( 'click', ( event ) => { if (progress.value === 0) mouse_down = true; }, false);
3213-
document.getElementById('gizmo').appendChild( gizmo.domElement );
3214-
}
3215-
}
3216-
32173135
if (animations.length > 0) {
32183136
animation_mixer.clipAction( animations[ 0 ] ).play();
32193137
document.getElementById('btn_animate').disabled = false;
@@ -3289,11 +3207,6 @@
32893207
render_requested = false;
32903208
enable_disable( true );
32913209

3292-
if (gizmo) {
3293-
document.getElementById('gizmo').removeChild( gizmo.domElement );
3294-
gizmo.dispose();
3295-
}
3296-
32973210
document.getElementById('div_loading').style.display = 'none';
32983211
document.getElementById('div_error').style.display = 'block';
32993212
}
@@ -4343,7 +4256,6 @@
43434256
}
43444257

43454258
controls.update();
4346-
if (gizmo) gizmo.update();
43474259

43484260
renderer.clear();
43494261

@@ -4499,7 +4411,6 @@
44994411
}
45004412

45014413
document.getElementById('file_input').value = '';
4502-
document.getElementById('div_spinner').style.display = 'block';
45034414
document.getElementById('div_error').style.display = 'none';
45044415
document.getElementById('btn_lines').disabled = true;
45054416
document.getElementById('btn_animate').disabled = true;
@@ -4510,11 +4421,6 @@
45104421
document.getElementById('url_entry').value = '';
45114422
selected_url_file = '';
45124423
enable_disable( true );
4513-
4514-
if (gizmo) {
4515-
document.getElementById('gizmo').removeChild( gizmo.domElement );
4516-
gizmo.dispose();
4517-
}
45184424
}
45194425

45204426
disabled_changed();
@@ -4766,13 +4672,6 @@
47664672
$('#model_scale').change( function() { $(this).children(':selected').click(); });
47674673
}
47684674

4769-
if (isMobile === true) {
4770-
$('#gizmo')[ 0 ].style.display = 'none';
4771-
$('#fm1')[ 0 ].style.width = '99%';
4772-
$('#fm2')[ 0 ].style.width = '99%';
4773-
$('#url')[ 0 ].style.width = '99%';
4774-
}
4775-
47764675
mouse_wheel = true;
47774676
}
47784677

‎viewers/templates/OBJ WebGPU.html‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1510,7 +1510,6 @@
15101510
position: absolute;
15111511
text-align: center;
15121512
font-size: large;
1513-
display: none;
15141513
height: 240px;
15151514
width: 240px;
15161515
top: 50%;
@@ -1712,7 +1711,7 @@
17121711
<div id="gui_position"></div>
17131712

17141713
<div id="div_error" class="error_msg">E R R O R !</div>
1715-
<div id="div_loading" class="loading_msg">Loading</div>
1714+
<div id="div_loading" class="loading_msg">OBJ+MTL WebGPU</div>
17161715

17171716
<script>
17181717
function hide_dropdown_ali() { $('#dc_ali').fadeOut(); mouse_wheel = true; }
@@ -1817,8 +1816,6 @@
18171816

18181817
resize();
18191818

1820-
if (gui) set_gui_position();
1821-
18221819
mouse_wheel = true;
18231820
}
18241821

@@ -1858,6 +1855,8 @@
18581855
document.getElementById('btn_full_screen').style.backgroundColor = 'transparent';
18591856
}
18601857

1858+
set_gui_position();
1859+
18611860
if (scene !== undefined) {
18621861
mouse_wheel = true;
18631862

@@ -1869,8 +1868,6 @@
18691868
camera.aspect = ww / wh;
18701869
camera.updateProjectionMatrix();
18711870

1872-
if (gui) set_gui_position();
1873-
18741871
mouse_wheel = true;
18751872
}
18761873
}
@@ -2627,7 +2624,7 @@
26272624
document.getElementById('div_message').style.display = '';
26282625
}
26292626

2630-
if (gui) set_gui_position();
2627+
set_gui_position();
26312628
}
26322629

26332630
async function set_scene_image( reset = false ) {

0 commit comments

Comments
 (0)