如何使用addEventListener隐藏和显示

时间:2017-11-20 09:50:14

标签: javascript jquery

我已使用 three.js 加载 .obj 文件。我想在按钮显示隐藏 .obj文件。页面加载后单击按钮对象显示,但如何在同一按钮上隐藏该对象。没有

。因此隐藏和显示非常困难。请检查以下链接。

Run Code in jsfiddle

<button type="button" style="z-index: 12345;position: absolute;margin-left: 50%;" id="hideShow">Hide / Show!</button>



<script>

var objHidden = false;

document.getElementById("hideShow").addEventListener("click", function(){


 var loader1 = new THREE.OBJLoader();
// load a resource
loader1.load(
    // resource URL
    'https://dl.dropboxusercontent.com/s/pn3yw6w5962o5r8/BIGIPIGI.obj',
    // called when resource is loaded
    function ( object ) {
        scene.add(object);
        object.scale.set(2.15,2.15,2.15);
        object.position.set(-4.5, 5.3, 5.6);

         object.traverse( function ( child ) {
           if ( child instanceof THREE.Mesh ) {
                //child.material.ambient.setHex(0xFF0000);
                child.material.color.setHex(0xaa0000);
               }
           } );
    },      
);

});

1 个答案:

答案 0 :(得分:1)

尝试保留一个是否隐藏的变量。

var objHidden = false;

document.getElementById("hideShow").addEventListener("click", function(){
    if(objHidden) {
        objHidden = false;
        // code to show object
    } else {
        objHidden = true;
        // code to hide object
    }
});