From afcd701edc0de71380e664a44cced0532aa0d5de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=20=E7=9B=B8=E5=8D=BF?= <lxqmoma@outlook.com>
Date: Thu, 20 Nov 2025 17:29:13 +0800
Subject: [PATCH] demos

---
 src/views/three/7/index.vue | 296 +++++++++++++++++++++++++++++++++-
 src/views/three/8/index.vue | 306 +++++++++++++++++++++++++++++++++++-
 2 files changed, 596 insertions(+), 6 deletions(-)

diff --git a/src/views/three/7/index.vue b/src/views/three/7/index.vue
index 9d3fa0e..0a9478b 100644
--- a/src/views/three/7/index.vue
+++ b/src/views/three/7/index.vue
@@ -1,13 +1,303 @@
 <!--
- * @Description:模型漫游（巡检业务）
+ * @Description: 模型漫游（巡检业务）
  * @Autor: 刘 相卿
  * @Date: 2025-11-17 16:07:33
  * @LastEditors: 刘 相卿
- * @LastEditTime: 2025-11-20 11:44:48
+ * @LastEditTime: 2025-11-20 16:40:34
 -->
 <script lang="ts" setup>
+import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { onMounted, onUnmounted, ref, shallowRef } from 'vue'
+
+const threeRef = shallowRef<HTMLDivElement>()
+const camera = shallowRef<THREE.PerspectiveCamera>()
+const scene = shallowRef<THREE.Scene>()
+const controls = shallowRef<OrbitControls>()
+const renderer = shallowRef<THREE.WebGLRenderer>()
+
+// 漫游状态
+const tourMode = ref<'none' | 'slow' | 'fast'>('none')
+let tourTime = 0
+const initialCameraPosition = new THREE.Vector3(0, 5, 15)
+const initialCameraTarget = new THREE.Vector3(0, 0, 0)
+
+// 巡检路径点位 - 模拟进入建筑内部进行详细巡检
+// 包含位置和对应的观察目标点
+interface PathPoint {
+  position: THREE.Vector3
+  lookAt: THREE.Vector3
+}
+
+const inspectionPath: PathPoint[] = [
+  // 1. 外部俯视全景
+  { position: new THREE.Vector3(0, 8, 15), lookAt: new THREE.Vector3(0, 0, 0) },
+  // 2. 从正面接近入口
+  { position: new THREE.Vector3(0, 3, 10), lookAt: new THREE.Vector3(0, 2, 0) },
+  // 3. 进入前厅区域
+  { position: new THREE.Vector3(0, 2, 5), lookAt: new THREE.Vector3(0, 2, -2) },
+  // 4. 右侧区域巡检
+  { position: new THREE.Vector3(5, 2, 3), lookAt: new THREE.Vector3(8, 2, 0) },
+  // 5. 深入右侧内部
+  { position: new THREE.Vector3(8, 2.5, 0), lookAt: new THREE.Vector3(10, 2, -3) },
+  // 6. 右后方区域
+  { position: new THREE.Vector3(6, 2, -5), lookAt: new THREE.Vector3(3, 2, -8) },
+  // 7. 后方中央区域
+  { position: new THREE.Vector3(0, 2.5, -8), lookAt: new THREE.Vector3(0, 2, -5) },
+  // 8. 左后方区域
+  { position: new THREE.Vector3(-6, 2, -5), lookAt: new THREE.Vector3(-3, 2, -8) },
+  // 9. 深入左侧内部
+  { position: new THREE.Vector3(-8, 2.5, 0), lookAt: new THREE.Vector3(-10, 2, -3) },
+  // 10. 左侧区域巡检
+  { position: new THREE.Vector3(-5, 2, 3), lookAt: new THREE.Vector3(-8, 2, 0) },
+  // 11. 返回中央区域
+  { position: new THREE.Vector3(0, 2, 0), lookAt: new THREE.Vector3(0, 3, -5) },
+  // 12. 中央上升视角
+  { position: new THREE.Vector3(0, 5, 2), lookAt: new THREE.Vector3(0, 0, 0) },
+  // 13. 退出并俯视
+  { position: new THREE.Vector3(0, 8, 12), lookAt: new THREE.Vector3(0, 0, 0) },
+]
+
+function initModel() {
+  const width = threeRef.value!.clientWidth
+  const height = threeRef.value!.clientHeight
+
+  // 创建场景
+  scene.value = new THREE.Scene()
+
+  // 创建天空盒
+  const skyboxGeometry = new THREE.BoxGeometry(500, 500, 500)
+  const skyboxMaterials = [
+    new THREE.MeshBasicMaterial({ color: 0x1A1A2E, side: THREE.BackSide }), // right
+    new THREE.MeshBasicMaterial({ color: 0x1A1A2E, side: THREE.BackSide }), // left
+    new THREE.MeshBasicMaterial({ color: 0x0F0F1E, side: THREE.BackSide }), // top
+    new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.BackSide }), // bottom
+    new THREE.MeshBasicMaterial({ color: 0x1A1A2E, side: THREE.BackSide }), // front
+    new THREE.MeshBasicMaterial({ color: 0x1A1A2E, side: THREE.BackSide }), // back
+  ]
+  const skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterials)
+  scene.value.add(skybox)
+
+  scene.value.background = new THREE.Color(0x000000)
+  // 添加雾效增强深度感
+  scene.value.fog = new THREE.Fog(0x000000, 10, 50)
+
+  // 创建透视相机 PerspectiveCamera(视野角度, 宽高比, 近截面, 远截面)
+  camera.value = new THREE.PerspectiveCamera(
+    60,
+    width / height,
+    0.1,
+    1000,
+  )
+  camera.value.position.copy(initialCameraPosition)
+
+  // 创建渲染器
+  renderer.value = new THREE.WebGLRenderer({ antialias: true })
+  renderer.value.setSize(width, height)
+  renderer.value.setPixelRatio(window.devicePixelRatio)
+  // 开启阴影贴图
+  renderer.value.shadowMap.enabled = true
+  renderer.value.shadowMap.type = THREE.PCFSoftShadowMap
+  threeRef.value!.appendChild(renderer.value.domElement)
+
+  // 创建轨道控制器
+  controls.value = new OrbitControls(camera.value, renderer.value.domElement)
+  controls.value.enableDamping = true // 启用阻尼（惯性）
+  controls.value.dampingFactor = 0.05
+  controls.value.minDistance = 2
+  controls.value.maxDistance = 50
+  controls.value.maxPolarAngle = Math.PI / 2 * 1.8 // 限制垂直旋转角度
+
+  // 添加环境光
+  const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.6)
+  scene.value.add(ambientLight)
+
+  // 添加主平行光（模拟太阳光）
+  const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1.2)
+  directionalLight.position.set(10, 15, 10)
+  directionalLight.castShadow = true
+  directionalLight.shadow.camera.left = -20
+  directionalLight.shadow.camera.right = 20
+  directionalLight.shadow.camera.top = 20
+  directionalLight.shadow.camera.bottom = -20
+  directionalLight.shadow.mapSize.width = 2048
+  directionalLight.shadow.mapSize.height = 2048
+  scene.value.add(directionalLight)
+
+  // 添加辅助光源（从另一个方向）
+  const fillLight = new THREE.DirectionalLight(0xFFFFFF, 0.5)
+  fillLight.position.set(-10, 10, -10)
+  scene.value.add(fillLight)
+
+  // 添加地面
+  const groundGeometry = new THREE.PlaneGeometry(100, 100)
+  const groundMaterial = new THREE.MeshStandardMaterial({
+    color: 0x999999,
+    roughness: 0.8,
+    metalness: 0.2,
+  })
+  const ground = new THREE.Mesh(groundGeometry, groundMaterial)
+  ground.rotation.x = -Math.PI / 2
+  ground.position.y = 0
+  ground.receiveShadow = true
+  scene.value.add(ground)
+
+  // 加载模型
+  const loader = new GLTFLoader()
+  loader.load('/mzjc_bansw.glb', (gltf) => {
+    const model = gltf.scene
+
+    // 遍历模型，启用阴影
+    model.traverse((child) => {
+      if (child instanceof THREE.Mesh) {
+        child.castShadow = true
+        child.receiveShadow = true
+      }
+    })
+
+    scene.value!.add(model)
+  }, undefined, (error) => {
+    console.error('模型加载失败:', error)
+  })
+
+  function animate() {
+    requestAnimationFrame(animate)
+
+    // 巡检漫游效果
+    if (tourMode.value !== 'none' && camera.value && controls.value) {
+      const speed = tourMode.value === 'slow' ? 0.003 : 0.008 // 慢速或快速
+      tourTime += speed
+
+      const totalPoints = inspectionPath.length
+      const totalProgress = tourTime % totalPoints
+      const currentIndex = Math.floor(totalProgress)
+      const nextIndex = (currentIndex + 1) % totalPoints
+      const t = totalProgress - currentIndex
+
+      // 使用平滑的缓动函数
+      const smoothT = t * t * (3 - 2 * t) // smoothstep
+
+      // 获取当前和下一个路径点
+      const currentPoint = inspectionPath[currentIndex]!
+      const nextPoint = inspectionPath[nextIndex]!
+
+      // 插值位置
+      const newPosition = new THREE.Vector3()
+      newPosition.lerpVectors(currentPoint.position, nextPoint.position, smoothT)
+      camera.value.position.copy(newPosition)
+
+      // 插值观察目标
+      const newTarget = new THREE.Vector3()
+      newTarget.lerpVectors(currentPoint.lookAt, nextPoint.lookAt, smoothT)
+      controls.value.target.copy(newTarget)
+
+      // 禁用控制器的用户交互
+      controls.value.enabled = false
+    }
+    else if (controls.value) {
+      // 非漫游模式时启用控制器
+      controls.value.enabled = true
+    }
+
+    // 更新控制器
+    controls.value?.update()
+
+    // 执行渲染
+    if (renderer.value && scene.value && camera.value) {
+      renderer.value.render(scene.value, camera.value)
+    }
+  }
+  animate()
+
+  // 窗口自适应
+  window.addEventListener('resize', handleResize)
+}
+
+// 处理窗口大小变化
+function handleResize() {
+  if (!threeRef.value || !camera.value || !renderer.value)
+    return
+
+  const width = threeRef.value.clientWidth
+  const height = threeRef.value.clientHeight
+
+  // 更新相机宽高比
+  camera.value.aspect = width / height
+  camera.value.updateProjectionMatrix()
+
+  // 更新渲染器尺寸
+  renderer.value.setSize(width, height)
+  renderer.value.setPixelRatio(window.devicePixelRatio)
+}
+
+// 慢速巡检漫游
+function startSlowTour() {
+  tourMode.value = 'slow'
+  tourTime = 0
+}
+
+// 快速巡检漫游
+function startFastTour() {
+  tourMode.value = 'fast'
+  tourTime = 0
+}
+
+// 停止漫游
+function stopTour() {
+  tourMode.value = 'none'
+  tourTime = 0
+  if (camera.value && controls.value) {
+    camera.value.position.copy(initialCameraPosition)
+    controls.value.target.copy(initialCameraTarget)
+    controls.value.enabled = true
+    controls.value.update()
+  }
+}
+
+onMounted(initModel)
+
+onUnmounted(() => {
+  // 清理事件监听
+  window.removeEventListener('resize', handleResize)
+  // 销毁控制器
+  controls.value?.dispose()
+  // 销毁渲染器
+  renderer.value?.dispose()
+})
 </script>
 
 <template>
