fix(viewer): 修复3D渲染器初始化和纹理配置问题

- 将体积纹理从DataTexture改为Data3DTexture以支持三维数据
- 分别设置纹理格式和类型属性避免构造函数参数错误
- 使用ResizeObserver替代nextTick和setTimeout实现容器尺寸检测
- 添加最小高度约束确保渲染器正确初始化
- 优化样式定义增强组件布局稳定性
This commit is contained in:
2026-06-08 12:11:46 +08:00
parent fddf1c2d03
commit f458835183

View File

@@ -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}