demos

src/views/home.vue

@@ -3,15 +3,15 @@ const demos = [
   { name: '加载GLB模型', path: '/three/1' },
   { name: '添加灯光', path: '/three/2' },
   { name: '添加控制器、AxesHelper', path: '/three/3' },
-  { name: '设置地面', path: '/three/3' },
-  { name: '地面上设置光效', path: '/three/4' },
-  { name: '模型漫游（巡检业务）', path: '/three/5' },
+  { name: '设置地面', path: '/three/4' },
+  { name: '地面上设置光效', path: '/three/5' },
   { name: '模型动画（模型本身存在动画）', path: '/three/6' },
-  { name: '漫游 修改材质（设备告警业务）', path: '/three/7' },
-  { name: '粒子效果（蒸汽）', path: '/three/8' },
-  { name: '模型与Web的交互', path: '/three/9' },
-  { name: '后期处理效果', path: '/three/10' },
-  { name: '公共函数抽象', path: '/three/11' },
+  { name: '模型漫游（巡检业务）', path: '/three/7' },
+  { name: '漫游 修改材质（设备告警业务）', path: '/three/8' },
+  { name: '粒子效果（蒸汽）', path: '/three/9' },
+  { name: '模型与Web的交互', path: '/three/10' },
+  { name: '后期处理效果', path: '/three/11' },
+  { name: '公共函数抽象', path: '/three/12' },
 ]
 </script>
 

src/views/three/10/index.vue

@@ -2,5 +2,5 @@
 </script>
 
 <template>
-  <div>1</div>
+  <div>10</div>
 </template>

src/views/three/11/index.vue

@@ -2,5 +2,5 @@
 </script>
 
 <template>
-  <div>1</div>
+  <div>11</div>
 </template>

src/views/three/12/index.vue

@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div>12</div>
+</template>

src/views/three/5/index.vue

@@ -246,8 +246,8 @@ onBeforeUnmount(cleanup)
 
 <template>
   <div ref="threeRef" class="model" />
-  <router-link to="/three/5" class="position-fixed left-20px top-20px">
-    地面上设置光效
+  <router-link to="/three/6" class="position-fixed left-20px top-20px">
+    模型漫游（巡检业务）
   </router-link>
   <div class="position-fixed right-20px top-20px flex gap-12px">
     <button @click="addGroundLightEffect">

src/views/three/6/index.vue

@@ -6,11 +6,15 @@ import { onMounted, shallowRef } from 'vue'
 
 const threeRef = shallowRef<HTMLCanvasElement>()
 
+const animations = shallowRef<THREE.AnimationClip[]>([])
+const model = shallowRef<THREE.Group>()
+
+let scene: THREE.Scene | undefined
 function initModel() {
   const width = threeRef.value!.clientWidth
   const height = threeRef.value!.clientHeight
 
-  const scene = new THREE.Scene()
+  scene = new THREE.Scene()
   scene.background = new THREE.Color(0x000000)
 
   const camera = new THREE.PerspectiveCamera(
@@ -58,13 +62,33 @@ function initModel() {
 
   const loader = new GLTFLoader()
   loader.load('/lxb_grp.glb', (gltf) => {
-    scene.add(gltf.scene)
+    scene!.add(gltf.scene)
+    model.value = gltf.scene
+    animations.value = gltf.animations ?? []
+  })
 
-    const { animations = [] } = gltf
-    animations.forEach((clip) => {
-      const mixer = new THREE.AnimationMixer(gltf.scene)
+  function animate() {
+    requestAnimationFrame(animate)
+    renderer.render(scene!, camera)
+    renderer.setSize(width, height)
+    camera.aspect = width / height
+    camera.updateProjectionMatrix()
+  }
+
+  animate()
+}
+
+function handlePlay(index: number) {
+  const clip = animations.value[index]
+  if (!clip)
+    return
+
+  const mixer = new THREE.AnimationMixer(model.value!)
   const action = mixer.clipAction(clip)
   action.play()
+  // setTimeout(() => {
+  //   action.stop()
+  // }, 3000)
 
   const clock = new THREE.Clock()
   // 在动画循环中更新混合器
@@ -74,18 +98,6 @@ function initModel() {
     mixer.update(delta)
   }
   updateMixer()
-    })
-  })
-
-  function animate() {
-    requestAnimationFrame(animate)
-    renderer.render(scene, camera)
-    renderer.setSize(width, height)
-    camera.aspect = width / height
-    camera.updateProjectionMatrix()
-  }
-
-  animate()
 }
 
 onMounted(initModel)
@@ -93,6 +105,14 @@ onMounted(initModel)
 
 <template>
   <div ref="threeRef" class="model" />
+  <router-link to="/three/7" class="position-fixed left-20px top-20px">
+    模型漫游（巡检业务）
+  </router-link>
+  <div class="position-fixed right-20px top-20px flex gap-12px">
+    <button v-for="(ani, index) in animations" :key="index" @click="handlePlay(index)">
+      播放动画{{ index + 1 }} - {{ ani.name }}
+    </button>
+  </div>
 </template>
 
 <style lang="scss" scoped>

src/views/three/7/index.vue

@@ -2,5 +2,5 @@
 </script>
 
 <template>
-  <div>1</div>
+  <div>7</div>
 </template>

src/views/three/8/index.vue

@@ -2,5 +2,5 @@
 </script>
 
 <template>
-  <div>1</div>
+  <div>8</div>
 </template>

src/views/three/9/index.vue

@@ -2,5 +2,5 @@
 </script>
 
 <template>
-  <div>1</div>
+  <div>9</div>
 </template>