如何使用Vue CLI 3将.obj和.mtl文件加载到Vue组件中

Question

我是一名VueJs和三名初学者，所以我的代码主要来自复制粘贴。我想将3d文件（.obj）和（.mtl）加载到Vue组件中。我复制粘贴了一些代码，npm安装了三个并导入了加载程序。现在仅尝试加载.obj文件

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

<script>
import * as Three from 'three'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
export default {
  name: 'ThreeTest',
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null
    }
  },
  methods: {
    init: function() {
        let container = document.getElementById('container');
//camera
        this.camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
        this.camera.position.z = 1;
//scene
        this.scene = new Three.Scene();
//material      
        let material = new Three.MeshNormalMaterial();
//mesh
        this.mesh = new Three.Mesh(material);
        this.scene.add(this.mesh);
//obj loader
        new OBJLoader().load( 'ecoponto/public/maquina1.obj', function (x) {
        this.scene.add(x.this.scene );
        }, undefined, function ( error ) {console.error( error );} );
//renderer
        this.renderer = new Three.WebGLRenderer({antialias: true});
        this.renderer.setSize(container.clientWidth, container.clientHeight);
        container.appendChild(this.renderer.domElement);
          },

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

<style scoped>
#container{
    width: 600px;
    height: 400px;
}
</style>

我得到一个黑色正方形，并且错误无法读取未定义的属性” center”

有关如何将.obj和.mtl文件加载到我的组件中的任何帮助和提示，都将不胜感激。

Answer 1

错误是因为您正在从three/examples/js/文件夹中加载文件，请尝试从three/examples/jsm/文件夹中加载所有加载程序。为什么为DDSLoader而不是其他人不确定我为什么这样做。

例如更改：

import { OBJLoader } from 'three/examples/js/loaders/OBJLoader.js';
import { MTLLoader } from 'three/examples/js/loaders/MTLLoader.js'
import { DDSLoader } from 'three/examples/jsm/loaders/DDSLoader.js';

to

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
import { DDSLoader } from 'three/examples/jsm/loaders/DDSLoader.js';

编辑：现在，您已经在问题中编辑了代码...上面的答案不再有效:​​(

您不会看到任何东西，因为您没有在任何地方调用renderer.render。