vue 读取obj文件

Vue 本身并不支持读取 obj 文件，但可以使用第三方库来实现。

一个常用的库是 Three.js，它提供了加载 obj 文件的功能。你可以使用 npm 安装 Three.js：

npm install three

然后在 Vue 中引入该库：

import * as THREE from 'three';

接下来，你可以使用 Three.js 提供的 OBJLoader 来加载 obj 文件。你需要先创建一个场景和相机，然后将加载的模型添加到场景中。下面是一个简单的示例代码：

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

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

export default {
  mounted() {
    // 创建场景和相机
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    this.$refs.container.appendChild(renderer.domElement);

    // 加载 obj 文件
    const loader = new OBJLoader();
    loader.load('/path/to/your/obj/file.obj', (obj) => {
      // 将模型添加到场景中
      scene.add(obj);
    });

    // 渲染场景
    const animate = function () {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    };
    animate();
  }
};
</script>

在这个示例中，我们创建了一个场景和相机，并使用 Three.js 提供的 OBJLoader 加载了一个 obj 文件。加载成功后，我们将模型添加到场景中，并使用渲染器将场景渲染到页面上。

注意，这个示例中使用的是 Three.js 的 ES6 模块，如果你的浏览器不支持 ES6 模块，你需要使用 CommonJS 或 AMD 模块来引入 Three.js。同时，你也需要将 OBJLoader.js 文件复制到你的项目中，并修改路径以正确引入。