Changing the transparency mode of my GLB file

Questions
1

I’m pretty new to three.js. I exported my fbx file from revit using twinmotion plugin. Then I used fbx2gltf to change it to glb file. I put my glb file on babylon.js sandbox to view it and discovered that my windowpane was blue. I found that windowpane materials’ transparency mode was set to opaque and alpha was 0.25. I was trying to set transparency mode to alpha blend and alpha to 0. My windowpane is now transparent. I’m wondering if there is a way to change them in my code because I might need to do the same process plenty of times.

Here is my code.

import * as THREE from "./node_modules/three/build/three.module.js";
import { OrbitControls } from "./node_modules/three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "./node_modules/three/examples/jsm/loaders/GLTFLoader.js";


var scene = new THREE.Scene();
scene.background = new THREE.Color(0xA9A9A9);

var ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);


var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.y = 1;
camera.position.z = 10;
scene.add(camera);

var grid = new THREE.GridHelper(75, 50, 0x555555, 0x555555);
scene.add(grid);

var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
document.body.appendChild(renderer.domElement);


var loader = new GLTFLoader();
loader.load('./assets/glb/glass.glb', function(gltf){
    gltf.scene.traverse(function(child){
        if(child.material.name == '玻璃'){
            gltfMaterial.alphaMode = "BLEND";
            child.material.alphaTest = 0;
        }
    });
    //centering objects
    const box = new THREE.Box3().setFromObject(gltf.scene);
    const center = box.getCenter(new THREE.Vector3());
    gltf.scene.position.x += (gltf.scene.position.x - center.x);
    gltf.scene.position.y += (gltf.scene.position.y - center.y);
    gltf.scene.position.z += (gltf.scene.position.z - center.z);
    scene.add(gltf.scene);
    render();
});

var controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

        
//window resizing
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
    render();
}

//draw scene
function render(){
    renderer.render(scene, camera);
};

The Console showed TypeError: Cannot read property ‘name’ of undefined.
I don’t know what’s wrong or maybe there is a better way to do this.

Any help is appreciated.

2

You’ll need to check that each child is actually a THREE.Mesh, first, with child.isMesh === true. The scene could contain other objects, like empty THREE.Group instances, which don’t have materials.

The materials on meshes created by GLTFLoader will usually be MeshStandardMaterial instances, so you’ll need to use the properties documented for that class — glTF property names like “alphaMode” are not used within three.js. To enable alpha blending in three.js, you’d typically use:

material.transparent = true;
material.opacity = 0.123;

With opacity at 0, the material will be invisible.

3 Likes
3

Thank you for your quick reply!

I changed my code in GLTFLoader to this and it worked like a charm.

gltf.scene.traverse(function(child){
    if(child.isMesh === true){
        if(child.material.name == '玻璃'){
            child.material.transparent = true;
            child.material.opacity = 0;
        }
    } 
});

I really appreciate it.