How to load .obj and .mtl file into a Vue component while using Vue CLI 3

1
votes

I am a VueJs and Three begginer so the code I have is mainly from copy paste. I want to load a 3d file (.obj) and (.mtl) into a Vue component. I npm installed three and imported the loaders.

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

I am getting a black square and the error "THREE.Object3D.add: object not an instance of THREE.Object3D. "

Also I think MTLLoader is not loading anything since what I get in console through console.log is an object with the majority of values with 0 or undefined

Also getting lots of warnings saying THREE.OBJLoader: Unexpected line: "" as if OBJLoader is returning html content instead of a 3d image

1
htmlcssvue.jsthree.jsvue-cli-3

1 Answers

1
votes

The error is because you are loading in files from the three/examples/js/ folder, try loading all the loaders from the three/examples/jsm/ folder. Why you did it for the DDSLoader, but not the others I am not sure.

eg..
Change: 

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

EDIT:
Now you have edited the code in your question... the above answer is no longer valid :(

You wont see anything because you don't call renderer.render anywhere.

EDIT, Question changed again.
the line this.scene.add(x.this.scene ); is wrong.
It should be this.scene.add(x);

change: 

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

to

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