pms-iot-vue/src/components/ModelViewer.vue

<template>
  <div ref="container" class="w-full h-full z-999 cursor-pointer"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const container = ref<HTMLDivElement>()

let scene: THREE.Scene
let camera: THREE.PerspectiveCamera
let renderer: THREE.WebGLRenderer
let controls: OrbitControls
let model: THREE.Group

const init = () => {
  scene = new THREE.Scene()
  // scene.background = new THREE.Color(0x0a0a0a) // 移除深色背景

  camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
  camera.position.set(3, 3, 3)
  camera.lookAt(0, 0, 0)

  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
  renderer.setSize(2000, 1000)
  renderer.shadowMap.enabled = true
  renderer.shadowMap.type = THREE.PCFSoftShadowMap
  container.value?.appendChild(renderer.domElement)

  controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true
  controls.dampingFactor = 0.05
  controls.enableZoom = true
  controls.enablePan = false

  const hemisphereLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 2) // 增加强度从1到2
  scene.add(hemisphereLight)

  const pointLight = new THREE.PointLight(0xffffff, 2, 100) // 增加强度从1到2
  pointLight.position.set(0, 5, 5)
  scene.add(pointLight)

  const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5) // 增加强度从0.8到1.5
  directionalLight.position.set(10, 10, 5)
  directionalLight.castShadow = true
  scene.add(directionalLight)

  // 添加额外的环境光
  const ambientLight = new THREE.AmbientLight(0x404040, 0.6) // 添加环境光
  scene.add(ambientLight)

  const modelUrl = new URL('../assets/model/industrialEquipment.glb', import.meta.url).href
  console.log('模型URL:', modelUrl)
  const loader = new GLTFLoader()
  loader.load(
    modelUrl,
    (gltf) => {
      console.log('模型加载成功:', gltf)
      model = gltf.scene
      model.scale.set(7, 7, 7) // 增加缩放
      model.position.set(0, 0, 0)
      scene.add(model)
    },
    (progress) => {
      console.log('模型加载进度:', progress) // 加载进度
    },
    (error) => {
      console.error('模型加载失败:', error)
    }
  )

  const animate = () => {
    requestAnimationFrame(animate)
    controls.update()
    if (model) {
      model.rotation.y += 0.005
    } else {
      scene.children.forEach((child) => {
        if (child instanceof THREE.Mesh && child.geometry instanceof THREE.BoxGeometry) {
          child.rotation.y += 0.01
        }
      })
    }
    renderer.render(scene, camera)
  }
  animate()

  const resize = () => {
    if (container.value) {
      const width = container.value.clientWidth
      const height = container.value.clientHeight
      camera.aspect = width / height
      camera.updateProjectionMatrix()
      renderer.setSize(width, height)
    }
  }
  window.addEventListener('resize', resize)
  resize()
}

onMounted(() => {
  init()
})

onUnmounted(() => {
  if (renderer) {
    renderer.dispose()
  }
  if (controls) {
    controls.dispose()
  }
})
</script>