depth viewer

shadowcz007 · Sep 18, 2024 · 078aaeb · 078aaeb
1 parent d9edbd5
commit 078aaeb
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 15 deletions.
diff --git a/web/javascript/visualization.js b/web/javascript/visualization.js
@@ -41,6 +41,9 @@ class Visualizer {
       overflow: 'hidden'
     })
     this.iframe.src = '/mixlab/app/' + visualSrc + '.html'
+    // this.iframe.width="300";
+    // this.iframe.height="400";
+
     console.log('#Visualizer', container, this.iframe)
     container.appendChild(this.iframe)
   }
@@ -73,7 +76,7 @@ function createVisualizer (node, inputName, typeName, inputData, app) {
     draw: function (ctx, node, widgetWidth, widgetY, widgetHeight) {
       const margin = 10
       const top_offset = 5
-      const visible = app.canvas.ds.scale > 0.5 && this.type === typeName
+      const visible = app.canvas.ds.scale > 0.3 && this.type === typeName
       const w = widgetWidth - margin * 4
       const clientRectBound = ctx.canvas.getBoundingClientRect()
       const transform = new DOMMatrix()
@@ -85,12 +88,13 @@ function createVisualizer (node, inputName, typeName, inputData, app) {
         .translateSelf(margin, margin + widgetY)
 
       Object.assign(this.visualizer.style, {
-        left: `${transform.a * margin + transform.e + 40}px`,
+        left: `${transform.a * margin + transform.e + 0}px`,
         top: `${transform.d + transform.f + top_offset}px`,
         width: `${w * transform.a}px`,
-        height: `${
-          w * transform.d - widgetHeight - margin * 15 * transform.d
-        }px`,
+        height: `${(w * transform.a * 4) / 3 - margin * 5 * transform.d}px`,
+        // height: `${
+        //   w * transform.d - widgetHeight - margin * 15 * transform.d
+        // }px`,
         position: 'absolute',
         overflow: 'hidden',
         zIndex: app.graph._nodes.indexOf(node)
@@ -137,11 +141,11 @@ function createVisualizer (node, inputName, typeName, inputData, app) {
   // Make sure visualization iframe is always inside the node when resize the node
   node.onResize = function () {
     let [w, h] = this.size
-    if (w <= 600) w = 600
-    if (h <= 500) h = 500
+    if (w <= 300) w = 300
+    if (h <= 400) h = 400
 
-    if (w > 600) {
-      h = w - 100
+    if (w > 300) {
+      h = Math.round((w * 4) / 3)
     }
 
     this.size = [w, h]
@@ -181,14 +185,14 @@ function registerVisualizer (nodeType, nodeData, nodeClassName, typeName) {
         app
       ])
 
-      this.setSize([600, 500])
+      this.setSize([300, 400])
 
       return r
     }
 
     nodeType.prototype.onExecuted = async function (message) {
       // Check if reference image and depth map are available
-      console.log("#message",message)
+      console.log('#message', message)
       if (message.reference_image && message.depth_map) {
         const params = {}
         params.reference_image = message.reference_image[0]

diff --git a/webApp/custom.html b/webApp/custom.html
@@ -2026,8 +2026,8 @@ <h4>蒙版绘制工具 </h4>
             var iframe = document.createElement('iframe')
             iframe.src = "https://mememagic-editor.vercel.app/"
             iframe.setAttribute('frameborder', '0')
-            iframe.setAttribute('width', '500')
-            iframe.setAttribute('height', '700')
+            iframe.setAttribute('width', '700')
+            iframe.setAttribute('height', '720')
             iframe.setAttribute('allow',"clipboard-read; clipboard-write")
 
 

diff --git a/webApp/lib/threeVisualizer.js b/webApp/lib/threeVisualizer.js
@@ -237,8 +237,11 @@ const sleep = (t = 1000) => {
 // 方法：旋转摄像机并拍摄图片 // 每次旋转的角度增量，转换为弧度
 async function captureImages (
   totalFrames = 20,
-  angleIncrement = THREE.MathUtils.degToRad(1.5)
+  angleIncrement = 1.5,
+  scaleFactor = 1 // 添加放大倍数参数，默认为1
 ) {
+  angleIncrement = THREE.MathUtils.degToRad(angleIncrement)
+
   // 计算场景中所有物体的中心点
   const box = new THREE.Box3().setFromObject(scene)
   const center = new THREE.Vector3()
@@ -264,6 +267,21 @@ async function captureImages (
   const startAngle = initialAngle
   //  - (angleIncrement * totalFrames) / 2
 
+  // 保存原始尺寸
+  const originalWidth = renderer.domElement.width
+  const originalHeight = renderer.domElement.height
+
+  // 调整渲染器尺寸
+  renderer.setSize(
+    originalWidth * scaleFactor,
+    originalHeight * scaleFactor,
+    false
+  )
+
+  // 调整相机的视图矩阵（如果需要）
+  camera.aspect = (originalWidth * scaleFactor) / (originalHeight * scaleFactor)
+  camera.updateProjectionMatrix()
+
   for (let i = 0; i < totalFrames; i++) {
     const angle = startAngle + i * angleIncrement
 
@@ -284,6 +302,13 @@ async function captureImages (
     await new Promise(resolve => setTimeout(resolve, 500))
   }
 
+  // 恢复渲染器尺寸
+  renderer.setSize(originalWidth, originalHeight, false)
+
+  // 恢复相机的视图矩阵
+  camera.aspect = originalWidth / originalHeight
+  camera.updateProjectionMatrix()
+
   // 恢复相机到初始位置和朝向
   camera.position.copy(initialPosition)
   camera.lookAt(initialTarget)
@@ -294,7 +319,7 @@ async function captureImages (
 async function takeScreenshot () {
   // 更新相机的矩阵，以确保其世界矩阵是最新的
   camera.updateMatrixWorld()
-  const imgs = await captureImages()
+  const imgs = await captureImages(12,3,4)
 
   // 获取当前网页的 URL
   const currentUrl = window.location.href