<template>
  <div class="model3d-view">
    <el-space :gutter="10" class="toolbar">
      <el-upload :on-change="handleFileChange"
                 :show-file-list="false" accept=".fbx,.obj,.mtl,.3ds" action="" :auto-upload="false">
        <el-button type="primary">打开模型</el-button>
      </el-upload>
      <el-upload :on-change="handleTextureUpload"
                 :show-file-list="false" accept=".png,.jpg,.jpeg" action="" :auto-upload="false"
                 list-type="picture">
        <el-button>打开贴图</el-button>
      </el-upload>
      <el-upload :on-change="handleMtlUpload"
                 :show-file-list="false" accept=".mtl" action="" :auto-upload="false"
                 list-type="picture">
        <el-button>打开材质</el-button>
      </el-upload>
      <el-button @click="addConveyor">添加输送线</el-button>
      <el-button @click="createShelf">添加货架</el-button>
      <div class="demo-color-block">
        <span class="demonstration">材质颜色</span>
        <el-color-picker v-model="restate.targetColor" />
      </div>
      <!-- 按 1:1 / 1:0.001 比例 -->
      <div class="demo-color-block">
        <span class="demonstration">默认比例</span>
        <el-radio-group v-model="restate.loadScale">
          <el-radio-button label="1" :value="1" />
          <el-radio-button label="0.01" :value="0.01" />
          <el-radio-button label="0.001" :value="0.001" />
        </el-radio-group>
      </div>
      <div class="demo-color-block">
        <span class="demonstration">物体数:<el-text type="danger">{{ restate.objects }}</el-text></span>
        <span class="demonstration"> 顶点数:<el-text type="danger">{{ restate.vertices }}</el-text></span>
        <span class="demonstration"> 三角形数:<el-text type="danger">{{ restate.faces }}</el-text></span>
      </div>
    </el-space>
    <div class="main-content">
      <Split class="model3d-content" :direction="'horizontal'">
        <SplitArea class="model3d-canvas" :size="70">
          <!-- Three.js 渲染画布 -->
          <div class="canvas-container" ref="canvasContainer">
            <div class="canvas-left-toolbar">
              <button class="Button" :class="{selected:(restate.mode==='translate')}" title="平移"
                      @mousedown="restate.mode='translate'">
                <component :is="renderIcon('element Rank')" />
              </button>
              <button class="Button" :class="{selected:(restate.mode==='rotate')}" title="旋转"
                      @mousedown="restate.mode='rotate'">
                <component :is="renderIcon('element RefreshLeft')" />
              </button>
              <button class="Button" :class="{selected:(restate.mode==='scale')}" title="缩放"
                      @mousedown="restate.mode='scale'">
                <component :is="renderIcon('element ScaleToOriginal')" />
              </button>
            </div>
          </div>
        </SplitArea>
        <SplitArea class="model3d-gui" :size="30">
          <div class="model3d-gui-wrap">
            <!-- 右侧面板 -->
            <div class="gui-toolbar">
              <TransformEdit ref="transformEditCtl" />
            </div>
            <div class="gui-panel" ref="guiPanel"></div>
          </div>
        </SplitArea>
      </Split>
    </div>
  </div>
</template>
<script setup>
import TransformEdit from '@/components/propertyEdit/TransformEdit.vue'
import { ref, onMounted, nextTick, reactive, watch, getCurrentInstance, onUnmounted, onBeforeUnmount } from 'vue'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
import { TDSLoader } from 'three/examples/jsm/loaders/TDSLoader'
import * as dat from 'three/examples/jsm/libs/lil-gui.module.min.js'
import Stats from 'three/examples/jsm/libs/stats.module'
import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js'
import Split from '@/components/split/split.vue'
import SplitArea from '@/components/split/split-area.vue'
import { renderIcon } from '@/utils/webutils.js'
import textureUrl from '@/assets/images/conveyor/shapes/RibSideSkirtThumbnail.jpg'
import moveUrl from '@/assets/images/conveyor/shapes/move.svg'
import arrowRightUrl from '@/assets/images/conveyor/shapes/arrow-right.svg'
import rackUrl from '@/assets/images/conveyor/shapes/Rack.png'

