vue把本地三维obj文件展示在前端页面上

要在Vue前端页面上展示本地的三维OBJ文件，你可以使用一些现有的三维库，如Three.js。以下是一种实现方法：

1. 首先，确保你已经引入了Vue和Three.js库。你可以通过在index.html文件中添加以下代码来引入它们：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.js"></script>

2. 在Vue组件中，创建一个容器元素来承载你的三维场景。可以使用`<canvas>`元素作为容器，如下所示：

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

3. 在Vue组件的`mounted`生命周期钩子函数中，初始化Three.js场景，并加载并展示OBJ文件。你可以使用`OBJLoader`加载器来加载OBJ文件，并将其添加到场景中。

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

export default {
  mounted() {
    const renderer = new THREE.WebGLRenderer({ canvas: this.$refs.canvas });
    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

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

    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
    animate();
  }
};
</script>

确保将`path/to/your/obj/file.obj`替换为你的本地OBJ文件的路径。

4. 最后，在你的Vue组件中使用上述代码。例如，将其放在一个名为`ThreeDViewer`的组件中：

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

<script>
// 上述代码
</script>

<style>
canvas {
  width: 100%;
  height: 100%;
}
</style>

这样，你就可以在Vue前端页面上展示本地的三维OBJ文件了。