Struggle with GLTF and lighting

Questions
1

Hi !
I’m Maxime ! I’m quite new here but I already have few questions, I searched on Internet and the forum but all the answer I saw were a little bit complex for my problem.

So…

  1. I made a 3D model on Cinema4D, with Materials and textures and I decided to remake the lighting in three.js (Because I saw C4D was not correctly exporting lights…)
  2. I exported to GLTF
  3. I passed hours to figure why my materials were not showing but I found out I needed to make PBR Materials.
  4. I put Directional Light and Spotlight with anti-aliasing, etc.

Here I am, after trying to recreate examples, I have several problems with my lightings and I really don’t know how to resolve them…

Here the render with cinema4D, the result I would like :

Scene 1 - Copie
Scene 1 - Copie1236×696 127 KB

Here the render with threeJS :

Sans titre
Sans titre1887×893 216 KB

Here my scene in C4D : I used a big square to make and infinite and shadows for the tree with a specific color

scene
scene874×609 143 KB

So could you explain to me (like I was 5), why :

  1. I see kind of shadows on the right ? Is it because I have a big square around to make my background ?
  2. Why my material is so dark when I check the reflectance button in C4D? And so…
  3. Have you any idea how to make a Reflectance Material with C4D?
  4. Which light are essentials ?

Here my code :

 const scene = new THREE.Scene();
scene.background = new THREE.Color(0xFFD500);

const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 5000);
const windowHalf = new THREE.Vector2(window.innerWidth / 2, window.innerHeight / 2);

//INIT POSITION
camera.position.set(-1.2, 1.3, 10)
camera.rotation.set(0, 0.15, 0)
scene.position.set(0, 0, 0)
scene.rotation.set(0, 0, 0)


// LOAD OBJECT

let loader = new THREE.GLTFLoader();
loader.load('models/modeles15.glb', function(gltf) {
    let car = gltf.scene;
    car.traverse(n => {
        if (n.isMesh) {
            n.castShadow = true;
            n.receiveShadow = true;
            if (n.material.map) n.material.map.anisotropy = 16;
        }
    })
    car.position.y = 1
    car.position.x = -2
    car.rotation.y = 14
    scene.add(car);
    animate();
})

// LIGHT //

const light_2 = new THREE.DirectionalLight(0xFFFFFF);
light_2.position.set(10, 10, 20)
light_2.intensity = 3
light_2.castShadow = true;
scene.add(light_2)

const ambient = new THREE.SpotLight(0xFFD500, 2);
ambient.castShadow = true;
ambient.position.set(0, 100, 10)
ambient.shadow.bias = -0.0001;
ambient.shadow.mapSize.width = 1024 * 4;
ambient.shadow.mapSize.height = 1024 * 4;
scene.add(ambient);

const renderer = new THREE.WebGLRenderer({
    antialias: true
});

renderer.toneMappingExposure = 2.3
renderer.shadowMap.enabled = true;
renderer.gammaFactor = 0;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function animate() {

    renderer.render(scene, camera);

}

Last thing : sorry for my english !

Thank you for your help !

2

Do you mind sharing the glTF asset in this thread?

For starters setup the renderer like so:

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.outputEncoding = THREE.sRGBEncoding;
document.body.appendChild( renderer.domElement );
3

Not at all !

Thank’s for the first help :slight_smile:

Also, when I use the online glTF viewer and I select model viewer in “Environment”, it seems to add the reflection to my model…

Here the model :
modeles15.glb (1.3 MB)

4

Okay, you will get much better results if you add an HDR environment map to your scene. Try it with the same setup like in this glTF example: three.js webgl - glTF loader

When applying an environment map to Scene.environment, you don’t necessarily need further lights in your scene. This is something you have to check out. Besides, when using HDR, it’s important to configure tone mapping. So enhance the renderer configuration with:

renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
5

Oh thank’s a lot @Mugen87 ! It works for the reflexion, I need to work on my textures but It’s a good start !

Sans titre
Sans titre1759×935 174 KB

If I understand, the reflexion needs something to reflect in, that’s why we use an Environment, right ?

Also, you said I don’t need further lights, but if I want shadows I need to right ?
Except, I tried to add a light, and nothing appeared.

  1. Create light with castShadow
  2. Mesh with receive shadow
  3. Enable shadowMap for the renderer

I forgot something or the shadowMap is overwrited by the Environment?

Thank’s again, you are very helpful ! :slight_smile:

6

Hi!

Yes, the environment map is needed for reflections. And yes, you need a shadow casting light if you want real time shadows in your scene even when using an hdr env map.

1,2,3 are correct… (you need meshes to castShadows as well, but you got that in your code)

Depending on your scenes size you should check the shadow camera to fit your meshes.
It is good practice to keep the shadow area as small as possible (resulting in smaller shadow maps)
You can use light.shadow.left, light.shadow.right and so on to set the frustrum…and even use helpers to see it.
Shadow casting lights are expensive. Try to use as few as possible. Maybe just the DirectionalLight. Since it is considered to be faster than Spotlights (if the look is ok for you. Spotlights of course cast different shadows) But also, this is depending on how much is going on.

If you are new to the PBR workflow have a look at your metal surfaces if they are set to metalness = 1 cause they will respond differently to the env map. Metalness is mostly 0 or 1. C4D likes to export between values…
For me, I do not trust C4Ds gltf export blindy. Anyways materials will not look exactly the same in different “engines”, so I like to set the materials the way that threejs makes them look best.

For a little bit more quality you should check out the PMREMGenerator which helps getting better results on rough materials.

7

Hi,
I took my time to understand and to post a message.

I just want to tell you thank you because It helped me ! I think I will post again later but this is perfect for the moment.

Thank you @Mugen87 and @Drumstructor .
Good day to you !