Some transparent textures in three.js

Question

Some textures are transparent when I render them out in the browser. Is there a way to solve this issue? Im just started learing Three.js.

image of the issue

loader.load(model, (object) =\>
{
object.position.set(-0.8,-0.5,-0.2)
scene.add(object)
scene.add(pointLight)
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
camera.position.z = 2;
camera.position.y = 1;
camera.position.x = 2.8;

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

}

Tried with multiple models but always same result.

Answer 1

Those areas are transparent because you're looking at the back-face of your geometry. Rendering the back-face is disabled by default, but you can enable it on your material:

object.material.side = THREE.DoubleSide;

You can read more about Material.side in the docs.