From f458835183aaa183ab71b6195a67a9648fb24edc Mon Sep 17 00:00:00 2001
From: chenqi <chen.qi@jin-group.cn>
Date: Mon, 8 Jun 2026 12:11:46 +0800
Subject: [PATCH] =?UTF-8?q?fix(viewer):=20=E4=BF=AE=E5=A4=8D3D=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E5=99=A8=E5=88=9D=E5=A7=8B=E5=8C=96=E5=92=8C=E7=BA=B9?=
 =?UTF-8?q?=E7=90=86=E9=85=8D=E7=BD=AE=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将体积纹理从DataTexture改为Data3DTexture以支持三维数据
- 分别设置纹理格式和类型属性避免构造函数参数错误
- 使用ResizeObserver替代nextTick和setTimeout实现容器尺寸检测
- 添加最小高度约束确保渲染器正确初始化
- 优化样式定义增强组件布局稳定性
---
 .../src/views/reconstruction/3d/viewer.vue    | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/healthlink-his-ui/src/views/reconstruction/3d/viewer.vue b/healthlink-his-ui/src/views/reconstruction/3d/viewer.vue
index bc831f1d5..96c0f39df 100644
--- a/healthlink-his-ui/src/views/reconstruction/3d/viewer.vue
+++ b/healthlink-his-ui/src/views/reconstruction/3d/viewer.vue
@@ -230,7 +230,9 @@ function init(){
   
   // Generate volume
   const volData=genVolume()
-  const volTex=new THREE.DataTexture(volData,SZ,SZ,SZ,THREE.RedFormat,THREE.FloatType)
+  const volTex=new THREE.Data3DTexture(volData,SZ,SZ,SZ)
+  volTex.format=THREE.RedFormat
+  volTex.type=THREE.FloatType
   volTex.needsUpdate=true
   volTex.minFilter=THREE.LinearFilter
   volTex.magFilter=THREE.LinearFilter
@@ -321,9 +323,19 @@ watch(mode,(val)=>{
 })
 
 onMounted(()=>{
-  nextTick(()=>{
-    setTimeout(init,100)
+  // Use ResizeObserver to init only when container has dimensions
+  const el=containerRef.value
+  if(!el)return
+  const ro=new ResizeObserver(entries=>{
+    for(const e of entries){
+      if(e.contentRect.width>0&&e.contentRect.height>0&&!renderer){
+        init()
+        ro.disconnect()
+        break
+      }
+    }
   })
+  ro.observe(el)
   window.addEventListener('resize',onResize)
 })
 
@@ -336,9 +348,9 @@ onUnmounted(()=>{
 </script>
 
 <style scoped>
-.viewer-wrap{display:flex;flex-direction:column;height:100%;background:#0a0a1a;color:#fff}
+.viewer-wrap{display:flex;flex-direction:column;min-height:600px;height:100%;background:#0a0a1a;color:#fff}
 .vbar{display:flex;gap:8px;padding:8px 12px;background:#1a1a2e;border-bottom:1px solid #333;align-items:center;flex-wrap:wrap}
-.vmain{flex:1;position:relative;overflow:hidden;background:#0a0a1a}
+.vmain{flex:1;position:relative;overflow:hidden;background:#0a0a1a;min-height:500px}
 .gl-canvas{width:100%;height:100%;display:block}
 .ov-tl{position:absolute;top:8px;left:8px;padding:6px 10px;background:rgba(0,0,0,.7);border-radius:4px;font-size:11px;font-family:'Courier New',monospace;color:#0f0;line-height:1.5;pointer-events:none;z-index:10}
 .ov-bl{position:absolute;bottom:8px;left:8px;padding:6px 10px;background:rgba(0,0,0,.7);border-radius:4px;font-size:11px;font-family:'Courier New',monospace;color:#0f0;pointer-events:none;z-index:10}