vue+three.js导入obj模型不显示问题

最新推荐文章于 2024-06-23 16:35:00 发布

Sandy_Star

最新推荐文章于 2024-06-23 16:35:00 发布

阅读量7.4k

点赞数 12

分类专栏： vue.js 模型加载文章标签： vue three.js obj 模型

本文链接：https://blog.csdn.net/weixin_48931875/article/details/114998907

版权

本文介绍了在使用Vue+Three.js构建3D页面时遇到的obj模型无法显示的问题。作者通过分析目录结构、模型导入及相机设置，发现模型实际已加载但因相机位置不当导致不可见。解决方案是确保模型存于静态资源目录，正确导入，并调整相机位置，如使用轨道控制器查看场景。

摘要由CSDN通过智能技术生成

前言：最近用vue+threre.js实现3d页面的时候，发现导入obj模型时模型在页面中显示不出来的问题。也纠结了好几天，换了好几种方式去试，到底是模型有问题还是代码有问题？真是个令人头痛的问题啊！

一、关于obj模型存放的目录

这里我用的vue是4.x版本的。
在vue中存放obj模型必须要放在静态资源（static）文件下，否则会出错。
由于4.x版本的vue没有static这个文件夹，但是他的静态资源文件夹是叫public，这样我在public下面创建一个文件夹叫static，再在static文件夹下存放的我的obj模型文件以及mtl文件。
文件目录如下：

二、关于obj模型的导入

直接上代码吧：

<template>
    <div id="academy">
    </div>
</template>

<script>
import * as THREE from "three";
import {
   OBJLoader,MTLLoader} from "three-obj-mtl-loader";
const OrbitControls = require('three-orbit-controls')(THREE);
export default {
   
    name:'academy',
    data(){
   
        return{
   
        }
    },
    methods: {
   
    /**加载模型 */
    loadPlant() {
   
      let that = this;
      let objLoader = new OBJLoader();
      let mtlLoader = new MTLLoader();
      mtlLoader.load("/static/academic/bluegrayhome.mtl", function(materials) {
   
        // materials.preload();
        objLoader.setMaterials(materials);
        objLoader.load(
          "/static/academic/bluegrayhome.obj",
          function(obj) {
   
            obj.position.set(0, 0,0);
            obj.scale.set(0.01, 0.01, 0.01);
            that.scene.add(obj);
          },
        //   called while loading is progressing
          function(xhr) {
   
            console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
          },
        //   called when loading has errors
          function(error) {
   
            console.log("An error happened");
          }
        );
      });
    },
  },
  mounted() {
   
    this.loadPlant();
  }
}
</script>