如何使用Vue3+Vite+ThreeJS创建3D场景并实现移动、跳跃和碰撞检测

2023-12-13 23:32:00

引言

在现代Web开发中，3D技术的应用越来越广泛，从游戏开发到虚拟现实，再到增强现实，3D技术为用户提供了沉浸式的体验。本文将介绍如何使用Vue3、Vite和ThreeJS创建一个交互式的3D场景，并实现角色的移动、跳跃和碰撞检测。

环境搭建

首先，我们需要搭建开发环境。使用Vite创建一个新的Vue3项目非常简单：

npm init vite@latest my-vue-app --template vue
cd my-vue-app
npm install

接下来，安装ThreeJS库：

npm install three

创建3D场景

在Vue3组件中，我们可以开始创建3D场景。首先，我们需要初始化ThreeJS的场景、相机和渲染器。

<template>
  <div ref="threeContainer" class="three-container"></div>
</template>

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

const threeContainer = ref(null);

onMounted(() => {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  threeContainer.value.appendChild(renderer.domElement);

  camera.position.z = 5;

  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }

  animate();
});
</script>

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

添加3D模型

为了让场景更加生动，我们可以添加一些3D模型。ThreeJS提供了多种加载器来加载不同格式的模型，这里我们使用GLTFLoader来加载一个简单的立方体。

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const loader = new GLTFLoader();
loader.load('path/to/box.gltf', (gltf) => {
  scene.add(gltf.scene);
});

实现角色移动和跳跃

为了使场景交互性更强，我们需要实现角色的移动和跳跃。可以通过监听键盘事件来实现这一功能。

const player = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({ color: 0x00ff00 }));
scene.add(player);

document.addEventListener('keydown', (event) => {
  switch (event.key) {
    case 'ArrowUp':
      player.position.y += 0.1;
      break;
    case 'ArrowDown':
      player.position.y -= 0.1;
      break;
    case 'ArrowLeft':
      player.position.x -= 0.1;
      break;
    case 'ArrowRight':
      player.position.x += 0.1;
      break;
    case ' ': // Spacebar for jump
      player.position.z += 0.1;
      break;
  }
});

碰撞检测

碰撞检测是3D游戏中不可或缺的一部分。我们可以使用ThreeJS的Raycaster来实现简单的碰撞检测。

const raycaster = new THREE.Raycaster();
const obstacles = [/* ... */]; // Array of obstacle meshes

function checkCollision() {
  raycaster.set(player.position, new THREE.Vector3(0, -1, 0));
  const intersects = raycaster.intersectObjects(obstacles);
  if (intersects.length > 0) {
    console.log('Collision detected!');
    // Handle collision
  }
}

function animate() {
  requestAnimationFrame(animate);
  checkCollision();
  renderer.render(scene, camera);
}