# 創(chuàng)建Vue3項(xiàng)目
npm create vite@latest threejs-3d-model-demo -- --template vue
cd threejs-3d-model-demo
npm install

# 安裝核心依賴（Three.js + 模型加載器 + 控制器）
npm install three @tweenjs/tween.js

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js' // 視角控制器

/**
 * 初始化Three.js基礎(chǔ)組件
 * @param {HTMLElement} container - 渲染容器
 * @returns {Object} 場(chǎng)景、相機(jī)、渲染器、控制器實(shí)例
 */
export function initThree(container) {
  // 1. 創(chuàng)建場(chǎng)景（承載所有3D元素）
  const scene = new THREE.Scene()
  scene.background = new THREE.Color(0xf0f8ff) // 背景色（淡藍(lán)色）

  // 2. 創(chuàng)建相機(jī)（透視相機(jī)，模擬人眼視角）
  const camera = new THREE.PerspectiveCamera(
    75, // 視野角度（FOV）
    container.clientWidth / container.clientHeight, // 寬高比
    0.1, // 近裁剪面（小于此距離的物體不渲染）
    1000 // 遠(yuǎn)裁剪面（大于此距離的物體不渲染）
  )
  camera.position.set(0, 5, 10) // 相機(jī)初始位置（x,y,z）

  // 3. 創(chuàng)建渲染器（WebGL渲染）
  const renderer = new THREE.WebGLRenderer({ antialias: true }) // 抗鋸齒開啟
  renderer.setSize(container.clientWidth, container.clientHeight) // 渲染尺寸
  container.appendChild(renderer.domElement) // 掛載渲染畫布

  // 4. 創(chuàng)建控制器（支持鼠標(biāo)拖動(dòng)、滾輪縮放視角）
  const controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true // 阻尼效果（視角移動(dòng)更平滑）
  controls.dampingFactor = 0.05 // 阻尼系數(shù)（值越小越平滑）
  controls.screenSpacePanning = false // 禁止屏幕平移（僅圍繞物體旋轉(zhuǎn)）
  controls.minDistance = 5 // 最小縮放距離
  controls.maxDistance = 50 // 最大縮放距離

  // 5. 監(jiān)聽窗口resize事件（自適應(yīng)畫布尺寸）
  window.addEventListener('resize', () => {
    camera.aspect = container.clientWidth / container.clientHeight
    camera.updateProjectionMatrix() // 更新相機(jī)投影矩陣
    renderer.setSize(container.clientWidth, container.clientHeight)
  })

  return { scene, camera, renderer, controls }
}

<template>
  <!-- Three.js渲染容器 -->
  <div id="threeContainer" class="three-container"></div>
  <!-- 模型加載進(jìn)度條 -->
  <div v-if="loadProgress < 100" class="load-progress">
    加載中：{{ loadProgress }}%
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as THREE from 'three'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js' // GLB模型加載器
import { initThree } from '@/utils/threeHelper.js'
import TWEEN from '@tweenjs/tween.js'

// 響應(yīng)式數(shù)據(jù)（加載進(jìn)度）
const loadProgress = ref(0)
// 全局變量（存儲(chǔ)Three.js實(shí)例）
let scene, camera, renderer, controls, model // model為加載后的模型實(shí)例

onMounted(() => {
  // 1. 獲取容器并初始化Three.js
  const container = document.getElementById('threeContainer')
  const threeInstance = initThree(container)
  scene = threeInstance.scene
  camera = threeInstance.camera
  renderer = threeInstance.renderer
  controls = threeInstance.controls

  // 2. 添加環(huán)境光（避免模型過(guò)暗）
  addLights()

  // 3. 加載3D模型
  loadGLBModel('/models/building.glb') // 模型路徑（public/models目錄下）

  // 4. 啟動(dòng)渲染循環(huán)（動(dòng)畫幀）
  renderLoop()
})

/**
 * 添加場(chǎng)景燈光（環(huán)境光+方向光）
 */
function addLights() {
  // 環(huán)境光（均勻照亮所有物體，無(wú)陰影）
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
  scene.add(ambientLight)

  // 方向光（模擬太陽(yáng)光，產(chǎn)生陰影）
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8)
  directionalLight.position.set(10, 20, 10) // 光源位置
  directionalLight.castShadow = true // 開啟陰影投射
  // 優(yōu)化陰影質(zhì)量（降低鋸齒）
  directionalLight.shadow.mapSize.set(2048, 2048)
  scene.add(directionalLight)
}

/**
 * 渲染循環(huán)（持續(xù)更新場(chǎng)景）
 */
function renderLoop() {
  requestAnimationFrame(renderLoop)
  controls.update() // 更新控制器狀態(tài)（阻尼效果需此步驟）
  TWEEN.update() // 更新視角過(guò)渡動(dòng)畫
  renderer.render(scene, camera) // 渲染場(chǎng)景
}
</script>

