Being new to VueJs and Three, my code is mostly just copied and pasted. I am trying to figure out how to load a 3D file (.obj) and its corresponding material file (.mtl) into a Vue component. I have already installed Three.js and imported the necessary 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);})
//MTLLoader
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>Currently, I am only seeing a black square and receiving the error "THREE.Object3D.add: object not an instance of THREE.Object3D." Also, it seems like the MTLLoader is not loading anything as the console displays an object with many values set to 0 or undefined.
Additionally, I am getting numerous warnings indicating that "THREE.OBJLoader: Unexpected line: "" as if OBJLoader is returning HTML content instead of a 3D image.