Opacity of GLTF object by GUI

Hello, in this exemple, i want to add two modifiers, One for visibility, one for Opacity.
The Visibility is ok.
But for the opacity, i have some error like 'index.html:137 Uncaught TypeError: Cannot set property ‘opacity’ of undefined’
I think i not add the right value of the opacity of my mesh/texture ‘modelgltf.material.opacity’ is wrong
But i don’t know who is the right parameters.
Can you give me some help ?

                var modelgltf;
	            var gltfLoader = new GLTFLoader(loadingManager);
			    gltfLoader.load('models/gltf/export_x3d.gltf', function (gltf) {
                    modelgltf = gltf.scene;

                    modelgltf.traverse ( ( mod )  => {
                        if (mod.isMesh) {
                        mod.material.wireframe = false;
                        mod.material.castShadow = true;
                        mod.material.receivedShadow = true;
                        mod.material.roughness = 0.6;
                        mod.material.metalness = true;
                        mod.material.opacity = 1;
                        mod.material.transparent = true;

                    var visibilityControl = {
                            visible: true,
                            opacity: 1,

                    var SLSfolder = gui.addFolder('SLS');

                    var SLSVisible = SLSfolder.add(visibilityControl, 'visible').name('Show SLS').listen();
                    SLSVisible.onChange(function(value){modelgltf.visible = value;});

                    var objOpacity = SLSfolder.add( visibilityControl,'opacity').min(0).max(1).step(0.1).name('Opacity').listen();
                    objOpacity.onChange(function(value){modelgltf.material.opacity = value;});

castShadow and receivedShadow are no material properties. They are define at Object3D level.

Besides, modelgltf.material.opacity is not valid since modelgltf is an instance of THREE.Group which has no material property.

1 Like