-  <div>7</div>
+  <div ref="threeRef" class="w-full h-full" />
+  <router-link to="/three/8" class="position-fixed left-20px top-20px">
+    漫游 修改材质（设备告警业务）
+  </router-link>
+  <div class="position-fixed right-20px top-20px flex flex-col gap-12px">
+    <div class="flex gap-12px">
+      <button
+        :class="{ 'bg-blue-500 text-white': tourMode === 'slow' }"
+        class="px-16px py-8px rounded hover:bg-blue-400"
+        @click="startSlowTour"
+      >
+        慢速巡检
+      </button>
+      <button
+        :class="{ 'bg-green-500 text-white': tourMode === 'fast' }"
+        class="px-16px py-8px rounded hover:bg-green-400"
+        @click="startFastTour"
+      >
+        快速巡检
+      </button>
+      <button
+        :class="{ 'bg-red-500 text-white': tourMode === 'none' }"
+        class="px-16px py-8px rounded hover:bg-red-400"
+        @click="stopTour"
+      >
+        停止漫游
+      </button>
+    </div>
+    <div v-if="tourMode !== 'none'" class="bg-white px-12px py-8px rounded shadow text-sm">
+      正在进行{{ tourMode === 'slow' ? '慢速' : '快速' }}巡检...
+    </div>
+  </div>
 </template>
