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

Commit 1d78959

Browse files
GitHubDragonFlyGitHubDragonFly
authored
Update multiple viewers
1 parent f7ea7a4 commit 1d78959

14 files changed

+549
-89
lines changed

‎viewers/templates/3DM Viewer.html‎

Lines changed: 38 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535

3636
<script>
3737
var THREE, manager, rhino_loader, rhino_obj, object_is_mesh, object_is_points;
38-
var ktx2_loader, hdrJPGLoader, texture_loader, exr_loader, rgbe_loader;
38+
var ktx2_loader, hdrJPGLoader, texture_loader, exr_loader, rgbe_loader, bg_flip;
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;
@@ -344,6 +344,7 @@
344344
<input type="file" title="Browse Local Files" id="file_input" onchange="init();" accept=".3dm, image/png, image/jpeg, image/bmp, image/gif, image/svg+xml, image/webp" multiple />
345345
<label for="file_image_input" title="Background Image" style="color: #553801;">BGND</label>
346346
<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 />
347+
<button title="Set Background Image Y-Flip" id="btn_bg_flip" onclick="set_bg_flip();" style="background-color: transparent; color: blue;" disabled>Y</button>
347348
<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>
348349
<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
349350
<div id="dc_opacity" class="dropdown-content" style="display: none;" onfocusout="if (enable_opacity === true) hide_dropdown_opacity();">
@@ -646,6 +647,22 @@
646647

647648
function return_false() { return false; }
648649

