Как загрузить файлы .obj и .mtl в компонент Vue при использовании Vue CLI 3

Question

Я начинающий VueJs и Three, так что мой код в основном из копирования пасты. Я хочу загрузить 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: объект не является экземпляром THREE.Object3D."

Также я думаю MTLLoader ничего не загружает, так как то, что я получаю в консоли через console.log, является объектом с большинством значений с 0 или неопределенным

Также получаю много предупреждений, говоря THREE.OBJLoader: неожиданная строка: "" как будто OBJLoader возвращает содержимое html вместо трехмерного изображения

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.

EDIT , Вопрос снова изменился.
строка 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);
})