// DOM refs
const canvasContainer = ref(null)
const guiPanel = ref(null)
const transformEditCtl = ref(null)

// Three.js 场景相关
let scene, camera, renderer, controls
let statsControls, axesHelper, gridHelper, animationFrameId
let gui, tcontrols, modelGroup, resizeObserver

const restate = reactive({
  targetColor: '#ff0000',
  loadScale: 1,
  mode: 'translate',
  objects: 0,
  vertices: 0,
  faces: 0
})

// 状态变量
const state = {
  showAxesHelper: true,
  showGridHelper: true,
  camera: {
    position: { x: 0, y: 5, z: 10 },
    rotation: { x: 0, y: 0, z: 0 }
  }
}
onMounted(() => {
  nextTick(() => {
    initThree()
    initGUI()

    const viewerDom = canvasContainer.value
    if (resizeObserver) {
      resizeObserver.unobserve(viewerDom)
    }
    resizeObserver = new ResizeObserver(handleResize)
    resizeObserver.observe(viewerDom)

    window['model3dView'] = getCurrentInstance()
    window['model3dViewRenderer'] = renderer
  })
})

onBeforeUnmount(() => {
  if (animationFrameId !== null) {
    cancelAnimationFrame(animationFrameId)
    animationFrameId = null
  }

  cleanupThree()

  const viewerDom = canvasContainer.value
  if (resizeObserver) {
    resizeObserver.unobserve(viewerDom)
  }

  window['model3dView'] = null
  window['model3dViewRenderer'] = null
})

watch(() => restate.targetColor, (newVal) => {
  if (modelGroup) {
    modelGroup.traverse((child) => {
      if (child.isMesh && child.material?.color) {
        child.material.color.set(newVal)
        child.material.needsUpdate = true
      }
    })
  }
})

watch(() => restate.mode, (newVal) => {
  if (tcontrols) {
    tcontrols.setMode(newVal)
  }
})

function addConveyor(){//输送线
  // 1. 创建几何体：长 10 米，宽 0.8 米
  const length = 20;    // 长度 (X轴)
  const width = 0.8;    // 宽度 (Y轴)
  const height = 0.2;   // 厚度/高度 (Z轴)

  const geometry = new THREE.BoxGeometry(length, width, height);

  // 2. 加载纹理
  const textureLoader = new THREE.TextureLoader();
  textureLoader.load(textureUrl, (texture)=>{
    // 3. 设置纹理参数
    texture.wrapS = THREE.RepeatWrapping; // X方向重复（实际会拉伸）
    texture.wrapT = THREE.RepeatWrapping; // Y方向重复
    texture.center.set(0.5,0.5)
    texture.rotation  = Math.PI / 2

    texture.repeat.set(1, 1); // 初始不缩放，后面根据需要调整

    // 4. 根据输送线长度自动调整Y方向的重复次数
    // 假设你的纹理高度是 256px，想要在 0.8m 宽度上显示完整的一行
    // 所以我们计算 repeat.y = 0.8 / (texture.height / texture.width * length)
    // 或者你可以手动设置 repeat.y 来控制重复频率
    texture.repeat.set(1, 20); // 调整这个值来控制Y方向的重复频率

    // 5. 创建材质并应用纹理
    const material = new THREE.MeshBasicMaterial(
        { map: texture,color: 0x9f9f9f});

    // 6. 创建网格对象
    const conveyorBelt = new THREE.Mesh(geometry, material);

    // 7. 可选：旋转为X轴方向（默认PlaneGeometry是X/Y平面）
    conveyorBelt.rotation.x = -Math.PI / 2; // 让其平放在地面上（X/Z 平面）

    // 放置到合适的位置（如果需要）
    conveyorBelt.position.y = height / 2; // 让底部贴地
    // // 示例：在输送线不同位置添加多个标记
    addMarkerAt(-9.5, height,0,moveUrl);   // 起点
    addMarkerAt(0,  height,0,arrowRightUrl);    // 中间
    addMarkerAt(9.5,  height,0,moveUrl);    // 终点
    scene.add(conveyorBelt)
    // 动画函数
    let offsetSpeed = 0.01; // 控制滚动速度
    function animate() {
      requestAnimationFrame(animate);

      // 沿Y轴滚动
      if (texture) {
        let currentOffset = texture.offset.y;
        currentOffset += offsetSpeed;

        // 当偏移量超过1时重置，以实现无缝循环
        if (currentOffset >= 1) {
          currentOffset -= 1;
        }
        texture.offset.set(texture.offset.x,currentOffset);
      }

      renderer.render(scene, camera);
    }
    animate();
  });
}

