Obj model visible but doesn't show material/texture

Questions
,
1

Hi all, this is my first time using threeJS and I’m having some troubles applying materials/textures to my object.

I’m trying to load a planet, the 3D model is taken from internet and I have the following formats available: .blend .c4d .fbx .ma .max .obj .mtl. I also have a ‘Textures’ folder with Bump/Clouds/Diffuse/Dust_2k.png and I have a ‘Resolution difference.png’ file.

Since I’m a beginner I didn’t really know where to start so after some googling I figured using the .obj and .mtl files would be my best shot. I got the model to show but it doesn’t have any material/texture… it’s just a shape

image
image3360×2100 397 KB

The weird thing is, I’m not getting any errors

Full code 
import * as THREE from 'three'
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'

let camera, scene, renderer, cube

function init() {
    scene = new THREE.Scene()
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

    renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)



    const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4)
    scene.add(ambientLight)

    const pointLight = new THREE.PointLight(0xffffff, 0.8)
    camera.add(pointLight)
    scene.add(camera)


    const mtlLoader = new MTLLoader()
    mtlLoader.setResourcePath('assets/')
    mtlLoader.setPath('assets/')
    mtlLoader.load('Mars 2K.mtl', materials => {
        materials.preload()

        const objLoader = new OBJLoader()
        objLoader.setMaterials(materials)

        objLoader.load('assets/Mars 2k.obj', object => {
            scene.add(object)
        })
    })


    camera.position.z = 6
}


function animate() {
    requestAnimationFrame(animate)

    renderer.render(scene, camera)
}

function updateScene() {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
}

window.addEventListener('resize', updateScene)

init()
animate()

    const mtlLoader = new MTLLoader()
    mtlLoader.setResourcePath('assets/')
    mtlLoader.setPath('assets/')
    mtlLoader.load('Mars 2K.mtl', materials => {
        materials.preload()

        const objLoader = new OBJLoader()
        objLoader.setMaterials(materials)

        objLoader.load('assets/Mars 2k.obj', object => {
            scene.add(object)
        })
    })

My obj + mtl files look like this:

image
image3360×2100 1020 KB

image
image3360×2100 762 KB

Since this is just a hobby project I’ll include my github repo if it’s any help: https://github.com/WesselSmit/planet-weather

2

Your MTL file does not contain any map entries meaning you export to OBJ/MTL without any textures. Hence, the rendered image does look like expected.

If you model the planet in Blender, I suggest you export to the more modern glTF instead (which is actually the recommended 3D format of three.js). I attach the resulting asset in this topic.

Mars 2K.glb (2.6 MB)

3

It worked! Marked as solution. Thanks for the quick response and everything you’re doing for the community!