当前位置：首页 > VUE

vue实现gltf文件上传

2026-01-21 07:40:37VUE

实现 GLTF 文件上传的步骤

环境准备
确保项目中已安装 vue 和 three.js，用于加载和渲染 GLTF 文件。若需文件上传功能，可引入 axios 或其他 HTTP 库。

安装依赖
通过 npm 或 yarn 安装必要依赖：

vue实现gltf文件上传

npm install three @types/three axios

文件上传组件
创建一个 Vue 组件处理文件选择和上传：

vue实现gltf文件上传

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept=".gltf,.glb" />
    <button @click="uploadFile">上传</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedFile: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
    },
    async uploadFile() {
      if (!this.selectedFile) return;

      const formData = new FormData();
      formData.append('file', this.selectedFile);

      try {
        const response = await axios.post('/api/upload', formData, {
          headers: { 'Content-Type': 'multipart/form-data' }
        });
        console.log('上传成功:', response.data);
      } catch (error) {
        console.error('上传失败:', error);
      }
    }
  }
};
</script>

后端接口
确保后端提供文件上传接口（示例为 Node.js Express）：

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('file'), (req, res) => {
  res.json({ message: '文件已接收', file: req.file });
});

app.listen(3000, () => console.log('服务器运行中'));

加载 GLTF 文件
使用 three.js 的 GLTFLoader 加载并显示上传的 GLTF 文件：

<template>
  <div ref="container"></div>
</template>

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

export default {
  mounted() {
    this.initScene();
  },
  methods: {
    initScene() {
      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);
      this.$refs.container.appendChild(renderer.domElement);

      const loader = new GLTFLoader();
      loader.load(
        '/path/to/uploaded/model.gltf',
        (gltf) => {
          scene.add(gltf.scene);
        },
        undefined,
        (error) => {
          console.error('加载失败:', error);
        }
      );

      camera.position.z = 5;
      const animate = () => {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      };
      animate();
    }
  }
};
</script>