function addMarkerAt(x, y,z,textUrl, scale = 1) {
  const loader = new THREE.TextureLoader();
  loader.load(textUrl, (texture) => {
    // 创建一个平面作为标记（大小可以调整）
    const markerGeometry = new THREE.PlaneGeometry(.6 * scale, 0.5 * scale); // 宽高比例保持一致

    const markerMaterial = new THREE.MeshBasicMaterial({
      map: texture,
      transparent: true,
      opacity: 1,
      depthWrite: false,
      side: THREE.DoubleSide
    });

    const marker = new THREE.Mesh(markerGeometry, markerMaterial);
    let yHeight=y+0.01
    // 设置位置：位于输送线表面（Y轴略高于输送线一点）
    marker.position.set(x, yHeight, z); // Y = 输送线高度 + 一点间距

    // 旋转为 X/Z 平面方向（与输送线一致）
    marker.rotation.x = -Math.PI / 2; // 和 conveyorBelt 一样旋转角度
    marker.rotation.z = Math.PI / 2; // 在平面上旋转 90 度
    scene.add(marker);
  });
}

function createShelf(){//创建货架
  const textureLoader = new THREE.TextureLoader();
  const metalTexture = textureLoader.load('path/to/your/metal/texture.jpg'); // 替换为实际路径

  // 材质设置
  const material = new THREE.MeshStandardMaterial({
    map: metalTexture,
    metalness: 1.0,
    roughness: 0.5
  });

  // 货架参数
  const shelfLength = 10;       // 总长
  const shelfWidth = 0.8;       // 宽度（深度）
  const shelfThickness = 0.1;   // 层板厚度
  const rows = 3;               // 层数
  const columns = 4;            // 列数
  const spacingY = 1;           // 层间距

  const unitLength = shelfLength / columns; // 每个格子长度：2.5m

  // ✅ 整体上浮高度：让模型位于水平面之上
  const baseHeight = 2; // 单位：米

  // ---------------------
  // 创建层板（3层 × 4列）
  // ---------------------
  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < columns; col++) {
      const geometry = new THREE.BoxGeometry(unitLength, shelfThickness, shelfWidth);
      const mesh = new THREE.Mesh(geometry, material);

      const x = -shelfLength / 2 + unitLength * col + unitLength / 2;
      const y = -(shelfThickness + spacingY) * row - shelfThickness / 2 + baseHeight; // 加上偏移
      const z = 0;

      mesh.position.set(x, y, z);
      scene.add(mesh);
    }
  }

  // ---------------------
  // 计算第三层层板底部位置（用于支撑柱对齐）
  // ---------------------
  const thirdShelfCenterY = -(shelfThickness + spacingY) * 2 - shelfThickness / 2 + baseHeight;
  const thirdShelfBottomY = thirdShelfCenterY - shelfThickness / 2;

  // ---------------------
// 创建支撑柱 + 添加贴纸
// ---------------------

  const postWidth = 0.1;
  const postDepth = 0.1;
  const postHeight = 3.3;




  const postPositionsX = [0, 2.5, 5, 7.5, 10];
  const postPositionsZ = [-shelfWidth / 2, shelfWidth / 2];

