Vue 3 使用 Three.js 加载 .obj 模型示例

引言

在现代前端开发中，结合 Vue.js 和 Three.js 创建 3D 应用变得越来越流行。Vue.js 提供了一个灵活的框架来构建用户界面，而 Three.js 则是一个强大的 3D 渲染库，能够帮助开发者在网页中创建复杂的三维场景。本教程将详细介绍如何在 Vue 3 中使用 Three.js 加载和展示 .obj 模型，并提供一些实际应用的示例。

环境准备

安装 Vue 3

首先，我们需要确保系统中已经安装了 Node.js。接下来，通过命令行工具创建一个新的 Vue 3 项目。

bashCopy Code
npm install -g @vue/cli
vue create vue-three-example

在创建过程中，选择 Vue 3 配置。

安装 Three.js

进入项目目录后，安装 Three.js：

bashCopy Code
cd vue-three-example
npm install three

创建 Vue 3 项目

在 src 目录中，我们将创建一个新的组件来处理 Three.js 的初始化和模型加载。新建一个文件 ThreeScene.vue。

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

<script>
import * as THREE from 'three';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';

export default {
  name: 'ThreeScene',
  mounted() {
    this.initThree();
  },
  methods: {
    initThree() {
      // 初始化场景、相机和渲染器
    }
  }
};
</script>

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

加载 .obj 模型

使用 OBJLoader 加载模型

使用 Three.js 的 OBJLoader 能够方便地加载 .obj 文件。在 initThree 方法中，我们将添加代码来加载模型。

javascriptCopy Code
initThree() {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  
  renderer.setSize(window.innerWidth, window.innerHeight);
  this.$refs.threeContainer.appendChild(renderer.domElement);

  const loader = new OBJLoader();
  loader.load('path/to/your/model.obj', (object) => {
    scene.add(object);
  });

  camera.position.z = 5;

  const animate = () => {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  };

  animate();
}

设置场景、相机和渲染器

在上述代码中，我们创建了场景、相机和渲染器。我们还使用 OBJLoader 来加载模型，并将其添加到场景中。注意替换 path/to/your/model.obj 为你的模型路径。

示例：展示 3D 模型

为了更好地展示模型，我们可以添加光源并进行简单的交互。以下是完整的 ThreeScene.vue 示例代码：

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

<script>
import * as THREE from 'three';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';

export default {
  name: 'ThreeScene',
  mounted() {
    this.initThree();
  },
  methods: {
    initThree() {
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer({ antialias: true });
      
      renderer.setSize(window.innerWidth, window.innerHeight);
      this.$refs.threeContainer.appendChild(renderer.domElement);

      const light = new THREE.DirectionalLight(0xffffff, 1);
      light.position.set(0, 1, 1).normalize();
      scene.add(light);

      const loader = new OBJLoader();
      loader.load('path/to/your/model.obj', (object) => {
        scene.add(object);
      });

      camera.position.z = 5;

      const animate = () => {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      };

      animate();
    }
  }
};
</script>

<style scoped>
.three-container {
  width: 100%;
  height: 100vh;
  background-color: #cccccc;
}
</style>

交互与动画

为了让 3D 模型更加生动，我们可以添加交互功能，比如旋转、缩放等。使用鼠标事件，可以实现这些效果。

javascriptCopy Code
initThree() {
  // ... 上述代码 ...

  let isDragging = false;
  let previousMousePosition = { x: 0, y: 0 };

  const onMouseDown = (event) => {
    isDragging = true;
  };

  const onMouseMove = (event) => {
    if (isDragging) {
      const deltaMove = {
        x: event.offsetX - previousMousePosition.x,
        y: event.offsetY - previousMousePosition.y
      };

      object.rotation.y += deltaMove.x * 0.01;
      object.rotation.x += deltaMove.y * 0.01;
    }

    previousMousePosition = {
      x: event.offsetX,
      y: event.offsetY
    };
  };

  const onMouseUp = () => {
    isDragging = false;
  };

  this.$refs.threeContainer.addEventListener('mousedown', onMouseDown);
  this.$refs.threeContainer.addEventListener('mousemove', onMouseMove);
  this.$refs.threeContainer.addEventListener('mouseup', onMouseUp);
}

总结

本教程展示了如何在 Vue 3 环境中使用 Three.js 加载和展示 .obj 模型。通过结合这两种技术，开发者可以创建丰富的 3D 用户体验。随着对 Three.js 的进一步探索，你可以实现更复杂的场景、材质以及动画效果，甚至可以结合物理引擎来增加互动性。希望这个示例能为你未来的项目提供启发！

以上是关于在 Vue 3 中使用 Three.js 加载 .obj 模型的基础示例。你可以根据自己的需求扩展功能，例如增加更多的灯光、材质效果，或者与其他库结合使用。继续探索，创造出更精彩的 3D 应用吧！