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

Question

我是 VueJs 和三个初学者，所以我的代码主要来自复制粘贴。 我想将 3d 文件 (.obj) 和 (.mtl) 加载到 Vue 组件中。 我 npm 安装了三个并导入了加载器。

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

<script>
import * as Three from 'three'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
export default {
  name: 'ThreeTest',
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
      publicPath: 'process.env.BASE_URL',
      loader: null,
      loader2: 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();
//obj loader
        this.loader = new OBJLoader();
        this.loader.load(`${this.publicPath}maquina1.obj`, (loadedObject) => {
        this.scene.add(loadedObject)
        console.log(loadedObject);})
//MMTLoader
        this.loader2 = new MTLLoader();
        this.loader2.load(`${this.publicPath}maquina1.mtl`, (loadedObject) => {
        this.scene.add(loadedObject)
        console.log(loadedObject);})
// Create and add AmbientLight.
//let light = new THREE.AmbientLight(0x404040); // soft white light
//this.scene.add(light);

//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>

我得到一个黑色方块和错误“THREE.Object3D.add: object not an instance of THREE.Object3D.”

另外我认为 MTLLoader 没有加载任何东西，因为我通过 console.log 在控制台中得到的是一个对象，其中大多数值为 0 或未定义

还收到很多警告说 THREE.OBJLoader: Unexpected line: "" 好像 OBJLoader 正在返回 html 内容而不是 3d 图像

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';

到

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。

编辑，问题又变了。
this.scene.add(x.this.scene ); 是错误的。
应该是this.scene.add(x);

改变：

new OBJLoader().load( 'ecoponto/public/maquina1.obj', function (x) {
  this.scene.add(x.this.scene );
}, undefined, function ( error ) {console.error( error );} );

到

let loader = new OBJLoader();
loader.load('ecoponto/public/maquina1.obj', (loadedObject) => {
  this.scene.add(loadedObject);
})