650+
function set_bg_flip() {
651+
if (bg_flip === false) {
652+
bg_flip = true;
653+
document.getElementById('btn_bg_flip').style.backgroundColor = 'lightgreen';
654+
} else {
655+
bg_flip = false;
656+
document.getElementById('btn_bg_flip').style.backgroundColor = 'transparent';
657+
}
658+
659+
if (document.getElementById('file_image_input').value) {
660+
scene.background.dispose();
661+
scene.background = null;
662+
set_scene_image();
663+
}
664+
}
665+
649666
function set_gui_position() {
650667
if (menu_location_bottom === false) {
651668
let fixed_menu_bottom = ( parseInt( $('#fixed_menu').outerHeight( true ) ) + 2 ).toString() + 'px';
@@ -1809,6 +1826,8 @@
18091826
hdrJpgEquirectangularMap.repeat.set( repeat_x, repeat_y );
18101827
}
18111828

1829+
hdrJpgEquirectangularMap.flipY = (bg_flip === true);
1830+
18121831
hdrJpgEquirectangularMap.needsUpdate = true;
18131832

18141833
if (document.getElementById('equi').checked) {
@@ -1853,7 +1872,7 @@
18531872
texture_loader.load( canvas_tex.image.toDataURL( 'image/png', 1 ), function( png_tex ) {
18541873
canvas_tex.dispose();
18551874

1856-
png_tex.flipY = false;
1875+
png_tex.flipY = (bg_flip === false);
18571876

18581877
if (document.getElementById('equi').checked) {
18591878
png_tex.mapping = THREE.EquirectangularReflectionMapping;
@@ -1871,13 +1890,18 @@
18711890
});
18721891
}, function ( xhr ) { // onProgress
18731892
}, function ( error ) { // onError
1874-
URL.revokeObjectURL( fi.files[ i ] );
1875-
handle_error( error );
1893+
document.getElementById('div_message').innerText = 'Error loading image';
1894+
console.log( 'Error loading Background Image File!' );
1895+
console.log( error );
1896+
1897+
URL.revokeObjectURL( fii );
18761898
});
18771899
} else if (fn_uc.endsWith('.SVG')) {
18781900
texture_loader.load( URL.createObjectURL( fii ) , function( texture ) {
18791901
URL.revokeObjectURL( fii );
18801902

1903+
texture.flipY = (bg_flip === false);
1904+
18811905
if (document.getElementById('equi').checked) {
18821906
texture.mapping = THREE.EquirectangularReflectionMapping;
18831907
scene.background = texture.clone();
@@ -1991,6 +2015,8 @@
19912015
hdrJpgEquirectangularMap.repeat.set( repeat_x, repeat_y );
19922016
}
19932017

2018+
hdrJpgEquirectangularMap.flipY = (bg_flip === true);
2019+
19942020
hdrJpgEquirectangularMap.needsUpdate = true;
19952021

19962022
if (document.getElementById('equi').checked) {
@@ -2415,7 +2441,11 @@
24152441
hdrJPGLoader = new HDRJPGLoader( renderer );
24162442
}
24172443

2418-
if (scene === undefined) scene = new THREE.Scene();
2444+
if (scene === undefined) {
2445+
scene = new THREE.Scene();
2446+
scene.backgroundRotation = new THREE.Euler( 0, Math.PI / 2.0, 0, 'XYZ' );
2447+
scene.environmentRotation = new THREE.Euler( 0, Math.PI / 2.0, 0, 'XYZ' );
2448+
}
24192449

24202450
scene.backgroundBlurriness = 0.00001;
24212451
scene.backgroundIntensity = 1.0;
@@ -4013,6 +4043,8 @@
40134043
bgnd_linear_gradient = false;
40144044
document.getElementById('btn_bgnd_linear_gradient').disabled = false;
40154045
document.getElementById('btn_bgnd_linear_gradient').style.backgroundColor = 'transparent';
4046+
bg_flip = false;
4047+
document.getElementById('btn_bg_flip').style.backgroundColor = 'transparent';
40164048
vertex_colors_enabled = false;
40174049
document.getElementById('btn_vertex_colors').style.backgroundColor = '#d1cefc';
40184050
random_vertex_colors_enabled = false;
@@ -4178,6 +4210,7 @@
41784210
document.getElementById('btn_dc_z').disabled = disable;
41794211
document.getElementById('btn_dc_ali').disabled = disable;
41804212
document.getElementById('btn_dc_dli').disabled = disable;
4213+
document.getElementById('btn_bg_flip').disabled = disable;
41814214
document.getElementById('btn_quick_x').disabled = disable;
41824215
document.getElementById('btn_wireframe').disabled = disable;
41834216
document.getElementById('btn_dc_opacity').disabled = disable;

‎viewers/templates/3DS Viewer.html‎

Lines changed: 38 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535

3636
<script>
3737
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;
38+
var manager, renderer, scene, camera, tds_obj, render_requested, edges, edges_visible, isMobile, bg_flip;
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;
@@ -335,6 +335,7 @@
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>
337337
<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 />
338+
<button title="Set Background Image Y-Flip" id="btn_bg_flip" onclick="set_bg_flip();" style="background-color: transparent; color: blue;" disabled>Y</button>
338339
<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>
339340
<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
340341
<div id="dc_opacity" class="dropdown-content" style="display: none;" onfocusout="if (enable_opacity === true) hide_dropdown_opacity();">
@@ -647,6 +648,22 @@
647648

648649
function return_false() { return false; }
649650

651+
function set_bg_flip() {
652+
if (bg_flip === false) {
653+
bg_flip = true;
654+
document.getElementById('btn_bg_flip').style.backgroundColor = 'lightgreen';
655+
} else {
656+
bg_flip = false;
657+
document.getElementById('btn_bg_flip').style.backgroundColor = 'transparent';
658+
}
659+
660+
if (document.getElementById('file_image_input').value) {
661+
scene.background.dispose();
662+
scene.background = null;
663+
set_scene_image();
664+
}
665+
}
666+
650667
function set_gui_position() {
651668
if (menu_location_bottom === false) {
652669
let fixed_menu_bottom = ( parseInt( $('#fixed_menu').outerHeight( true ) ) + 2 ).toString() + 'px';
@@ -1740,6 +1757,8 @@
17401757
hdrJpgEquirectangularMap.repeat.set( repeat_x, repeat_y );
17411758
}
17421759

1760+
hdrJpgEquirectangularMap.flipY = (bg_flip === true);
1761+
17431762
hdrJpgEquirectangularMap.needsUpdate = true;
17441763

17451764
if (document.getElementById('equi').checked) {
@@ -1784,7 +1803,7 @@
17841803
texture_loader.load( canvas_tex.image.toDataURL( 'image/png', 1 ), function( png_tex ) {
17851804
canvas_tex.dispose();
17861805

1787-
png_tex.flipY = false;
1806+
png_tex.flipY = (bg_flip === false);
17881807

17891808
if (document.getElementById('equi').checked) {
17901809
png_tex.mapping = THREE.EquirectangularReflectionMapping;
@@ -1802,13 +1821,18 @@
18021821
});
18031822
}, function ( xhr ) { // onProgress
18041823
}, function ( error ) { // onError
1805-
URL.revokeObjectURL( fi.files[ i ] );
1806-
handle_error( error );
1824+
document.getElementById('div_message').innerText = 'Error loading image';
1825+
console.log( 'Error loading Background Image File!' );
1826+
console.log( error );
1827+
1828+
URL.revokeObjectURL( fii );
18071829
});
18081830
} else if (fn_uc.endsWith('.SVG')) {
18091831
texture_loader.load( URL.createObjectURL( fii ) , function( texture ) {
18101832
URL.revokeObjectURL( fii );
18111833

1834+
texture.flipY = (bg_flip === false);
1835+
18121836
if (document.getElementById('equi').checked) {
18131837
texture.mapping = THREE.EquirectangularReflectionMapping;
18141838
scene.background = texture.clone();
@@ -1922,6 +1946,8 @@
19221946
hdrJpgEquirectangularMap.repeat.set( repeat_x, repeat_y );
19231947
}
19241948

1949+
hdrJpgEquirectangularMap.flipY = (bg_flip === true);
1950+
19251951
hdrJpgEquirectangularMap.needsUpdate = true;
19261952

19271953
if (document.getElementById('equi').checked) {
@@ -2376,7 +2402,11 @@
23762402
hdrJPGLoader = new HDRJPGLoader( renderer );
23772403
}
23782404

2379-
if (scene === undefined) scene = new THREE.Scene();
2405+
if (scene === undefined) {
2406+
scene = new THREE.Scene();
2407+
scene.backgroundRotation = new THREE.Euler( 0, Math.PI / 2.0, 0, 'XYZ' );
2408+
scene.environmentRotation = new THREE.Euler( 0, Math.PI / 2.0, 0, 'XYZ' );
2409+
}
23802410

23812411
scene.backgroundBlurriness = 0.00001;
23822412
scene.backgroundIntensity = 1.1;
@@ -3645,6 +3675,8 @@
36453675
bgnd_linear_gradient = false;
36463676
document.getElementById('btn_bgnd_linear_gradient').disabled = false;
36473677
document.getElementById('btn_bgnd_linear_gradient').style.backgroundColor = 'transparent';
3678+
bg_flip = false;
3679+
document.getElementById('btn_bg_flip').style.backgroundColor = 'transparent';
36483680
vertex_colors_enabled = false;
36493681
document.getElementById('btn_vertex_colors').style.backgroundColor = '#d1cefc';
36503682
random_vertex_colors_enabled = false;
@@ -3802,6 +3834,7 @@
38023834
document.getElementById('btn_dc_z').disabled = disable;
38033835
document.getElementById('btn_dc_ali').disabled = disable;
38043836
document.getElementById('btn_dc_dli').disabled = disable;
3837+
document.getElementById('btn_bg_flip').disabled = disable;
38053838
document.getElementById('btn_dc_opacity').disabled = disable;
38063839
document.getElementById('btn_mtl_side').disabled = disable;
38073840
document.getElementById('btn_vertex_colors').disabled = disable;

‎viewers/templates/3MF Viewer.html‎

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@
3535

3636
<script>
3737
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;
38+
var manager, renderer, scene, camera, render_requested, edges, edges_visible, flat_shading_enabled, bg_flip;
3939
var controls, gizmo, gui, gui_set = false, guiExposure = null, params, toneMappingOptions;
40-
var grid, polar_grid, grid_visible, polar_grid_visible, link, isMobile;
40+
var grid, polar_grid, grid_visible, polar_grid_visible, link, isMobile, count = 0;
4141
var mouse_down, mouse_wheel, reset_rotation, events_initialized;
4242
var texture_maps, tex_res, tex_flip, tex_fmt, outline_material;
4343
var ambientLight, hemisphereLight, directionalLight;
@@ -335,6 +335,7 @@
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>
337337
<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 />
338+
<button title="Set Background Image Y-Flip" id="btn_bg_flip" onclick="set_bg_flip();" style="background-color: transparent; color: blue;" disabled>Y</button>
338339
<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>
339340
<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
340341
<div id="dc_opacity" class="dropdown-content" style="display: none;" onfocusout="if (enable_opacity === true) hide_dropdown_opacity();">
@@ -646,6 +647,22 @@
646647

647648
function return_false() { return false; }
648649

650+
function set_bg_flip() {
651+
if (bg_flip === false) {
652+
bg_flip = true;
653+
document.getElementById('btn_bg_flip').style.backgroundColor = 'lightgreen';
654+
} else {
655+
bg_flip = false;
656+
document.getElementById('btn_bg_flip').style.backgroundColor = 'transparent';
657+
}
658+
659+
if (document.getElementById('file_image_input').value) {
660+
scene.background.dispose();
661+
scene.background = null;
662+
set_scene_image();
663+
}
664+
}
665+
649666
function set_gui_position() {
650667
if (menu_location_bottom === false) {
651668
let fixed_menu_bottom = ( parseInt( $('#fixed_menu').outerHeight( true ) ) + 2 ).toString() + 'px';
@@ -1773,6 +1790,8 @@
17731790
hdrJpgEquirectangularMap.repeat.set( repeat_x, repeat_y );
17741791
}
17751792

1793+
hdrJpgEquirectangularMap.flipY = (bg_flip === true);
1794+
17761795
hdrJpgEquirectangularMap.needsUpdate = true;
17771796

17781797
if (document.getElementById('equi').checked) {
@@ -1817,7 +1836,7 @@
18171836
texture_loader.load( canvas_tex.image.toDataURL( 'image/png', 1 ), function( png_tex ) {
18181837
canvas_tex.dispose();
18191838

1820-
png_tex.flipY = false;
1839+
png_tex.flipY = (bg_flip === false);
18211840

18221841
if (document.getElementById('equi').checked) {
18231842
png_tex.mapping = THREE.EquirectangularReflectionMapping;
@@ -1835,13 +1854,18 @@
18351854
});
18361855
}, function ( xhr ) { // onProgress
18371856
}, function ( error ) { // onError
1838-
URL.revokeObjectURL( fi.files[ i ] );
1839-
handle_error( error );
1857+
document.getElementById('div_message').innerText = 'Error loading image';
1858+
console.log( 'Error loading Background Image File!' );
1859+
console.log( error );
1860+
1861+
URL.revokeObjectURL( fii );
18401862
});
18411863
} else if (fn_uc.endsWith('.SVG')) {
18421864
texture_loader.load( URL.createObjectURL( fii ) , function( texture ) {
18431865
URL.revokeObjectURL( fii );
18441866

1867+
texture.flipY = (bg_flip === false);
1868+
18451869
if (document.getElementById('equi').checked) {
18461870
texture.mapping = THREE.EquirectangularReflectionMapping;
18471871
scene.background = texture.clone();
@@ -1955,6 +1979,8 @@
19551979
hdrJpgEquirectangularMap.repeat.set( repeat_x, repeat_y );
19561980
}
19571981

1982+
hdrJpgEquirectangularMap.flipY = (bg_flip === true);
1983+
19581984
hdrJpgEquirectangularMap.needsUpdate = true;
19591985

19601986
if (document.getElementById('equi').checked) {
@@ -2351,7 +2377,11 @@
23512377
hdrJPGLoader = new HDRJPGLoader( renderer );
23522378
}
23532379

2354-
if (scene === undefined) scene = new THREE.Scene();
2380+
if (scene === undefined) {
2381+
scene = new THREE.Scene();
2382+
scene.backgroundRotation = new THREE.Euler( 0, Math.PI / 2.0, 0, 'XYZ' );
2383+
scene.environmentRotation = new THREE.Euler( 0, Math.PI / 2.0, 0, 'XYZ' );
2384+
}
23552385

23562386
scene.backgroundBlurriness = 0.00001;
23572387
scene.backgroundIntensity = 1.1;
@@ -3446,6 +3476,8 @@
34463476
bgnd_linear_gradient = false;
34473477
document.getElementById('btn_bgnd_linear_gradient').disabled = false;
34483478
document.getElementById('btn_bgnd_linear_gradient').style.backgroundColor = 'transparent';
3479+
bg_flip = false;
3480+
document.getElementById('btn_bg_flip').style.backgroundColor = 'transparent';
34493481
vertex_colors_enabled = false;
34503482
document.getElementById('btn_vertex_colors').style.backgroundColor = '#d1cefc';
34513483
random_vertex_colors_enabled = false;
@@ -3602,6 +3634,7 @@
36023634
document.getElementById('btn_dc_z').disabled = disable;
36033635
document.getElementById('btn_dc_ali').disabled = disable;
36043636
document.getElementById('btn_dc_dli').disabled = disable;
3637+
document.getElementById('btn_bg_flip').disabled = disable;
36053638
document.getElementById('btn_dc_opacity').disabled = disable;
36063639
document.getElementById('btn_vertex_colors').disabled = disable;
36073640
document.getElementById('btn_bgnd_linear_gradient').disabled = disable;

0 commit comments

Comments
 (0)