Importing fbx with textures results in a near trasparent object

Questions
1

Using: Three version: 0.167.1

When importing the fbx like normal:

const FBXloader = new FBXLoader();

	for (let i = 0; i < monuments.length; i++) {
		Status.stepProgress({ progress: 0 }, `Pulling ${monuments[i].file}`);
		FBXloader.load(
			`/three/models/${monuments[i].file}`,
			(model) => {
				model.scale.set(0.01, 0.01, 0.01);
				group.add(model);
			},
			(xhr) => {
				Status.stepProgress(
					{ progress: xhr.loaded / xhr.total, addprogress: (i + xhr.loaded / xhr.total) / monuments.length },
					`Pulling ${monuments[i].file} ${i + 1}/${monuments.length}`
				);
			},
			(error) => {
				console.log(error);
			}
		);
	}

ownimg
ownimg1724×621 142 KB

It works, at least the whole importing stuff the model shows up. But it seems like it is transparent for some reason. And no the fbx shouldn’t be the problem since in 3dviewer.net it works like it should.

3dviewer
3dviewer1339×817 79.9 KB

Is there any setting I am missing?

Scene setup:

scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
camera = new THREE.PerspectiveCamera(75, threejs_canvas.clientWidth / threejs_canvas.clientHeight, 0.1, 10000);
WebGLRenderer = new THREE.WebGLRenderer({
	canvas: threejs_canvas,
	alpha: true
});
WebGLRenderer.shadowMap.enabled = true;
WebGLRenderer.setPixelRatio(window.devicePixelRatio);
WebGLRenderer.setSize(threejs_canvas.clientWidth, threejs_canvas.clientHeight);

const amLight = new THREE.AmbientLight(0xffffff, 2.5);
scene.add(amLight);
2

Maybe try using my FBX Viewer to see how it shows there.

This viewer has the OS button, which stands for material’s Original Side, and if you keep on clicking it then it will switch to front / back / double.

If it shows correctly under any of these then it’s just a material side that you might need to adjust.

3

Seems like that is the issue, small question what is the best way to change the sides?
Since the model is a Group of 3D objects, I thought about just looping through the children and setting the side to a different value, but I cant do that for 3D Objects?

4

This is pretty much what my code does:

          fbx_obj.traverse( function( child ) {
    	    if (child.isMesh && child.material) {
              if (Array.isArray( child.material )) {
                child.material.forEach( mtl => {
                  mtl.side = THREE.DoubleSide;
                  //mtl.needsUpdate = true; // uncomment if necessary 
                });
              } else {
                child.material.side = THREE.DoubleSide;
                //child.material.needsUpdate = true; // uncomment if necessary
              }
          });

Just use the side that works for you (whether it’s Front or Double).

5

Thanks for the response. I’ve tried now every side, and it still looks transparent, could it be any light or other material setting that I need to change?

pic
pic1409×753 290 KB

6

Found it, just needed to add mtl.transparent = false; to it.

Thank you for the help. :slight_smile:

1 Like
7

Just be careful with that since meshes like window / glass would need to retain their transparency.

8

good to know thank you, but this is only one lod in one mesh so there is no transparency

9

If need be, you can always condition it and turn transparency OFF only for materials that have opacity equal to 1, like this:

  if (mtl.opacity === 1) mtl.transparent = false;

This way you would make an assumption that materials with opacity less than 1 should be transparent.