CODEWITHSUNDEEP
javascriptthree.jstexture-mappinggltf
Limbo
Limbo

Reputation: 11

ThreeJS/GLTF - Normal and Roughness textures not showing up

I'm trying to load a GLTF file using ThreeJS, but I'm having trouble getting the normal and roughness textures to show up on my model. When I console.log the gltf object, I can see that the normal and roughness textures are in the right place (scene.children[0].children[0].material.normalMap.name = "shoe_normal", which is the name of the texture), but when the model is shown on the canvas, only the base color texture appears.

Here's my code for loading the GLTF file:

function init(id) {
  showLoading();
  scene = new THREE.Scene();
  light = new THREE.AmbientLight(0xffffff);
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  boundingBox = new THREE.Box3();

  canvas = document.getElementById(id);

  renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    preserveDrawingBuffer: true,
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor("#f2f2f2");

  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableZoom = true;
  controls.enableRotate = true;
  controls.enableDamping = true;
  controls.dampingFactor = 0.05;

  scene.add(light);
}


function load_gltf(gltf_url) {
  let loader = new GLTFLoader();
  loader.load(gltf_url, (gltf) => {
    model = gltf;
    scene.add(gltf.scene);
    boundingBox.setFromObject(gltf.scene);

    let size = boundingBox.getSize(new THREE.Vector3());
    let center = boundingBox.getCenter(new THREE.Vector3());
    let distance = Math.max(
      MIN_DISTANCE,
      Math.min(size.length() / 2, MAX_DISTANCE)
    );
    camera.position.set(center.x, center.y, center.z - 4 + distance);
    camera.lookAt(center);
    groups = gltf.scene.children[0].children;

    render();
  });
}

Also, how the model looks along with the object showing the textures and how it's supposed to look: how it looks how its supposed to

I've tried to search for solutions, but none of them seem to work for me. I've also tried setting the material to MeshStandardMaterial and manually assigning the normal and roughness textures to the material, but it still doesn't work.

Upvotes: 1

Views: 635

Answers (1)

Don McCurdy
Don McCurdy

Reputation: 11980

Your scene contains only ambient lights, which means that the shading will be identical regardless of what angle you're viewing the model from. Normal and roughness maps are related to reflected light, and inherently they require some differences in lighting throughout the scene for there to be any visible reflection.

In general, when using any PBR materials (which most glTF models do) you should add an environment map. Most of the three.js glTF examples include this. You can provide your own HDR or EXR file, or the simplest method is with THREE.RoomEnvironment:

import * as THREE from 'three';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

const environment = new RoomEnvironment();
const pmremGenerator = new THREE.PMREMGenerator( renderer );

scene.environment = pmremGenerator.fromScene( environment ).texture;
environment.dispose();

See the three.js loader / gltf / compressed example in three.js r150.

Upvotes: 1

Related Questions