[Beginner] Problems with GLTFLoader

[Ryouji]

Hello! I’ve begin to use three.js, and more particulary the gltf loader, but I have several problems after importing one my scenes.

I have this :

But I would to do this :

So what I need help with is :

• Why does my model is separated? (For information, I’ve worked on Cinema 4D and the original model have two selections of polygons, to differentiate colors, who are the same that the separation we see in the gltf export (first image).

• Where’s the light? I don’t see them in the export… (see the console on first image)

• I’ve made an animation where the big octahedron turn on himself and float. In C4D and the website, the animations have the same duration but, in the website, the model gently accelerates and suddenly slow down to match the duration. However, on C4D, its speed is constant.

I also put an environment hdri texture to the windows, but it don’t seem to be working either. But it’s not what’s more important.

Here’s the importation code (in first, a setupModels file, and in second, the file with the import of the GLTFLoader file) :

import { AnimationMixer } from '../../../vendor/three/build/three.module.js';

function setupModel(data) {
    const model = data.scene.children[0];
    const clip = data.animations[0];
    const light = data.scenes[0];
    
    const mixer = new AnimationMixer(model);
    const action = mixer.clipAction(clip);
    action.play();
//    action.startAt(2);
    
    model.tick = (delta) => mixer.update(delta);
    
    return model;
}

export { setupModel };

import { GLTFLoader } from '../../../vendor/three/examples/jsm/loaders/GLTFLoader.js';

import { setupModel } from './setupModels.js';

async function loadOctas() {
    const loader = new GLTFLoader();
    
    const [ octasData ] = await Promise.all([
        loader.loadAsync('./models/Octahedron_Activated.glb'),
    ]);
    
    console.log('OKUTA!', octasData);
    
    const octas = setupModel(octasData);
    
    return {
        octas,
    };
}

export { loadOctas };

Hope that I was understandable and that you can help me!

[Mugen87]

How does your asset look like if you import it with a different engine? E.g. BabylonJS:

https://sandbox.babylonjs.com/

[Ryouji]

Apparently it does the same thing… So the problem come by C4D, I suppose?
Is there something wrong?

[Mugen87]

I’m not familiar with C4D, sorry. But if other engines like BabylonJS or Sketchfab import the asset in the same way, it seems the C4D exporter has issues.

[Ryouji]

I’ve find an older plugin to export scene in gltf format and it “seems” to be working better.
But, however, I don’t have the lights of the original scene:

[Mugen87]

Are you sure that the C4D exporter supports lights?

[Ryouji]

I’ve try to import it in blender (wich I never used before) and there wasn’t any light too so I don’t think so (there’s no information about lights in their page about the gltf exporter so I thought it was “basically” within). I’ve try to put a light in my code but it does not seem to make effect too.

[Mugen87]

@Ryouji

I’ve try to export it in blender (wich I never used before) and there wasn’t any light too

Blender does support exporting punctual lights if you enable the respective checkbox:

@Ryouji

I’ve try to put a light in my code but it does not seem to make effect too.

That’s probably because of your material settings. Do you mind sharing the exported glTF asset in this thread?

[Ryouji]

Here’s the first file (with the model in two parts) :
Octahedron_Activated.glb (2.1 MB)

and here is the second visually black model:
The_Octahedron_Activated.glb (2.1 MB)

The two still have the animation problem, and I have to excuse : I wrote “export in blender” when I wanted to say “import (the gltf file) in blender” (that’s because I know that you can export light in gltf file with blender that I’ve tried).

[Mugen87]

Your material has a high metalness value (1) and a low roughness value (0.1). With this setup, normal lights will not noticeable affect the material. It’s very recommended to use an environment map in this case.

You can use the following three.js based glTF viewer to verify how the asset looks with an environment map. I’ve tested your second model (The_Octahedron_Activated.glb) and the result looks like so:

[Ryouji]

Thank you! That result the problem of not seeing anything!

I’ve try to separate the two selection (with one mesh for each) into two object and the result look like this :

With that and the environment map (with just hdri reflect), I should be able to approach the desired result (the third image in my first post), no?
(Now I have to find how to make one haha)

Lastly, the animation problem still unsolved…