<style scoped>
.three-container {
  width: 100vw;
  height: 100vh;
}
.load-progress {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: #333;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px 20px;
  border-radius: 4px;
  z-index: 100;
}
</style>

/**
 * 加載GLB格式3D模型
 * @param {string} modelPath - 模型路徑
 */
function loadGLBModel(modelPath) {
  const loader = new GLTFLoader()

  // 1. 監(jiān)聽加載進(jìn)度
  loader.onProgress = (xhr) => {
    loadProgress.value = Math.floor((xhr.loaded / xhr.total) * 100)
  }

  // 2. 加載成功回調(diào)
  loader.load(
    modelPath,
    (gltf) => {
      model = gltf.scene // 保存模型實(shí)例（用于后續(xù)交互）
      
      // 模型縮放與位置調(diào)整（根據(jù)實(shí)際模型大小適配）
      model.scale.set(1, 1, 1) // 縮放比例（默認(rèn)1:1）
      model.position.set(0, 0, 0) // 模型初始位置（場(chǎng)景中心）
      
      // 允許模型投射陰影
      model.traverse((child) => {
        if (child.isMesh) {
          child.castShadow = true
          child.receiveShadow = true // 允許接收其他物體的陰影
        }
      })

      scene.add(model) // 將模型添加到場(chǎng)景
      loadProgress.value = 100 // 標(biāo)記加載完成

      // 視角自動(dòng)聚焦到模型（使用TWEEN實(shí)現(xiàn)平滑過(guò)渡）
      new TWEEN.Tween(camera.position)
        .to({ x: 0, y: 3, z: 8 }, 1500) // 目標(biāo)位置與過(guò)渡時(shí)間（ms）
        .easing(TWEEN.Easing.Quadratic.InOut) // 緩動(dòng)函數(shù)
        .start()
    },
    undefined, // onProgress已單獨(dú)處理
    (error) => {
      console.error('模型加載失?。?, error)
      alert(`模型加載失敗，請(qǐng)檢查路徑：${modelPath}`)
    }
  )
}

// 引入Element Plus（需提前安裝：npm install element-plus）
import { ElMessageBox } from 'element-plus'
import { onMounted } from 'vue'

onMounted(() => {
  // ... 原有初始化代碼 ...
  // 初始化點(diǎn)擊交互
  initModelClick()
})

/**
 * 初始化模型點(diǎn)擊交互
 */
function initModelClick() {
  const raycaster = new THREE.Raycaster() // 射線檢測(cè)器
  const mouse = new THREE.Vector2() // 存儲(chǔ)鼠標(biāo)坐標(biāo)

  // 監(jiān)聽鼠標(biāo)點(diǎn)擊事件
  window.addEventListener('click', (event) => {
    // 1. 將鼠標(biāo)屏幕坐標(biāo)轉(zhuǎn)換為Three.js標(biāo)準(zhǔn)坐標(biāo)（-1 ~ 1）
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1

    // 2. 更新射線方向（從相機(jī)指向鼠標(biāo)點(diǎn)擊位置）
    raycaster.setFromCamera(mouse, camera)

    // 3. 檢測(cè)射線與模型的交點(diǎn)
    const intersects = raycaster.intersectObjects(model.children, true) // true：檢測(cè)子物體

    if (intersects.length > 0) {
      const clickedMesh = intersects[0].object // 獲取點(diǎn)擊的模型網(wǎng)格
      
      // 4. 模型高亮（臨時(shí)修改材質(zhì)顏色）
      const originalMaterial = clickedMesh.material // 保存原始材質(zhì)
      clickedMesh.material = new THREE.MeshBasicMaterial({ color: 0xffff00 }) // 黃色高亮

      // 5. 2秒后恢復(fù)原始材質(zhì)
      setTimeout(() => {
        clickedMesh.material = originalMaterial
      }, 2000)

      // 6. 彈出模型信息（可從模型userData中獲取自定義數(shù)據(jù)）
      ElMessageBox.alert(
        `<div>模型名稱：${model.name || '自定義建筑模型'}</div>
         <div>位置：(${model.position.x.toFixed(2)}, ${model.position.y.toFixed(2)}, ${model.position.z.toFixed(2)})</div>
         <div>網(wǎng)格數(shù)量：${getMeshCount(model)}個(gè)</div>`,
        '模型信息',
        { confirmButtonText: '確定' }
      )
    }
  })
}

/**
 * 統(tǒng)計(jì)模型中的網(wǎng)格數(shù)量
 * @param {THREE.Group} object - 模型實(shí)例（Group或Scene）
 * @returns {number} 網(wǎng)格數(shù)量
 */
function getMeshCount(object) {
  let count = 0
  object.traverse((child) => {
    if (child.isMesh) count++
  })
  return count
}

// vite.config.js 跨域配置示例
export default defineConfig({
  server: {
    proxy: {
      '/models': {
        target: 'http://your-server.com', // 模型服務(wù)器地址
        changeOrigin: true
      }
    }
  }
})