Getting error while adding an obj with Vue to the scene

Questions
1 
<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: 'Earth',
  data() {
    return {
    }
  },
  methods: {
  },
  mounted() {
      var camera, pos, controls, scene, renderer, geometry, geometry1, material;
      let vm = this;

      function init() {
        let container = document.getElementById('container');

        camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
        camera.position.z = 1;

        scene = new Three.Scene();

        var light = new Three.PointLight( 0xff0000, 1, 100 );
        light.position.set( 50, 50, 50 );
        scene.add( light );

        var objLoader = new OBJLoader();
        objLoader.load('obj', function(object) {
            scene.add(object)
        });

        var mtlLoader = new MTLLoader();
        mtlLoader.load('mtl', function(object) {
            scene.add(object)
        });

        renderer = new Three.WebGLRenderer({antialias: true});
        renderer.setSize(container.clientWidth, container.clientHeight);
        container.appendChild(renderer.domElement);

    }

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }

    init();
    animate();
  }
}
</script>```

[quote="maipo89, post:1, topic:49669, full:true"]
```

Hello everyone,
in Vue I get an error while trying to import an obj and his mtl file with the loaders. I can’t see the 3d plus I’ve got the error ‘THREE.Object3D.add: object not an instance of THREE.Object3D’.
Thank you for your help
[/quote]

2

The error message is correct. You load the MTL file and add it to the scene as if it is a 3D object. It is not. It is just a material.

When MTL file is loaded, it must be passed to the OBJ model via the method setMaterials.

1 Like
4

Solved with this code

var mtlLoader = new MTLLoader();
mtlLoader.load('mtl', function(materials) {
            materials.preload();
            var objLoader = new OBJLoader();
            objLoader.setMaterials( materials );
            objLoader.load('obj', function(object) {
                object.receiveShadow = true;
                model = object
                scene.add(model)
            });
        });