// 加载贴纸纹理（可以是透明PNG）
  const loader = new THREE.TextureLoader();
  loader.load(rackUrl, (texture) => {
    // 创建贴纸材质（支持透明）
    const stickerMaterial = new THREE.MeshBasicMaterial({
      map: texture,
      transparent: true,
      side: THREE.DoubleSide // 双面可见
    });

    postPositionsX.forEach(x => {
      postPositionsZ.forEach(z => {
        // 创建柱子
        const postGeometry = new THREE.BoxGeometry(postWidth, postHeight, postDepth);
        const post = new THREE.Mesh(postGeometry, material);

        // 设置柱子中心 Y 坐标，使其底部对齐第三层层板底部
        const postCenterY = thirdShelfBottomY + postHeight / 2;

        post.position.set(
            x - shelfLength / 2,
            postCenterY,
            z
        );

        scene.add(post);

        // ---------------------
        // 创建贴纸（附加在外侧面上）
        // ---------------------
        const stickerWidth = 0.08;  // 贴纸宽度
        const stickerHeight = 0.2;  // 贴纸高度

        const stickerGeometry = new THREE.PlaneGeometry(stickerWidth, stickerHeight);
        const sticker = new THREE.Mesh(stickerGeometry, stickerMaterial);

        // 将贴纸放在柱子外侧表面中间位置
        sticker.position.set(
            post.position.x + postWidth / 2,     // 柱子外侧
            post.position.y,                     // Y 中心
            post.position.z                      // Z 对齐
        );

        // 让贴纸始终面向相机（可选）
        // 使用 dcm.orientation.lookAt(camera.position) 或手动设置朝向
        // 这里简单设置固定朝向正面（可根据需求扩展为自动朝向相机）
        sticker.lookAt(new THREE.Vector3(1, 0, 0)); // 面向 X 正方向

        // 微调：让贴纸略微浮出柱子表面，避免深度冲突
        sticker.position.x += 0.01;

        scene.add(sticker);
      });
    });
  })
}


function initThree() {
  const viewerDom = canvasContainer.value

  // 场景
  scene = new THREE.Scene()
  scene.background = new THREE.Color(0xeeeeee)

  // 渲染器
  renderer = new THREE.WebGLRenderer({
    logarithmicDepthBuffer: true,
    antialias: true,
    physicallyCorrectLights: true,
    outputEncoding: THREE.SRGBColorSpace,
    alpha: true,
    precision: 'mediump',
    premultipliedAlpha: true,
    preserveDrawingBuffer: false,
    powerPreference: 'high-performance'
  })
  renderer.clearDepth()
  renderer.shadowMap.enabled = true
  renderer.toneMapping = THREE.ACESFilmicToneMapping
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setSize(viewerDom.getBoundingClientRect().width, viewerDom.getBoundingClientRect().height)
  viewerDom.appendChild(renderer.domElement)

  // 摄像机
  initMode3DCamera()

  // 辅助线
  axesHelper = new THREE.AxesHelper(5)
  scene.add(axesHelper)

  gridHelper = new THREE.GridHelper(40, 40)
  scene.add(gridHelper)

  // 光照
  const ambientLight = new THREE.AmbientLight(0xffffff, 1.5)
  scene.add(ambientLight)

  const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5)
  directionalLight.position.set(5, 5, 5).multiplyScalar(3)
  directionalLight.castShadow = true
  scene.add(directionalLight)

  const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1)
  scene.add(hemisphereLight)


  // 性能监控
  statsControls = new Stats()
  statsControls.showPanel(0)
  statsControls.dom.style.position = 'absolute'
  statsControls.dom.style.bottom = '5px'
  statsControls.dom.style.left = '5px'
  statsControls.dom.style.top = 'unset'
  viewerDom.appendChild(statsControls.dom)

  // // 创建几何体和材质做测试用
  // const geometry = new THREE.BoxGeometry(1, 1, 1)
  // const material = new THREE.MeshStandardMaterial({
  //   color: 0xcccccc,
  //   metalness: 0.9,
  //   roughness: 0.1
  // })
  //
  // const cube = new THREE.Mesh(geometry, material)
  // scene.add(cube)
  // camera.position.z = 5

  animate()

  // 转换控制器 TransformControls
  tcontrols = new TransformControls(camera, renderer.domElement)
  tcontrols.addEventListener('change', () => {
    renderer.render(scene, camera)
    transformEditCtl.value?.refreshData()
  })
  tcontrols.addEventListener('dragging-changed', function(event) {
    controls.enabled = !event.value
  })
  tcontrols.setMode('translate')
  scene.add(tcontrols.getHelper())
}

