Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/414.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/sharepoint/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 三个js dat gui:更改来自OBJMTL加载程序的对象的不透明度和可见性_Javascript_Three.js - Fatal编程技术网

Javascript 三个js dat gui:更改来自OBJMTL加载程序的对象的不透明度和可见性

Javascript 三个js dat gui:更改来自OBJMTL加载程序的对象的不透明度和可见性,javascript,three.js,Javascript,Three.js,我使用OBJMTLLoader加载了一个对象。我想从dat gui控制面板更改加载对象的位置、可见性和不透明度。我试图实现这一点,现在可以移动加载的对象。但是,要更改可见性和不透明度,请执行以下操作。我想我需要使用加载对象的“材质”。我试过了,但没有成功。以下是到目前为止我的代码 objects = []; var loader = new THREE.OBJMTLLoader(); loader.addEventListener('load', function(event){

我使用OBJMTLLoader加载了一个对象。我想从dat gui控制面板更改加载对象的位置、可见性和不透明度。我试图实现这一点,现在可以移动加载的对象。但是,要更改可见性和不透明度,请执行以下操作。我想我需要使用加载对象的“材质”。我试过了,但没有成功。以下是到目前为止我的代码

objects = [];
    var loader = new THREE.OBJMTLLoader();
    loader.addEventListener('load', function(event){
        object = event.content;
        object.traverse(function(child){
            if (child instanceof THREE.mesh) {
                //The child is needed for the raycaster intersection later
            };
        });
    });
    loader.load("models/Model1.obj", "models/Model1.mtl", function (object) {
                objects.push(object);
                scene.add(object);
    parameters = {
                    x:0, y:2, z:0,
                    opacity: 1, 
                    visible: true,
                    reset: function() { resetObject() }
                };
    var folder1 = gui.addFolder('Position');
                var objectX = folder1.add(parameters, 'x').min(-200).max(200).step(1).listen();
                //.............
                folder1.open();
                // moving model is OK. Deleted to save space...

                var objectOpacity = gui.add(parameters, 'opacity').min(0).max(1).step(0.01).name('Opacity').listen();
                objectOpacity.onChange(function(value){
                object.material.opacity = value;  });

                var objectVisible = gui.addColor( parameters, 'visible').name('Visible?').listen();
                objectVisible.onChange(function(value){
                object.material.visible = value;   });

                gui.add( parameters, 'reset' ).name("Reset Object Parameters");
                gui.open();
                // and the required functions as in the example.
使用上述代码,console会出现以下错误:

Uncaught Failed to interpret color arguments //dat.gui.min.js:87
Uncaught TypeError: Cannot set property 'opacity' of undefined

如何从dat gui面板调整可见性和不透明度?谢谢。

材质。可见
定义此材质是否可见;如果对象可见,则不会。如果要使对象可见/不可见,则需要使用
Object3D.visible
属性,因此在上述代码中需要执行以下操作:

object.visible = value;
现在来看看材料。加载程序返回
THREE.Object3D
而不是
THREE.Mesh
。因此,您无法通过这种方式访问材质。您需要做的是:

object.traverse( function (child) {
    if (child instanceof THREE.Mesh) {
        child.material.opacity = value;
        child.material.transparent = true;
    }
});