How to use object.visible = false & to hide object.visible = true; on button [Solved]

Hello Members, I want hide and show object on button. Object is showing on click button but not hide on button, see following code.

jsfiddle

Hello Members,
I got the solution. Solution

Thank You…!
Sandip D.

It could be simplified to:

object.visible = false;
document.getElementById("hideShow").addEventListener("click", function(){
    object.visible = !object.visible;
});
7 Likes

@prisoner849 thank u sir

Here’s my boilerplate solution:

import { GUI } from 'https://threejs.org/examples/jsm/libs/dat.gui.module.js';
// ...
const effectController = {
    showMyGeometry: false,
}; 
// ...
init(); 
// ...
function init(){
  // init 3dm loader
  const loader = new Rhino3dmLoader(); 
  loader.setLibraryPath( '/jsm/libs/rhino3dm/' ); 

  // load geometry file
  loader.load('./models/myModel.3dm', 
              function ( object ) {
                  object.traverse ( 
                      function( child ) { 
                          if ( child instanceof THREE.Mesh ) { 
                              child.material = myMeshMaterial; 
                          } 
                      } 
                  ); 
                  myGeometry = object; 
                  myGeometry.visible = false;
                  scene.add( myGeometry );
              } );

  // init GUI 
  initGUI(); 

  // ... 
}
// ...
function initGUI() {
    gui = new GUI( { width: 300 } );
    gui.add( effectController, 'showMyGeometry' ).onChange( function ( value ) {
        myGeometry.visible = value; 
    } );    
}