diff --git a/src/views/three/8/index.vue b/src/views/three/8/index.vue
index 284b90c..c7f7828 100644
--- a/src/views/three/8/index.vue
+++ b/src/views/three/8/index.vue
@@ -1,13 +1,313 @@
 <!--
- * @Description: 漫游 + 修改材质（设备告警业务）
+ * @Description: 漫游 + 修改材质(设备告警业务)
  * @Autor: 刘 相卿
  * @Date: 2025-11-17 16:07:33
  * @LastEditors: 刘 相卿
- * @LastEditTime: 2025-11-20 11:44:57
+ * @LastEditTime: 2025-11-20 17:28:46
 -->
 <script lang="ts" setup>
+import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { onMounted, onUnmounted, ref, shallowRef } from 'vue'
+
+const threeRef = shallowRef<HTMLDivElement>()
+const camera = shallowRef<THREE.PerspectiveCamera>()
+const scene = shallowRef<THREE.Scene>()
+const controls = shallowRef<OrbitControls>()
+const renderer = shallowRef<THREE.WebGLRenderer>()
+
+// 告警相关
+const alertMesh = shallowRef<THREE.Mesh>()
+const originalMaterial = shallowRef<THREE.Material>()
+const alertOverlay = shallowRef<THREE.Mesh>() // 告警覆盖层
+const isAlerting = ref(false)
+let alertTime = 0
+
+// 相机动画相关
+let cameraAnimating = false
+let cameraAnimationProgress = 0
+const cameraStartPosition = new THREE.Vector3()
+const cameraStartTarget = new THREE.Vector3()
+const cameraEndPosition = new THREE.Vector3()
+const cameraEndTarget = new THREE.Vector3()
+
+function initModel() {
+  const width = threeRef.value!.clientWidth
+  const height = threeRef.value!.clientHeight
+
+  // 创建场景
+  scene.value = new THREE.Scene()
+  scene.value.background = new THREE.Color(0x1A1A2E)
+  scene.value.fog = new THREE.Fog(0x1A1A2E, 10, 50)
+
+  const axesHelper = new THREE.AxesHelper(5)
+  scene.value.add(axesHelper)
+
+  // 创建透视相机
+  camera.value = new THREE.PerspectiveCamera(
+    60,
+    width / height,
+    0.1,
+    1000,
+  )
+  camera.value.position.set(0, 5, 15)
+
+  // 创建渲染器
+  renderer.value = new THREE.WebGLRenderer({ antialias: true })
+  renderer.value.setSize(width, height)
+  renderer.value.setPixelRatio(window.devicePixelRatio)
+  renderer.value.shadowMap.enabled = true
+  renderer.value.shadowMap.type = THREE.PCFSoftShadowMap
+  threeRef.value!.appendChild(renderer.value.domElement)
+
+  // 创建轨道控制器
+  controls.value = new OrbitControls(camera.value, renderer.value.domElement)
+  controls.value.enableDamping = true
+  controls.value.dampingFactor = 0.05
+  controls.value.minDistance = 2
+  controls.value.maxDistance = 50
+
+  // 添加环境光
+  const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.6)
+  scene.value.add(ambientLight)
+
+  // 添加主平行光
+  const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1.2)
+  directionalLight.position.set(10, 15, 10)
+  directionalLight.castShadow = true
+  directionalLight.shadow.camera.left = -20
+  directionalLight.shadow.camera.right = 20
+  directionalLight.shadow.camera.top = 20
+  directionalLight.shadow.camera.bottom = -20
+  directionalLight.shadow.mapSize.width = 2048
+  directionalLight.shadow.mapSize.height = 2048
+  scene.value.add(directionalLight)
+
+  // 添加辅助光源
+  const fillLight = new THREE.DirectionalLight(0xFFFFFF, 0.5)
+  fillLight.position.set(-10, 10, -10)
+  scene.value.add(fillLight)
+
+  // 添加地面
+  const groundGeometry = new THREE.PlaneGeometry(100, 100)
+  const groundMaterial = new THREE.MeshStandardMaterial({
+    color: 0x555555,
+    roughness: 0.8,
+    metalness: 0.2,
+  })
+  const ground = new THREE.Mesh(groundGeometry, groundMaterial)
+  ground.rotation.x = -Math.PI / 2
+  ground.position.y = 0
+  ground.receiveShadow = true
+  scene.value.add(ground)
+
+  // 加载模型
+  const loader = new GLTFLoader()
+  loader.load('/mzjc_bansw.glb', (gltf) => {
+    const model = gltf.scene
+
+    // 遍历模型,找到 fmz_2_jzf_bs015 并启用阴影
+    model.traverse((child) => {
+      if (child instanceof THREE.Mesh) {
+        child.castShadow = true
+        child.receiveShadow = true
+
+        // 找到告警设备
+        if (child.name === 'fmz_2_jzf_bs015') {
+          alertMesh.value = child
+          // 保存原始材质
+          originalMaterial.value = child.material.clone()
+        }
+      }
+    })
+
+    scene.value!.add(model)
+  }, undefined, (error) => {
+    console.error('模型加载失败:', error)
+  })
+
+  function animate() {
+    requestAnimationFrame(animate)
+
+    // 告警闪烁效果
+    if (isAlerting.value && alertOverlay.value) {
+      alertTime += 0.05
+      // 使用正弦波创建闪烁效果,频率较快
+      const intensity = (Math.sin(alertTime * 5) + 1) / 2 // 0-1之间震荡
+
+      if (alertOverlay.value.material instanceof THREE.Material) {
+        const material = alertOverlay.value.material as THREE.MeshBasicMaterial
+        material.opacity = 0.3 + intensity * 0.4 // 透明度在0.3-0.7之间震荡
+      }
+    }
+
+    // 相机动画
+    if (cameraAnimating && camera.value && controls.value) {
+      cameraAnimationProgress += 0.008 // 控制移动速度
+
+      if (cameraAnimationProgress >= 1) {
+        cameraAnimationProgress = 1
+        cameraAnimating = false
+        controls.value.enabled = true // 动画结束后恢复控制器
+      }
+
+      // 使用缓动函数使运动更平滑
+      const t = easeInOutCubic(cameraAnimationProgress)
+
+      // 插值相机位置
+      camera.value.position.lerpVectors(cameraStartPosition, cameraEndPosition, t)
+
+      // 插值观察目标
+      const currentTarget = new THREE.Vector3()
+      currentTarget.lerpVectors(cameraStartTarget, cameraEndTarget, t)
+      controls.value.target.copy(currentTarget)
+    }
+
+    if (controls.value) {
+      controls.value.update()
+    }
+
+    if (renderer.value && scene.value && camera.value) {
+      renderer.value.render(scene.value, camera.value)
+    }
+  }
+
+  animate()
+
+  // 处理窗口大小变化
+  function onResize() {
+    if (!threeRef.value || !camera.value || !renderer.value)
+      return
+
+    const width = threeRef.value.clientWidth
+    const height = threeRef.value.clientHeight
+
+    camera.value.aspect = width / height
+    camera.value.updateProjectionMatrix()
+    renderer.value.setSize(width, height)
+  }
+
+  window.addEventListener('resize', onResize)
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', onResize)
+  })
+}
+
+// 缓动函数
+function easeInOutCubic(t: number): number {
+  return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2
+}
+
+// 设备报警处理
+function handleAlert() {
+  if (!alertMesh.value || !camera.value || !controls.value) {
+    console.warn('告警设备或相机未就绪')
+    return
+  }
+
+  // 切换告警状态
+  isAlerting.value = !isAlerting.value
+
+  if (isAlerting.value) {
+    // 开始告警
+    alertTime = 0
+
+    // 创建半透明红色覆盖层
+    const geometry = alertMesh.value.geometry.clone()
+    const overlayMaterial = new THREE.MeshBasicMaterial({
+      color: 0xFF0000,
+      transparent: true,
+      opacity: 0.2,
+      depthWrite: false,
+      side: THREE.DoubleSide,
+    })
+
+    alertOverlay.value = new THREE.Mesh(geometry, overlayMaterial)
+    // 复制告警物体的变换矩阵
+    alertOverlay.value.position.copy(alertMesh.value.position)
+    // alertOverlay.value.position.y -= 0.6
+    // alertOverlay.value.position.x += 0.6
+    // alertOverlay.value.position.z += 2
+    alertOverlay.value.rotation.copy(alertMesh.value.rotation)
+    alertOverlay.value.scale.copy(alertMesh.value.scale).multiplyScalar(1.01) // 稍微放大避免z-fighting
+
+    // 如果告警物体有父节点，添加到同一父节点
+    if (alertMesh.value.parent) {
+      alertMesh.value.parent.add(alertOverlay.value)
+    }
+    else {
+      scene.value?.add(alertOverlay.value)
+    }
+
+    // 计算告警设备的世界坐标
+    const worldPosition = new THREE.Vector3()
+    alertMesh.value.getWorldPosition(worldPosition)
+
+    // 计算包围盒来获取设备的大小
+    const box = new THREE.Box3().setFromObject(alertMesh.value)
+    const size = box.getSize(new THREE.Vector3())
+    const maxDim = Math.max(size.x, size.y, size.z)
+
+    // 根据设备大小计算合适的观察距离,使用较小的倍数以靠近物体
+    const distance = Math.max(maxDim * 1.5, 2) // 距离是设备最大尺寸的1.5倍,最小2单位
+
+    // 计算观察方向 - 从设备的斜上前方观察,更接近物体
+    const direction = new THREE.Vector3(-1.2, 1.2, -1.8).normalize()
+    const targetPosition = worldPosition.clone().add(direction.multiplyScalar(distance))
+
+    // 保存当前相机状态
+    cameraStartPosition.copy(camera.value.position)
+    cameraStartTarget.copy(controls.value.target)
+
+    // 设置目标状态 - 相机位置和观察目标
+    cameraEndPosition.copy(targetPosition)
+    cameraEndTarget.copy(worldPosition) // 直接看向设备的世界坐标
+
+    // 开始动画
+    cameraAnimating = true
+    cameraAnimationProgress = 0
+    controls.value.enabled = false // 动画期间禁用控制器
+  }
+  else {
+    // 停止告警,移除覆盖层
+    if (alertOverlay.value) {
+      alertOverlay.value.parent?.remove(alertOverlay.value)
+      alertOverlay.value.geometry.dispose()
+      if (alertOverlay.value.material instanceof THREE.Material) {
+        alertOverlay.value.material.dispose()
+      }
+      alertOverlay.value = undefined
+    }
+  }
+}
+
+onMounted(() => {
+  initModel()
+})
+
+onUnmounted(() => {
+  if (renderer.value) {
+    renderer.value.dispose()
+  }
+})
 </script>
 
 <template>
-  <div>8</div>
+  <div ref="threeRef" class="w-full h-full" />
+  <router-link to="/three/9" class="position-fixed left-20px top-20px">
+    粒子效果(蒸汽)
+  </router-link>
+  <div class="position-fixed right-20px top-20px flex flex-col gap-12px">
+    <div class="flex gap-12px">
+      <button
+        :class="{ 'bg-red-500': isAlerting }"
+        class="px-16px py-8px bg-blue-500 text-white rounded cursor-pointer hover:bg-blue-600"
+        @click="handleAlert"
+      >
+        {{ isAlerting ? '停止报警' : '设备报警' }}
+      </button>
+    </div>
+  </div>
 </template>