Currently, I am working with Nuxtjs and Threejs. The website's default script displays the geometry and animation correctly. However, I need to use a custom model, so I installed OBJLoader and MTLLoader using npm, which were successfully installed.
<template>
<div id="three" class="three">
</div>
</template>
Script snippet:
<script>
import * as Three from 'three'
import { MTLLoader, OBJLoader } from 'three-obj-mtl-loader'
export default {
data() {
return {
camera: null,
scene: null,
renderer: null,
mesh: null,
mtl: null,
obj: null
}
},
methods: {
init: function() {
let container = document.getElementById('three')
this.camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10)
this.camera.position.z = 1
this.scene = new Three.Scene()
this.mtl = new MTLLoader()
this.obj = new OBJLoader()
this.mtl.load('/mesh/sources/Coffee Hot Cup Sketchfab.mtl', (materials) => {
materials.preload()
this.obj.setMaterials(materials)
this.obj.load('/mesh/sources/Coffee Hot Cup Sketchfab.obj', (object) => {
this.scene.add(object)
})
})
this.renderer = new Three.WebGLRenderer({antialias: true, alpha: true})
this.renderer.setSize(container.clientWidth, container.clientHeight)
this.renderer.setClearColor(0x000000, 0)
this.renderer.render(this.scene, this.camera)
container.appendChild(this.renderer.domElement)
}
},
mounted() {
this.init()
}
}
</script>
Although the object is reported to have loaded successfully, my custom model is not appearing. It seems strange because there are no errors indicating missing paths. How can I resolve this issue? Thank you!