一、技术选型与开发环境准备

Three.js作为Web端最流行的3D渲染库，与Vue.js的响应式特性结合能高效实现复杂动画效果。开发前需确保环境配置正确：

1. 创建Vue 3项目（推荐使用Vite构建工具）
2. 安装Three.js核心库：npm install three
3. 安装辅助库（可选）：npm install @tweenjs/tween.js（用于平滑动画）

建议使用TypeScript开发以获得更好的类型提示，在vite.config.ts中配置：

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'three': 'three/build/three.module.js'
    }
  }
})

二、核心实现步骤

1. 基础场景搭建

在Vue组件中创建Three.js基础结构：

<template>
  <div ref="container" class="three-container"></div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as THREE from 'three'
const container = ref(null)
let scene, camera, renderer, mesh
const initScene = () => {
  // 创建场景
  scene = new THREE.Scene()
  scene.background = new THREE.Color(0xf0f0f0)
  // 创建相机
  camera = new THREE.PerspectiveCamera(
    75, 
    window.innerWidth / window.innerHeight, 
    0.1, 
    1000
  )
  camera.position.z = 5
  // 创建渲染器
  renderer = new THREE.WebGLRenderer({ antialias: true })
  renderer.setSize(window.innerWidth, window.innerHeight)
  container.value.appendChild(renderer.domElement)
  // 添加立方体
  const geometry = new THREE.BoxGeometry(1, 1, 1)
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
  mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)
}
onMounted(() => {
  initScene()
  animate()
})
const animate = () => {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}
onBeforeUnmount(() => {
  // 清理资源
  if (renderer) {
    renderer.dispose()
    while(container.value.firstChild) {
      container.value.removeChild(container.value.firstChild)
    }
  }
})
</script>

2. 缩放动画实现

方法一：使用requestAnimationFrame

let scaleFactor = 1
const animateScale = () => {
  scaleFactor += 0.01
  if (scaleFactor > 2) scaleFactor = 1
  mesh.scale.set(scaleFactor, scaleFactor, scaleFactor)
  requestAnimationFrame(animateScale)
}
// 在initScene后调用
animateScale()

方法二：使用GSAP动画库（推荐）

import { gsap } from 'gsap'
const animateWithGSAP = () => {
  gsap.to(mesh.scale, {
    x: 2,
    y: 2,
    z: 2,
    duration: 2,
    yoyo: true,
    repeat: -1,
    ease: 'sine.inOut'
  })
}

方法三：使用Three.js内置动画系统

let clock = new THREE.Clock()
const animateWithClock = () => {
  const elapsedTime = clock.getElapsedTime()
  const scale = 1 + Math.sin(elapsedTime) * 0.5
  mesh.scale.set(scale, scale, scale)
  requestAnimationFrame(animateWithClock)
}

3. 交互式缩放控制

结合Vue的响应式特性实现用户交互：

<script setup>
import { ref } from 'vue'
const scaleValue = ref(1)
const handleScaleChange = (e) => {
  const value = parseFloat(e.target.value)
  scaleValue.value = value
  mesh.scale.set(value, value, value)
}
</script>
<template>
  <input 
    type="range" 
    min="0.5" 
    max="2" 
    step="0.1" 
    v-model="scaleValue"
    @input="handleScaleChange"
  >
  <div>当前缩放比例: {{ scaleValue.toFixed(1) }}</div>
</template>

三、性能优化技巧

1. 对象池模式：复用几何体和材质
   ```javascript
   const geometryCache = new THREE.BoxGeometry(1, 1, 1)
   const materialCache = new THREE.MeshBasicMaterial({ color: 0x00ff00 })

// 创建多个实例时复用
const createMesh = () => {
return new THREE.Mesh(geometryCache, materialCache)
}

2. **合理使用动画帧**：避免每帧都创建新对象
```javascript
// 不推荐的做法
const badAnimate = () => {
  const newScale = new THREE.Vector3(2, 2, 2) // 每帧创建新对象
  mesh.scale.copy(newScale)
  requestAnimationFrame(badAnimate)
}
// 推荐做法
const goodAnimate = () => {
  staticScale.x = staticScale.y = staticScale.z = Math.sin(Date.now() * 0.001) * 0.5 + 1
  mesh.scale.copy(staticScale)
  requestAnimationFrame(goodAnimate)
}
const staticScale = new THREE.Vector3()

1. 使用BufferGeometry：对于静态几何体，使用BufferGeometry提升性能

   const positions = new Float32Array([...])
   const geometry = new THREE.BufferGeometry()
   geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))

四、常见问题解决方案

1. 动画卡顿：

   • 检查是否在动画循环中执行了耗时操作
   • 使用stats.js监控帧率
   • 减少同时动画的对象数量

2. 内存泄漏：

   • 确保在组件卸载时移除所有事件监听器
   • 显式调用dispose()方法释放资源
   • 使用WeakMap管理对象引用

3. 移动端适配：
   ```javascript
   const handleResize = () => {
   camera.aspect = window.innerWidth / window.innerHeight
   camera.updateProjectionMatrix()
   renderer.setSize(window.innerWidth, window.innerHeight)
   }

window.addEventListener(‘resize’, handleResize)
onBeforeUnmount(() => {
window.removeEventListener(‘resize’, handleResize)
})

# 五、进阶应用场景
1. **基于物理的缩放**：结合Cannon.js物理引擎
```javascript
import * as CANNON from 'cannon-es'
// 创建物理世界
const world = new CANNON.World()
world.gravity.set(0, -9.82, 0)
// 创建物理体
const shape = new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5))
const body = new CANNON.Body({ mass: 1, shape })
world.addBody(body)
// 同步物理与渲染
const syncPhysics = () => {
  mesh.position.copy(body.position)
  mesh.quaternion.copy(body.quaternion)
  // 自定义缩放逻辑
  const scale = 1 + Math.abs(Math.sin(body.velocity.z * 0.1)) * 0.5
  mesh.scale.set(scale, scale, scale)
}

1. Morph Targets动画：实现更复杂的变形效果
   ```javascript
   const geometry = new THREE.BoxGeometry(1, 1, 1)
   // 创建morph targets需要手动修改顶点位置
   const morphGeometry = new THREE.BufferGeometry()
   // …设置morph targets数据

const material = new THREE.MeshBasicMaterial({
morphTargets: true
})

const mesh = new THREE.Mesh(morphGeometry, material)
// 动画中修改morphTargetInfluences

3. **Shader材质缩放**：通过着色器实现高效缩放
```glsl
// vertex shader示例
uniform float uScale;
void main() {
  vec3 scaledPos = position * uScale;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(scaledPos, 1.0);
}

六、最佳实践总结

1. 动画分层：将不同优先级的动画分配到不同层级
2. 时间管理：使用performance.now()替代Date.now()获取更精确的时间
3. 状态管理：对于复杂动画，使用Vuex/Pinia管理动画状态
4. 错误处理：添加try-catch块捕获Three.js可能抛出的异常
5. 渐进增强：为不支持WebGL的浏览器提供降级方案

通过以上方法，开发者可以高效实现Vue+Three.js的物体缩放动画，同时保证代码的可维护性和性能。实际项目中，建议将Three.js相关逻辑封装为独立的Composition API函数，以便在不同组件间复用。