// 动画循环
function animate() {
  animationFrameId = requestAnimationFrame(animate)
  renderView()
}

function initGUI() {
  const guiDom = guiPanel.value

  gui = new dat.GUI({ autoPlace: false })
  guiDom.appendChild(gui.domElement)

  // 显示辅助线
  gui.add(state, 'showAxesHelper').name('显示坐标轴').onChange(val => {
    axesHelper.visible = val
  })

  gui.add(state, 'showGridHelper').name('显示网格').onChange(val => {
    gridHelper.visible = val
  })

  // Position
  const cameraPosFolder = gui.addFolder('摄像机位置')
  cameraPosFolder.add(state.camera.position, 'x', -100, 100).step(0.1).listen().onChange(val => {
    camera.position.x = val
  })
  cameraPosFolder.add(state.camera.position, 'y', -100, 100).step(0.1).listen().onChange(val => {
    camera.position.y = val
  })
  cameraPosFolder.add(state.camera.position, 'z', -100, 100).step(0.1).listen().onChange(val => {
    camera.position.z = val
  })
  cameraPosFolder.close()

  // Rotation (in radians)
  const cameraRotationFolder = gui.addFolder('摄像机旋转角')
  cameraRotationFolder.add(state.camera.rotation, 'x', -Math.PI, Math.PI).listen().onChange(val => {
    camera.rotation.x = val
  })
  cameraRotationFolder.add(state.camera.rotation, 'y', -Math.PI, Math.PI).listen().onChange(val => {
    camera.rotation.y = val
  })
  cameraRotationFolder.add(state.camera.rotation, 'z', -Math.PI, Math.PI).listen().onChange(val => {
    camera.rotation.z = val
  })
  cameraRotationFolder.close()
}

function handleResize(entries) {
  for (let entry of entries) {
    // entry.contentRect包含了元素的尺寸信息
    console.log('Element size changed:', entry.contentRect)

    const width = entry.contentRect.width
    const height = entry.contentRect.height

    if (camera instanceof THREE.PerspectiveCamera) {
      camera.aspect = width / height
      camera.updateProjectionMatrix()

    } else if (camera instanceof THREE.OrthographicCamera) {
      camera.left = width / -2
      camera.right = width / 2
      camera.top = height / 2
      camera.bottom = height / -2
      camera.updateProjectionMatrix()
    }
    renderer.setSize(width, height)
    break
  }
}

function initMode3DCamera() {
  if (camera) {
    scene.remove(camera)
  }

  const viewerDom = canvasContainer.value

  // ============================ 创建透视相机
  const cameraNew = new THREE.PerspectiveCamera(25, viewerDom.clientWidth / viewerDom.clientHeight, 0.1, 2000)
  cameraNew.position.set(5, 5, 5)
  cameraNew.lookAt(0, 0, 0)

  camera = cameraNew
  scene.add(camera)

  const controlsNew = new OrbitControls(camera, viewerDom)
  controlsNew.mouseButtons = { LEFT: THREE.MOUSE.PAN, RIGHT: THREE.MOUSE.ROTATE } // 鼠标中键平移
  controlsNew.enableDamping = false
  controlsNew.screenSpacePanning = false // 定义平移时如何平移相机的位置 控制不上下移动
  controlsNew.minDistance = 2
  controlsNew.addEventListener('change', syncCameraState)
  controls = controlsNew
  controls.update()

  camera.updateProjectionMatrix()

  syncCameraState()
}

