在Vue3中轻松加载GLB模型——使用Three.js的正确姿势

随着WebGL技术的不断发展，Three.js作为一款强大的3D可视化库，可以加载各种模型。本文将带领大家了解如何在Vue3项目中使用Three.js加载GLB模型。附代码。

一、准备工作

1、安装Three.js

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

npm install three

二、在Vue3中使用Three.js加载GLB模型

1、创建Three.js场景

2在Vue3项目中，首先创建一个Three.js场景。以下是一个简单的场景搭建示例：

// src/components/ThreeScene.vue

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

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

export default {
  name: 'ThreeScene',
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      glbModel: null,
    };
  },
  mounted() {
    this.initThree();
  },
  methods: {
    initThree() {
      // 创建场景
      this.scene = new THREE.Scene();

      // 创建相机
      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      this.camera.position.z = 5;

      // 创建渲染器
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.$refs.threeJsContainer.appendChild(this.renderer.domElement);

      // 加载GLB模型
      this.loadGLBModel();

      // 渲染场景
      this.animate();
    },
    loadGLBModel() {
      const loader = new GLTFLoader();
      loader.load('/path/to/your/model.glb', (gltf) => {
        this.glbModel = gltf.scene;
        this.scene.add(this.glbModel);
      });
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.renderer.render(this.scene, this.camera);
    },
  },
};
</script>

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

2、加载GLB模型

在loadGLBModel方法中，使用GLTFLoader来加载GLB模型。将模型路径替换为你的GLB模型文件路径。

3、渲染场景

 在animate方法中，使用requestAnimationFrame循环渲染场景，使模型动起来。

接下来，你还可以根据自己的需求，为模型添加动画、交互等功能，打造更加丰富的3D场景。希望本文对你有所帮助。