GLB files exported from Blender not loading in Three.js

Questions
1

In the ‘mario.glb’ file, you can clearly see the texture using a glb viewer. However, when rendering in Three.js, it does not work at all! Every solution i’ve tried seems to not work. Here’s a screenshot from the gITF viewer:

Screenshot 2023-06-28 at 8.12.11 PM
Screenshot 2023-06-28 at 8.12.11 PM979×760 19 KB

Heres how it looks on page:
Screenshot 2023-06-28 at 8.12.41 PM
Screenshot 2023-06-28 at 8.12.41 PM514×598 645 Bytes

And heres my code:
`import * as THREE from ‘three’;
import { OrbitControls } from ‘three/addons/controls/OrbitControls.js’;
import { GLTFLoader } from ‘three/addons/loaders/GLTFLoader.js’;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

scene.background = new THREE.Color(0xFFFFFF);

const controls = new OrbitControls(camera, renderer.domElement)

const loader = new GLTFLoader();

loader.load( ‘mario.glb’, function ( gltf ) {
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );

camera.position.z = 7;

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

animate();
`

2

you don’t have any lights in the scene by the looks of your code :thinking:

1 Like
3

If you’re trying to make a material that doesn’t require lighting (“unlit” or “shadeless”), you can connect color nodes or image texture nodes in Blender directly to the Surface socket on the Material Output node.

1 Like
4

Ah, ok. However, i’m pretty new to Three.js, how would you add lights to fix this?

5

take a look through the documentation on lights, it depends on the lighing setup you’d like to use, you can use environmental lighting or using the most minimal setup with directional and other inbuilt lights…

const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set(30,90,60)
scene.add( directionalLight );
6

I added your code and it worked perfectly first try! Thank you so much, your a lifesaver!

7

it’s just the Code Example from the DirectionalLight documentation, plus setting the position property… :wink:

8

Is there any way we could do this but the object has its own light so I don’t have to add directional lights everywhere?

9

yes, there’s a few ways, you should be able to use MeshBasicMaterial, or set the emissive property of MeshStandardMaterial to the color you require, or use a hdr environment map that emulates the type of lighing you want… +more ways but here’s a few to get you started…

10

Ok. I looked up but there are not that many docs, do you know how to do it? Sorry for asking so many questions

11

three.js is one of the most well documented js libraries on the web afaia… have a look at the env maps hdr loader example source code… this should point you in the right direction. again it depends on the aesthetic you’re after, can you elaborate on and share some references to the lighting you’d like to achieve in your scene? it may be as simple as changing your MeshStandardMaterial to a MeshBasicMaterial depending on your needs… like so…

loader.load( ‘mario.glb’, function ( gltf ) {
  gltf.scene.traverse( function ( child ) {
    if ( child.isMesh ) {
      const originalColor = child.material.color.getHex()
      child.material = new THREE.MeshBasicMaterial({color: originalColor})
    }
  })

  scene.add( gltf.scene );

}, undefined, function ( error ) {
console.error( error );
} );
12

Thank you!