# Importing fbx with textures results in a near trasparent object

**URL:** <https://discourse.threejs.org/t/importing-fbx-with-textures-results-in-a-near-trasparent-object/69112>\
**Category:** Questions\
**Created:** [August 8, 2024, 5:01pm UTC](https://discourse.threejs.org/t/importing-fbx-with-textures-results-in-a-near-trasparent-object/69112 "2024-08-08T17:01:24Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Juliiian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/juliiian/32/50567_2.png) [@Juliiian](https://discourse.threejs.org/u/Juliiian)\
**Post date:** [August 8, 2024, 5:01pm UTC](https://discourse.threejs.org/t/importing-fbx-with-textures-results-in-a-near-trasparent-object/69112/1 "2024-08-08T17:01:24Z")

</div>

Using: Three version: 0.167.1

When importing the fbx like normal:

```javascript
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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/c/bc018d34c5ec6f389c187829f55da65eec9acd66.jpeg)

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](http://3dviewer.net) it works like it should.

 ![3dviewer](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/1/a1e6c8571ebc036a3dac2a70dafef36565d165ac.jpeg)

Is there any setting I am missing?

Scene setup:

```javascript
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);

```

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [August 8, 2024, 5:26pm UTC](https://discourse.threejs.org/t/importing-fbx-with-textures-results-in-a-near-trasparent-object/69112/2 "2024-08-08T17:26:59Z")

</div>

Maybe try using my [FBX Viewer](https://githubdragonfly.github.io/viewers/templates/FBX%20Viewer.html) 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.

---

<div class="post-metadata">

**Author:** ![Juliiian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/juliiian/32/50567_2.png) [@Juliiian](https://discourse.threejs.org/u/Juliiian)\
**Post date:** [August 8, 2024, 5:39pm UTC](https://discourse.threejs.org/t/importing-fbx-with-textures-results-in-a-near-trasparent-object/69112/3 "2024-08-08T17:39:36Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [August 8, 2024, 6:17pm UTC](https://discourse.threejs.org/t/importing-fbx-with-textures-results-in-a-near-trasparent-object/69112/4 "2024-08-08T18:17:11Z")

</div>

This is pretty much what my code does:

```js
          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).

---

<div class="post-metadata">

**Author:** ![Juliiian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/juliiian/32/50567_2.png) [@Juliiian](https://discourse.threejs.org/u/Juliiian)\
**Post date:** [August 8, 2024, 6:26pm UTC](https://discourse.threejs.org/t/importing-fbx-with-textures-results-in-a-near-trasparent-object/69112/5 "2024-08-08T18:26:45Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/d/4dc885493aeb5cb5f584b6c5a2c9a0ff4904ed3a.jpeg)

---

<div class="post-metadata">

**Author:** ![Juliiian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/juliiian/32/50567_2.png) [@Juliiian](https://discourse.threejs.org/u/Juliiian)\
**Post date:** [August 8, 2024, 6:32pm UTC](https://discourse.threejs.org/t/importing-fbx-with-textures-results-in-a-near-trasparent-object/69112/6 "2024-08-08T18:32:11Z")

</div>

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

Thank you for the help. 🙂

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [August 8, 2024, 6:35pm UTC](https://discourse.threejs.org/t/importing-fbx-with-textures-results-in-a-near-trasparent-object/69112/7 "2024-08-08T18:35:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Juliiian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/juliiian/32/50567_2.png) [@Juliiian](https://discourse.threejs.org/u/Juliiian)\
**Post date:** [August 8, 2024, 8:34pm UTC](https://discourse.threejs.org/t/importing-fbx-with-textures-results-in-a-near-trasparent-object/69112/8 "2024-08-08T20:34:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [August 8, 2024, 9:36pm UTC](https://discourse.threejs.org/t/importing-fbx-with-textures-results-in-a-near-trasparent-object/69112/9 "2024-08-08T21:36:18Z")

</div>

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

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

```

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