Blender Material (Gradient Texture, Color Ramp, Glossy BSDF) won't show up

Questions
, , ,
1

I’m a bit of a newbie in javascript and blender, but JUST started on Three.js.

I’m currently trying to import a blender (glb) file to a scene containing simple lightning and background color. Since my blender object already has some shading and I’ve read that the glTF loader can open more complex shading I just exported the glb and loaded in the javascript/Three.js. The simple shapes which contain Principled BSDF appear just fine.

` var loader = new THREE.GLTFLoader();

loader.load('instrumento1novo.glb', handle_load);


var mesh;

function handle_load(gltf) {

    console.log(gltf);
    mesh = gltf.scene;
    console.log(mesh.children[0]);
    mesh.children[0].material = new THREE.MeshLambertMaterial();
    	scene.add( mesh );
    gltf.animations; // Array<THREE.AnimationClip>
    gltf.cameras; // Array<THREE.Camera>
    gltf.asset;
    mesh.position.z = -10;
}`

perspective
perspective1920×1080 220 KB
should look like this

Anotação 2020-02-12 151612
Anotação 2020-02-12 1516121366×804 273 KB
shaders

Screen Shot 2020-02-12 at 20.22.13
Screen Shot 2020-02-12 at 20.22.131280×762 12.2 KB
how it looks on html

File here:
instrumento1novo.glb (1.8 MB)

I’ve used glTF Viewer and the same shit happens. Also lots of errors (116 total) not having to do with shading, but that’s for another topic. Is it primarily a code/3D issue or glTF won’t load this materials?

2

In general, many of the material node configurations Blender allows cannot be exported to any standard format. They are specific to Blender, and can only be rendered in Blender. See this article for background on the problem: https://blender.stackexchange.com/questions/57531/fbx-export-why-there-are-no-materials-or-textures.

When exporting to glTF, use the Principled BSDF node in Blender and follow the guidelines here: https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html. This particular material type is well-supported in Blender, fits well into glTF, and fits into the PBR material systems in modern engines. For something like a color ramp, you’ll likely need to convert it to a texture or vertex colors, or re-create that particular part in your code after loading the model.

Baking a diffuse map in Blender might also be an easy escape hatch, on this particular example.

2 Likes
3

(looking at the blender screenshot) is this going to be a sort of the game where you can pet those creatures? can I get on alpha test list?

4 Likes
4

LOL
Oh, sorry for the disappointment: Couple of people also mistook this for a ‘fish’ or pet (and it’s ok, it’s supposed to be ambiguous). It’s actually part of a series of imaginary instruments (outer-space or outworldly, alien-like), this one being kind of a saxophone. I would later do each specific sounding for them (a musician will help me in this). Since it’s experimentation, I still don’t have a clear view on how to turn this into a game properly.

2 Likes