/**
 * 重新加载相机状态到全局状态
 */
function syncCameraState() {
  if (camera) {
    state.camera.position.x = camera.position.x
    state.camera.position.y = camera.position.y
    state.camera.position.z = camera.position.z

    state.camera.rotation.x = camera.rotation.x
    state.camera.rotation.y = camera.rotation.y
    state.camera.rotation.z = camera.rotation.z
  }
}

function renderView() {
  statsControls?.update()
  renderer?.render(scene, camera)
}

function handleTextureUpload(file) {
  console.log('file', file)
  if (!file) return

  file = file.raw

  // 移除旧模型
  // cleaupModel()

  const fileName = file.name.toLowerCase()
  const reader = new FileReader()
  reader.onerror = (error) => {
    system.showErrorDialog('加载文件失败', error.toString())
    system.clearLoading()
  }

  if (fileName.endsWith('.png') || fileName.endsWith('.jpg') || fileName.endsWith('.jpeg')) {
    reader.onload = () => {
      // const textureLoader = new THREE.TextureLoader()
      // const texture = textureLoader.load(reader.result)
      // tcontrols.setTexture(texture)
      // system.clearLoading()
      const texture = new THREE.TextureLoader().load(reader.result)

      // 假设模型的所有网格都应用相同的材质
      modelGroup.traverse(function(child) {
        if (child.isMesh) {
          child.material.map = texture
          child.material.needsUpdate = true
        }
      })
    }
    reader.readAsDataURL(file)
  } else {
    alert('不支持的文件类型！')
  }
}

let lastObjfile = undefined

function handleMtlUpload(file) {
  console.log('file', file)
  if (!file) return

  file = file.raw

  // 移除旧模型
  cleaupModel()

  const fileName = file.name.toLowerCase()
  const reader = new FileReader()
  reader.onerror = (error) => {
    system.showErrorDialog('加载文件失败', error.toString())
    system.clearLoading()
  }

  if (fileName.endsWith('.mtl')) {
    reader.onload = () => {
      const mtlLoader = new MTLLoader()
      mtlLoader.load(reader.result, (materials) => {
        materials.preload()

        const objLoader = new OBJLoader()
        objLoader.setMaterials(materials)
        const content = objLoader.parse(lastObjfile)
        addGroupToScene(content)
      })
    }
    reader.readAsText(file)
  } else {
    alert('不支持的文件类型！')
  }
}

function addGroupToScene(group) {
  modelGroup = group
  if (restate.loadScale) {
    // 设置默认模型缩放
    modelGroup.scale.set(restate.loadScale, restate.loadScale, restate.loadScale)
  }
  scene.add(modelGroup)
  tcontrols.attach(modelGroup)
  transformEditCtl.value?.attachObject3D(modelGroup)

  controls.target.copy(modelGroup.position)
  controls.update()

  // 遍历场景中的所有对象
  let totalObjects = 0
  let totalVertices = 0
  let totalFaces = 0
  modelGroup.traverse(function(child) {
    if (child.isMesh) {
      totalObjects++

      // 获取几何体
      const geometry = child.geometry

      // 如果几何体是 BufferGeometry 类型
      if (geometry.isBufferGeometry) {
        // 计算顶点数
        if (geometry.attributes.position) {
          totalVertices += geometry.attributes.position.count
        }

        // 计算面数（假设每个面都是由三个顶点组成的三角形）
        if (geometry.index) {
          totalFaces += geometry.index.count / 3
        } else if (geometry.attributes.position) {
          // 如果没有索引，计算非索引几何体的面数
          totalFaces += geometry.attributes.position.count / 3
        }
      }
      // 如果几何体是 Geometry 类型（较旧的版本使用）
      else if (geometry.isGeometry) {
        // 计算顶点数
        totalVertices += geometry.vertices.length

        // 计算面数
        totalFaces += geometry.faces.length
      }
    }
  })
  restate.objects = totalObjects
  restate.vertices = totalVertices
  restate.faces = totalFaces
}

