Merge pull request #216 from yashschandra/main

MrForExample · web-flow · commit 66ea8b26a2e8 · 2024-07-15T18:05:54.000-06:00
download button added
diff --git a/.gitignore b/.gitignore
@@ -163,9 +163,11 @@ cython_debug/
 outputs/
 
 # Ignore folders only used for build dependencies
-_Pre_Builds/_Build_Dependencies 
+_Pre_Builds/_Build_Dependencies
 _Pre_Builds/_Build_Wheels
 _Pre_Builds/_Libs
 
 models/
-output/
+output/
+
+.idea
diff --git a/web/html/threeVisualizer.html b/web/html/threeVisualizer.html
@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="/extensions/ComfyUI-3D-Pack/style/sharedStyle.css">
 	</head>
 
-	<body>		
+	<body>
 		<div id="progress-container">
 			<dialog open id="progress-dialog">
 				<p>
@@ -48,6 +48,7 @@
 				]
 			});
 		</script>
+		<button type="button" id="download-button">Download</button>
 		<input type="text" id="color-picker" class="coloris" value="rgb(128, 128, 128)"></input>
 	</body>
 
diff --git a/web/js/threeVisualizer.js b/web/js/threeVisualizer.js
@@ -15,6 +15,7 @@ const container = document.getElementById( 'container' );
 const progressDialog = document.getElementById("progress-dialog");
 const progressIndicator = document.getElementById("progress-indicator");
 const colorPicker = document.getElementById("color-picker");
+const downloadButton = document.getElementById("download-button");
 
 const renderer = new THREE.WebGLRenderer( { antialias: true } );
 renderer.setPixelRatio( window.devicePixelRatio );
@@ -56,9 +57,14 @@ const clock = new THREE.Clock();
 var lastTimestamp = "";
 var needUpdate = false;
 let mixer;
+let currentURL;
+
+downloadButton.addEventListener('click', e => {
+    window.open(currentURL, '_blank');
+});
 
 function frameUpdate() {
-    
+
     var filepath = visualizer.getAttribute("filepath");
     var timestamp = visualizer.getAttribute("timestamp");
     if (timestamp == lastTimestamp){
@@ -100,12 +106,12 @@ async function main(filepath="") {
     if (/^.+\.[a-zA-Z]+$/.test(filepath)){
 
         let params = {"filepath": filepath};
-        const url = api.apiURL('/viewfile?' + new URLSearchParams(params));
+        currentURL = api.apiURL('/viewfile?' + new URLSearchParams(params));
 
         var filepathSplit = filepath.split('.');
         var fileExt = filepathSplit.pop().toLowerCase();
-        var filepathNoExt = filepathSplit.join("."); 
-        
+        var filepathNoExt = filepathSplit.join(".");
+
         if (fileExt == "obj"){
             const loader = new OBJLoader();
 
@@ -118,16 +124,16 @@ async function main(filepath="") {
                 mtl.preload();
                 loader.setMaterials( mtl );
             }, onProgress, onError );
-                
-            loader.load( url, function ( obj ) {
+
+            loader.load( currentURL, function ( obj ) {
                 obj.scale.setScalar( 5 );
                 scene.add( obj );
                 obj.traverse(node => {
                     if (node.material && node.material.map == null) {
                         node.material.vertexColors = true;
                     }
                   });
-                
+
             }, onProgress, onError );
 
         } else if (fileExt == "glb") {
@@ -136,7 +142,7 @@ async function main(filepath="") {
             const loader = new GLTFLoader();
             loader.setDRACOLoader( dracoLoader );
 
-            loader.load( url, function ( gltf ) {
+            loader.load( currentURL, function ( gltf ) {
                 const model = gltf.scene;
                 //model.position.set( 1, 1, 0 );
                 model.scale.set( 3, 3, 3 );
@@ -146,7 +152,7 @@ async function main(filepath="") {
                 gltf.animations.forEach((clip) => {
                     mixer.clipAction(clip).play();
                 });
-            
+
             }, onProgress, onError );
 
         } else if (fileExt == "ply") {
diff --git a/web/style/sharedStyle.css b/web/style/sharedStyle.css
@@ -63,4 +63,12 @@ progress::-moz-progress-bar {
     height: 24px;
     border: 2px solid #aaa;
     border-radius: 5px;
-}
+}
+
+#download-button {
+    margin-left: 5px;
+    margin-top: 10px;
+    position: absolute;
+    z-index: 10;
+    left: 180px;
+}
