Gltf object is transparent

Questions
1

I have started learning three js few days back. i am trying to add a gltf 3d model to my webpage but the model is transparent and doesnt look solid i have tried adding lights but the issue is not getting resolved. This is the model Canon AT-1 Retro Camera - Download Free 3D model by AleixoAlonso [9de6686] - Sketchfab. (its a bit hard to see the in my screen shots)

cam1
cam1706×445 63.2 KB

cam2
cam2845×549 51.6 KB

Here’s the code:

import * as THREE from 'three'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'


const renderer = new THREE.WebGLRenderer()
renderer.setPixelRatio( window.devicePixelRatio );
renderer.physicallyCorrectLights = true;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 0, 10)
scene.add(camera)

let model
const gltfLoader = new GLTFLoader()
gltfLoader.load('/steampunk-cam/scene.gltf', function(gltf){
    gltf.scene.scale.set(50, 50, 50);
    
    model = gltf.scene
    console.log(gltf.scene)
    scene.add(model)
},function(xhr) {
    
}
)

const ambientLight = new THREE.AmbientLight(0xffffff, 1)
scene.add(ambientLight)

const directionalLight = new THREE.DirectionalLight(0xffffff, 10)
directionalLight.position.set(0, 100, 100)
scene.add(directionalLight)

const controls = new OrbitControls(camera, renderer.domElement)

function animate() {
    requestAnimationFrame(animate)
    controls.update()
    renderer.render(scene, camera)
}

animate()```
2

Maybe there is something wrong with the model.

Try to validate your model using this tool https://gltf.report/

2 Likes
3

An import into and then export from Blender might help.

4

Technically, I think this is a problem in Sketchfab’s conversion from the source
format (FBX) to glTF, they’ve enabled alpha blending (material.transparent = true in three.js) when the model shouldn’t use it.

You can fix it in Blender by changing the alpha mode to “opaque” for all materials that shouldn’t be transparent. Or a quicker way, if it you want to change all materials in the model (true in this case) is to drop the model into https://gltf.report/ and run the following in the script tab, then re-export.

for (const mat of document.getRoot().listMaterials()) {
	mat.setAlphaMode('OPAQUE');
}
5

thank you so much this fixed the issue

1 Like
6

Unfortunately my lap won’t be able to run blender so i cannot do this

8

thank you. solved using this Gltf object is transparent - #4 by donmccurdy

9

You are welcome.

2 Likes