0

i'm using Nuxtjs + Threejs. Default script from the website shows the geometry and the animation properly. I want to use custom model so i install OBJLoader and MTLLoader using npm, the packages installed successfully. template:

<template>
  <div id="three" class="three">

  </div>
</template>

Script code:

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

The problem is, when i want to use my custom model the object is not showing but it says the object loaded successfully. I don't know, if its from the path it should be showing not found error but its not. How do i fix it? Thanks!

17
  • I would always always use under bars "_" instead of spaces. I'm not sure that will fix, but at least if you try it, it would remove one bug case. Jan 23, 2019 at 15:38
  • @JasonFoglia i changed it using -, but nothing changes.. Jan 23, 2019 at 15:46
  • What is in the dev tools console? Jan 23, 2019 at 15:46
  • 1
    are you sure the camera is pointing at it? are you sure you are not zoomed in too much? also there are no lights in the code you posted.
    – gaitat
    Jan 23, 2019 at 16:03
  • @RandyCasburn THREE.WebGLRenderer 100 and OBJLoader: 562.817138671875ms, nothing else.. Jan 23, 2019 at 16:03

1 Answer 1

0

Make sure that you have set the material to be double-sided. I had similar problem with Unity game engine. Sometimes the loaded files were missing some textures. Making sure of double-sidedness of my object materials usually helped!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.