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

Commit e9b2e15

Browse files
GitHubDragonFlyGitHubDragonFly
authored
Update multiple viewers
1 parent c1eb1a7 commit e9b2e15

File tree

10 files changed

+148
-61
lines changed

10 files changed

+148
-61
lines changed

‎viewers/templates/3DM Viewer.html‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
<script src="https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/libs/draco/draco_encoder.min.js" defer></script>
3535

3636
<script>
37-
var THREE, manager, rhino_obj, object_is_mesh, object_is_points;
38-
var rhino_loader, hdrJPGLoader, texture_loader, exr_loader, rgbe_loader;
37+
var THREE, manager, rhino_loader, rhino_obj, object_is_mesh, object_is_points;
38+
var ktx2_loader, hdrJPGLoader, texture_loader, exr_loader, rgbe_loader;
3939
var renderer, scene, camera, render_requested, edges, edges_visible, link;
4040
var controls, gizmo, mouse_down, mouse_wheel, reset_rotation, events_initialized;
4141
var lil_gui, gui, gui_set = false, gui_multi_layers, params, toneMappingOptions;
@@ -1832,8 +1832,10 @@
18321832

18331833
URL.revokeObjectURL( fii );
18341834
});
1835-
} else if (fn_uc.endsWith('.SVG')) {
1836-
texture_loader.load( URL.createObjectURL( fii ) , function( texture ) {
1835+
} else if (fn_uc.endsWith('.KTX2') || fn_uc.endsWith('.SVG')) {
1836+
let loader = fn_uc.endsWith('.KTX2') ? ktx2_loader : texture_loader;
1837+
1838+
loader.load( URL.createObjectURL( fii ) , function( texture ) {
18371839
URL.revokeObjectURL( fii );
18381840

18391841
if (document.getElementById('equi').checked) {
@@ -2359,6 +2361,15 @@
23592361
renderer.autoClear = false;
23602362

23612363
document.body.appendChild( renderer.domElement );
2364+
2365+
if (ktx2_loader === undefined) {
2366+
const { KTX2Loader } = await import( 'three/addons/loaders/KTX2Loader.min.js' );
2367+
2368+
ktx2_loader = new KTX2Loader( manager );
2369+
ktx2_loader.setTranscoderPath( 'https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/libs/basis/' );
2370+
ktx2_loader.detectSupport( renderer );
2371+
manager.addHandler( /\.ktx2$/i, ktx2_loader );
2372+
}
23622373
}
23632374

23642375
if (hdrJPGLoader === undefined) {

‎viewers/templates/3DS Viewer.html‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
<script src="https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/libs/draco/draco_encoder.min.js" defer></script>
3535

3636
<script>
37-
var THREE, manager, texture_loader, tds_loader, tga_loader, dds_loader, exr_loader, rgbe_loader, hdrJPGLoader;
38-
var renderer, scene, camera, tds_obj, render_requested, edges, edges_visible, isMobile;
37+
var THREE, texture_loader, ktx2_loader, tds_loader, tga_loader, dds_loader, exr_loader, rgbe_loader, hdrJPGLoader;
38+
var manager, renderer, scene, camera, tds_obj, render_requested, edges, edges_visible, isMobile;
3939
var gui, gui_set = false, guiExposure = null, params, toneMappingOptions, link, count = 0;
4040
var controls, gizmo, grid, polar_grid, grid_visible, polar_grid_visible;
4141
var mouse_down, mouse_wheel, reset_rotation, events_initialized;
@@ -334,7 +334,7 @@
334334
<button title="URL of the remote 3DS model" id="btn_url" onclick="show_url();" style="background-color: transparent; min-width: 34px;">URL</button>
335335
<input type="file" title="Browse Local Files" id="file_input" onchange="init();" accept=".3ds, .tga, .dds, image/png, image/jpeg, image/bmp, image/gif, image/svg+xml, image/webp" multiple />
336336
<label for="file_image_input" title="Background Image" style="color: #553801;">BGND</label>
337-
<input type="file" title="Background Image" id="file_image_input" accept=".exr, .hdr, image/png, image/jpeg, image/bmp, image/gif, image/svg+xml, image/webp" onchange="set_scene_image();" disabled />
337+
<input type="file" title="Background Image" id="file_image_input" accept=".exr, .hdr, .ktx2, image/png, image/jpeg, image/bmp, image/gif, image/svg+xml, image/webp" onchange="set_scene_image();" disabled />
338338
<button title="Toggle Gradient Color Background" id="btn_bgnd_linear_gradient" onclick="set_bgnd_linear_gradient();" style="background-color: transparent; color: blue;" disabled>G</button>
339339
<button title="Model Opacity - double click to enable/disable" id="btn_dc_opacity" class="dropdown" style="text-align: center; border: 1px solid blue; -webkit-border-radius: 3px; border-radius: 3px;" ondblclick="set_opacity();" onclick="show_hide_dropdown_opacity();">O
340340
<div id="dc_opacity" class="dropdown-content" style="display: none;" onfocusout="if (enable_opacity === true) hide_dropdown_opacity();">
@@ -1724,7 +1724,7 @@
17241724

17251725
let fn_uc = fii.name.toUpperCase();
17261726

1727-
if (fii.type.startsWith('image/') && ! (fn_uc.endsWith('.SVG') || fn_uc.endsWith('.EXR') || fn_uc.endsWith('.HDR'))) {
1727+
if (fii.type.startsWith('image/') && ! (fn_uc.endsWith('.SVG') || fn_uc.endsWith('.KTX2') || fn_uc.endsWith('.EXR') || fn_uc.endsWith('.HDR'))) {
17281728
hdrJPGLoader.load( URL.createObjectURL( fii ) , async function( texture ) {
17291729
URL.revokeObjectURL( fii );
17301730

@@ -1763,8 +1763,10 @@
17631763

17641764
URL.revokeObjectURL( fii );
17651765
});
1766-
} else if (fn_uc.endsWith('.SVG')) {
1767-
texture_loader.load( URL.createObjectURL( fii ) , function( texture ) {
1766+
} else if (fn_uc.endsWith('.KTX2') || fn_uc.endsWith('.SVG')) {
1767+
let loader = fn_uc.endsWith('.KTX2') ? ktx2_loader : texture_loader;
1768+
1769+
loader.load( URL.createObjectURL( fii ) , function( texture ) {
17681770
URL.revokeObjectURL( fii );
17691771

17701772
if (document.getElementById('equi').checked) {
@@ -2320,6 +2322,15 @@
23202322
renderer.autoClear = false;
23212323

23222324
document.body.appendChild( renderer.domElement );
2325+
2326+
if (ktx2_loader === undefined) {
2327+
const { KTX2Loader } = await import( 'three/addons/loaders/KTX2Loader.min.js' );
2328+
2329+
ktx2_loader = new KTX2Loader( manager );
2330+
ktx2_loader.setTranscoderPath( 'https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/libs/basis/' );
2331+
ktx2_loader.detectSupport( renderer );
2332+
manager.addHandler( /\.ktx2$/i, ktx2_loader );
2333+
}
23232334
}
23242335

23252336
if (hdrJPGLoader === undefined) {

‎viewers/templates/3MF Viewer.html‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
<script src="https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/libs/draco/draco_encoder.min.js" defer></script>
3535

3636
<script>
37-
var THREE, fflate, manager, texture_loader, tmf_loader, tmf_obj, exr_loader, rgbe_loader, hdrJPGLoader;
38-
var renderer, scene, camera, render_requested, edges, edges_visible, flat_shading_enabled, count = 0;
37+
var THREE, fflate, tmf_loader, tmf_obj, texture_loader, ktx2_loader, exr_loader, rgbe_loader, hdrJPGLoader;
38+
var manager, renderer, scene, camera, render_requested, edges, edges_visible, flat_shading_enabled, count = 0;
3939
var controls, gizmo, gui, gui_set = false, guiExposure = null, params, toneMappingOptions;
4040
var grid, polar_grid, grid_visible, polar_grid_visible, link, isMobile;
4141
var mouse_down, mouse_wheel, reset_rotation, events_initialized;
@@ -334,7 +334,7 @@
334334
<button title="URL of the remote 3D model" id="btn_url" onclick="show_url();" style="background-color: transparent; min-width: 34px;">URL</button>
335335
<input type="file" title="Browse Local Files" id="file_input" onchange="init();" accept=".3mf" />
336336
<label for="file_image_input" title="Background Image" style="color: #553801;">BGND</label>
337-
<input type="file" title="Background Image" id="file_image_input" accept=".exr, .hdr, image/png, image/jpeg, image/bmp, image/gif, image/svg+xml, image/webp" onchange="set_scene_image();" disabled />
337+
<input type="file" title="Background Image" id="file_image_input" accept=".exr, .hdr, .ktx2, image/png, image/jpeg, image/bmp, image/gif, image/svg+xml, image/webp" onchange="set_scene_image();" disabled />
338338
<button title="Toggle Gradient Color Background" id="btn_bgnd_linear_gradient" onclick="set_bgnd_linear_gradient();" style="background-color: transparent; color: blue;" disabled>G</button>
339339
<button title="Model Opacity - double click to enable/disable" id="btn_dc_opacity" class="dropdown" style="text-align: center; border: 1px solid blue; -webkit-border-radius: 3px; border-radius: 3px;" ondblclick="set_opacity();" onclick="show_hide_dropdown_opacity();">O
340340
<div id="dc_opacity" class="dropdown-content" style="display: none;" onfocusout="if (enable_opacity === true) hide_dropdown_opacity();">
@@ -1757,7 +1757,7 @@
17571757

17581758
let fn_uc = fii.name.toUpperCase();
17591759

1760-
if (fii.type.startsWith('image/') && ! (fn_uc.endsWith('.SVG') || fn_uc.endsWith('.EXR') || fn_uc.endsWith('.HDR'))) {
1760+
if (fii.type.startsWith('image/') && ! (fn_uc.endsWith('.SVG') || fn_uc.endsWith('.KTX2') || fn_uc.endsWith('.EXR') || fn_uc.endsWith('.HDR'))) {
17611761
hdrJPGLoader.load( URL.createObjectURL( fii ) , async function( texture ) {
17621762
URL.revokeObjectURL( fii );
17631763

@@ -1796,8 +1796,10 @@
17961796

17971797
URL.revokeObjectURL( fii );
17981798
});
1799-
} else if (fn_uc.endsWith('.SVG')) {
1800-
texture_loader.load( URL.createObjectURL( fii ) , function( texture ) {
1799+
} else if (fn_uc.endsWith('.KTX2') || fn_uc.endsWith('.SVG')) {
1800+
let loader = fn_uc.endsWith('.KTX2') ? ktx2_loader : texture_loader;
1801+
1802+
loader.load( URL.createObjectURL( fii ) , function( texture ) {
18011803
URL.revokeObjectURL( fii );
18021804

18031805
if (document.getElementById('equi').checked) {
@@ -2294,6 +2296,15 @@
22942296
renderer.autoClear = false;
22952297

22962298
document.body.appendChild( renderer.domElement );
2299+
2300+
if (ktx2_loader === undefined) {
2301+
const { KTX2Loader } = await import( 'three/addons/loaders/KTX2Loader.min.js' );
2302+
2303+
ktx2_loader = new KTX2Loader( manager );
2304+
ktx2_loader.setTranscoderPath( 'https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/libs/basis/' );
2305+
ktx2_loader.detectSupport( renderer );
2306+
manager.addHandler( /\.ktx2$/i, ktx2_loader );
2307+
}
22972308
}
22982309

22992310
if (hdrJPGLoader === undefined) {

‎viewers/templates/AMF Viewer.html‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@
3333
<script src="https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/libs/draco/draco_encoder.min.js" defer></script>
3434

3535
<script>
36-
var THREE, fflate, manager, rgbe_loader, amf_loader, amf_obj;
37-
var texture_loader, exr_loader, rgbe_loader, hdrJPGLoader;
36+
var THREE, fflate, amf_loader, amf_obj, ktx2_loader, rgbe_loader;
37+
var manager, texture_loader, exr_loader, rgbe_loader, hdrJPGLoader;
3838
var renderer, scene, camera, render_requested, edges, edges_visible;
3939
var gui, gui_set = false, guiExposure = null, count = 0;
4040
var controls, gizmo, params, toneMappingOptions;
@@ -331,7 +331,7 @@
331331
<button title="URL of the remote 3D model" id="btn_url" onclick="show_url();" style="background-color: transparent; min-width: 34px;">URL</button>
332332
<input type="file" title="Browse Local Files" id="file_input" onchange="init();" accept=".amf" />
333333
<label for="file_image_input" title="Background Image" style="color: #553801;">BGND</label>
334-
<input type="file" title="Background Image" id="file_image_input" accept=".exr, .hdr, image/png, image/jpeg, image/bmp, image/gif, image/svg+xml, image/webp" onchange="set_scene_image();" disabled />
334+
<input type="file" title="Background Image" id="file_image_input" accept=".exr, .hdr, .ktx2, image/png, image/jpeg, image/bmp, image/gif, image/svg+xml, image/webp" onchange="set_scene_image();" disabled />
335335
<button title="Toggle Equirectangular Background" id="btn_equi" onclick="set_equi();" style="background-color: transparent; color: blue; min-width: 25px;" disabled>Eq</button>
336336
<button title="Toggle Gradient Color Background" id="btn_bgnd_linear_gradient" onclick="set_bgnd_linear_gradient();" style="background-color: transparent; color: blue;" disabled>G</button>
337337
<button title="Model Opacity - double click to enable/disable" id="btn_dc_opacity" class="dropdown" style="text-align: center; border: 1px solid blue; -webkit-border-radius: 3px; border-radius: 3px;" ondblclick="set_opacity();" onclick="show_hide_dropdown_opacity();">O
@@ -1602,7 +1602,7 @@
16021602

16031603
let fn_uc = fii.name.toUpperCase();
16041604

1605-
if (fii.type.startsWith('image/') && ! (fn_uc.endsWith('.SVG') || fn_uc.endsWith('.EXR') || fn_uc.endsWith('.HDR'))) {
1605+
if (fii.type.startsWith('image/') && ! (fn_uc.endsWith('.SVG') || fn_uc.endsWith('.KTX2') || fn_uc.endsWith('.EXR') || fn_uc.endsWith('.HDR'))) {
16061606
hdrJPGLoader.load( URL.createObjectURL( fii ) , async function( texture ) {
16071607
URL.revokeObjectURL( fii );
16081608

@@ -1641,8 +1641,10 @@
16411641

16421642
URL.revokeObjectURL( fii );
16431643
});
1644-
} else if (fn_uc.endsWith('.SVG')) {
1645-
texture_loader.load( URL.createObjectURL( fii ) , function( texture ) {
1644+
} else if (fn_uc.endsWith('.KTX2') || fn_uc.endsWith('.SVG')) {
1645+
let loader = fn_uc.endsWith('.KTX2') ? ktx2_loader : texture_loader;
1646+
1647+
loader.load( URL.createObjectURL( fii ) , function( texture ) {
16461648
URL.revokeObjectURL( fii );
16471649

16481650
if (equi_enabled === true) {
@@ -2112,6 +2114,15 @@
21122114
renderer.autoClear = false;
21132115

21142116
document.body.appendChild( renderer.domElement );
2117+
2118+
if (ktx2_loader === undefined) {
2119+
const { KTX2Loader } = await import( 'three/addons/loaders/KTX2Loader.min.js' );
2120+
2121+
ktx2_loader = new KTX2Loader( manager );
2122+
ktx2_loader.setTranscoderPath( 'https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/libs/basis/' );
2123+
ktx2_loader.detectSupport( renderer );
2124+
manager.addHandler( /\.ktx2$/i, ktx2_loader );
2125+
}
21152126
}
21162127

21172128
if (hdrJPGLoader === undefined) {

‎viewers/templates/ASSIMP Viewer.html‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,10 @@
3838
<script src="https://cdn.jsdelivr.net/npm/pcx-js@1.1.0/js/pcx.min.js"></script>
3939

4040
<script>
41-
var THREE, g_loader, ktx2_loader, texture_loader, gltf_loader, draco_loader, tga_loader, dds_loader, exr_loader, rgbe_loader, hdrJPGLoader;
42-
var fflate, vrm, vrm_registered = false, current_vrm, manager, renderer, parser, scene, scenes, default_camera, camera, cameras, cam_id;
41+
var THREE, g_loader, gltf_loader, draco_loader, texture_loader, ktx2_loader;
42+
var tga_loader, dds_loader, exr_loader, rgbe_loader, hdrJPGLoader;
43+
var fflate, vrm, vrm_registered = false, current_vrm, manager, renderer;
44+
var parser, scene, scenes, default_camera, camera, cameras, cam_id;
4345
var controls, gizmo, grid, polar_grid, grid_visible, polar_grid_visible, object_is_points;
4446
var animations, animation_mixer, current_animation, extras, current_extra, clock, outline_material;
4547
var gltf_obj, gltfVideoTextureExtension, assimp_load, current_side, resource_path, edges, edges_visible;
@@ -366,7 +368,7 @@
366368
<input type="file" title="Browse Local Files" id="file_input" onchange="init();" accept=".3d, .3ds, .3mf, .a3d, .ac, .ac3d, .acc, .amf, .amj, .ase, .ask, .b3d, .bin, .blend, .bvh, .bsp, .cob, .csm, .dae, .drc, .dxf, .enff, .fbx, .gltf, .glb, .glsl, .hmp, .ifc, .ifczip, .iqm, .irr, .irrmesh, .jt, .kmz, .lwo, .lws, .lxo, .m3, .material, .md2, .md3, .md5anim, .md5camera, .md5mesh, .mdc, .mdl, .mesh, .ms3d, .mtl, .ndo, .nff, .obj, .off, .ogex, .pk3, .ply, .pmx, .prj, .q3o, .q3s, .raw, .scn, .sib, .skeleton, .smd, .stl, .step, .stp, .ter, .uc, .vrm, .wrl, .x, .x3d, .xgl, .xml, .zae, .zgl, .dib, .dds, .ktx2, .pcx, .tga, image/png, image/jpeg, image/bmp, image/gif, image/svg+xml, image/webp" multiple />
367369
<button title="Y-Flip DDS Textures if present. This will reset the model when loaded." id="btn_dds_flip" onclick="set_dds_flip();" style="background-color: lightgreen; color: blue;">f</button>
368370
<label for="file_image_input" title="Background Image" style="color: #553801;">BGND</label>
369-
<input type="file" title="Background Image" id="file_image_input" accept=".exr, .hdr, image/png, image/jpeg, image/bmp, image/gif, image/svg+xml, image/webp" onchange="set_scene_image();" disabled />
371+
<input type="file" title="Background Image" id="file_image_input" accept=".exr, .hdr, .ktx2, image/png, image/jpeg, image/bmp, image/gif, image/svg+xml, image/webp" onchange="set_scene_image();" disabled />
370372
<button title="Toggle Equirectangular Background" id="btn_equi" onclick="set_equi();" style="background-color: transparent; color: blue; min-width: 25px;" disabled>Eq</button>
371373
<button title="Toggle Gradient Color Background" id="btn_bgnd_linear_gradient" onclick="set_bgnd_linear_gradient();" style="background-color: transparent; color: blue;" disabled>G</button>
372374
<button title="Model Opacity - double click to enable/disable" id="btn_dc_opacity" class="dropdown" style="text-align: center; border: 1px solid blue; -webkit-border-radius: 3px; border-radius: 3px;" ondblclick="set_opacity();" onclick="show_hide_dropdown_opacity();">O
@@ -1870,7 +1872,7 @@
18701872

18711873
let fn_uc = fii.name.toUpperCase();
18721874

1873-
if (fii.type.startsWith('image/') && ! (fn_uc.endsWith('.SVG') || fn_uc.endsWith('.EXR') || fn_uc.endsWith('.HDR'))) {
1875+
if (fii.type.startsWith('image/') && ! (fn_uc.endsWith('.SVG') || fn_uc.endsWith('.KTX2') || fn_uc.endsWith('.EXR') || fn_uc.endsWith('.HDR'))) {
18741876
hdrJPGLoader.load( URL.createObjectURL( fii ) , async function( texture ) {
18751877
URL.revokeObjectURL( fii );
18761878

@@ -1909,8 +1911,10 @@
19091911

19101912
URL.revokeObjectURL( fii );
19111913
});
1912-
} else if (fn_uc.endsWith('.SVG')) {
1913-
texture_loader.load( URL.createObjectURL( fii ) , function( texture ) {
1914+
} else if (fn_uc.endsWith('.KTX2') || fn_uc.endsWith('.SVG')) {
1915+
let loader = fn_uc.endsWith('.KTX2') ? ktx2_loader : texture_loader;
1916+
1917+
loader.load( URL.createObjectURL( fii ) , function( texture ) {
19141918
URL.revokeObjectURL( fii );
19151919

19161920
if (equi_enabled === true) {

0 commit comments

Comments
 (0)