Vue3中如何使用Three.js详解(包括各种样例、常见场景、问题及解决方案)

npm install three @types/three

<template>
  <div ref="container" class="canvas-container"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as THREE from 'three'

const container = ref(null)
let scene, camera, renderer, cube

onMounted(() => {
  // 初始化场景
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  renderer = new THREE.WebGLRenderer({ antialias: true })
  
  // 设置渲染器
  renderer.setSize(container.value.clientWidth, container.value.clientHeight)
  renderer.setPixelRatio(window.devicePixelRatio)
  container.value.appendChild(renderer.domElement)

  // 创建立方体
  const geometry = new THREE.BoxGeometry()
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
  cube = new THREE.Mesh(geometry, material)
  scene.add(cube)

  camera.position.z = 5

  // 动画循环
  animate()
})

const animate = () => {
  requestAnimationFrame(animate)
  cube.rotation.x += 0.01
  cube.rotation.y += 0.01
  renderer.render(scene, camera)
}

onBeforeUnmount(() => {
  // 清理资源
  scene.remove(cube)
  geometry.dispose()
  material.dispose()
  renderer.dispose()
  container.value.removeChild(renderer.domElement)
})
</script>

<style>
.canvas-container {
  width: 100%;
  height: 100vh;
}
</style>

<script setup>
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

// 在onMounted中加载模型
const loadModel = async () => {
  const loader = new GLTFLoader()
  try {
    const gltf = await loader.loadAsync('/models/robot.glb')
    scene.add(gltf.scene)
    // 设置模型位置和缩放
    gltf.scene.position.set(0, 0, 0)
    gltf.scene.scale.set(0.5, 0.5, 0.5)
  } catch (error) {
    console.error('模型加载失败:', error)
  }
}
</script>

const handleResize = () => {
  camera.aspect = container.value.clientWidth / container.value.clientHeight
  camera.updateProjectionMatrix()
  renderer.setSize(container.value.clientWidth, container.value.clientHeight)
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  // 递归清理对象
  const cleanScene = (object) => {
    if (object.geometry) object.geometry.dispose()
    if (object.material) {
      if (Array.isArray(object.material)) {
        object.material.forEach(m => m.dispose())
      } else {
        object.material.dispose()
      }
    }
    object.children.forEach(child => cleanScene(child))
  }
  cleanScene(scene)
  renderer.forceContextLoss()
})

const handleClick = (event) => {
  const mouse = new THREE.Vector2()
  const rect = container.value.getBoundingClientRect()
  
  mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
  mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1

  const raycaster = new THREE.Raycaster()
  raycaster.setFromCamera(mouse, camera)
  
  const intersects = raycaster.intersectObjects(scene.children, true)
  if (intersects.length > 0) {
    console.log('点击对象:', intersects[0].object)
  }
}

onMounted(() => {
  container.value.addEventListener('click', handleClick)
})

const createObjectPool = (size, geometry, material) => {
  const pool = []
  for (let i = 0; i < size; i++) {
    const mesh = new THREE.Mesh(geometry, material)
    mesh.visible = false
    scene.add(mesh)
    pool.push(mesh)
  }
  return pool
}

const loadHeavyScene = async () => {
  const totalItems = 1000
  const batchSize = 50
  
  for (let i = 0; i < totalItems; i += batchSize) {
    await new Promise(resolve => requestAnimationFrame(resolve))
    for (let j = 0; j < batchSize; j++) {
      addComplexObject()
    }
  }
}

// useThree.js
export function useThree(container) {
  const initThree = () => {
    const scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(...)
    const renderer = new THREE.WebGLRenderer(...)
    
    return { scene, camera, renderer }
  }

  const loadGLTF = async (path) => {
    // 加载逻辑
  }

  return { initThree, loadGLTF }
}

<!-- ThreeObject.vue -->
<template>
  <slot v-if="object3D" :object="object3D" />
</template>

<script setup>
import { onMounted, provide } from 'vue'

const props = defineProps({
  type: String,
  geometry: Object,
  material: Object
})

const object3D = ref(null)

onMounted(() => {
  switch(props.type) {
    case 'mesh':
      object3D.value = new THREE.Mesh(props.geometry, props.material)
      break;
    case 'light':
      object3D.value = new THREE.PointLight(0xffffff, 1)
      break;
  }
  provide('parentObject', object3D.value)
})
</script>

import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min'

const initGUI = () => {
  const gui = new GUI()
  const cubeFolder = gui.addFolder('Cube Control')
  cubeFolder.add(cube.rotation, 'x', 0, Math.PI * 2)
  cubeFolder.add(cube.material, 'wireframe')
}

import Stats from 'three/examples/jsm/libs/stats.module'

const initStats = () => {
  const stats = new Stats()
  stats.showPanel(0) // 0: fps, 1: ms, 2: mb
  document.body.appendChild(stats.dom)
  
  const updateStats = () => {
    stats.update()
    requestAnimationFrame(updateStats)
  }
  updateStats()
}

const createShaderMaterial = () => {
  return new THREE.ShaderMaterial({
    uniforms: {
      time: { value: 0 }
    },
    vertexShader: `
      varying vec2 vUv;
      void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `,
    fragmentShader: `
      uniform float time;
      varying vec2 vUv;
      void main() {
        gl_FragColor = vec4(abs(sin(time)), vUv.x, vUv.y, 1.0);
      }
    `
  })
}

import * as CANNON from 'cannon'

const initPhysics = () => {
  const world = new CANNON.World()
  world.gravity.set(0, -9.82, 0)

  // 创建物理物体
  const sphereBody = new CANNON.Body({
    mass: 5,
    position: new CANNON.Vec3(0, 10, 0),
    shape: new CANNON.Sphere(1)
  })

  // 同步物理和图形
  const animate = () => {
    world.step(1/60)
    mesh.position.copy(sphereBody.position)
    mesh.quaternion.copy(sphereBody.quaternion)
  }
}