function handleFileChange(file) {
  console.log('file', file)
  if (!file) return

  file = file.raw

  // 移除旧模型
  cleaupModel()

  const fileName = file.name.toLowerCase()
  const reader = new FileReader()
  reader.onerror = (error) => {
    system.showErrorDialog('加载文件失败', error.toString())
    system.clearLoading()
  }

  if (fileName.endsWith('.fbx')) {
    system.showLoading()
    reader.onload = () => {
      const loader = new FBXLoader()
      const arrayBuffer = reader.result
      const content = loader.parse(arrayBuffer, '')
      addGroupToScene(content)

      system.clearLoading()
    }
    reader.readAsArrayBuffer(file)

  } else if (fileName.endsWith('.obj')) {
    reader.readAsText(file)
    reader.onload = () => {
      const loader = new OBJLoader()
      lastObjfile = reader.result
      //@ts-ignore
      const content = loader.parse(reader.result)
      addGroupToScene(content)

      system.clearLoading()
    }

  } else if (fileName.endsWith('.3ds')) {
    reader.onload = () => {
      const loader = new TDSLoader()
      const arrayBuffer = reader.result
      //@ts-ignore
      const content = loader.parse(arrayBuffer, '')
      addGroupToScene(content)

      system.clearLoading()
    }
    reader.readAsArrayBuffer(file)

  } else {
    alert('不支持的文件类型！')
  }
}


function cleaupModel() {
  if (modelGroup) {
    scene.remove(modelGroup)
  }
  tcontrols.detach()
  transformEditCtl.value.detach()
}

function cleanupThree() {
  // 移除旧模型
  if (scene) {
    scene.traverse((obj) => {
      // 释放几何体
      if (obj.geometry) {
        obj.geometry.dispose()
      }

      // 释放材质
      if (obj.material) {
        if (Array.isArray(obj.material)) {
          obj.material.forEach(m => m.dispose())
        } else {
          obj.material.dispose()
        }
      }

      // 释放纹理
      if (obj.texture) {
        obj.texture.dispose()
      }

      // 释放渲染目标
      if (obj.renderTarget) {
        obj.renderTarget.dispose()
      }

      // 移除事件监听（如 OrbitControls）
      if (obj.dispose) {
        obj.dispose()
      }
    })

    if (modelGroup) {
      scene.remove(modelGroup)
    }
    // 清空场景
    scene.children = []

    modelGroup = null
  }

  if (gui) {
    gui.destroy()
  }
  if (tcontrols) {
    tcontrols.dispose()
  }
  if (statsControls) {
    statsControls.dom.remove()
  }

  if (renderer) {
    renderer.dispose()
    renderer.forceContextLoss()
    console.log('WebGL disposed, memory:', renderer.info.memory)
    renderer.domElement = null
  }
}

</script>
<style scoped lang="less">
.model3d-view {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;

  .canvas-left-toolbar {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 32px;
    background: #eee;
    text-align: center;

    button {
      color: #555;
      background-color: #ddd;
      border: 0;
      margin: 0;
      padding: 5px 8px;
      font-size: 12px;
      text-transform: uppercase;
      cursor: pointer;
      outline: none;
    }

    button.selected {
      background-color: #fff;
    }
  }

  .toolbar {
    padding: 10px;
    background: #f5f5f5;
    border-bottom: 1px solid #ccc;
  }

  .dialog-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  .main-content {
    display: flex;
    flex: 1;
    overflow: hidden;

    .model3d-content {
      height: 100%;
      display: flex;
      flex-direction: row;
    }
  }

  .canvas-container {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .model3d-gui-wrap {
    border-left: 1px solid #ccc;
    background: #111;
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }

  .gui-panel {
    :deep(.lil-gui.root) {
      width: 100%;
    }
  }
}

</style>