<div id="container"></div>

<button id="one">hide/show1</button>
<button id="two">hide/show2</button>

#c{
  position: fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
}

import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.module.min.js';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';

let camera, scene, renderer, controls;
let geometry, material, mesh, mesh2;
var container = document.getElementById( 'container' );
var directionalLight;
var camPos;

var on = true;
var on1 = true;

init();
animate();

function init() {

	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 2 );
	camPos = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 2 );
	scene = new THREE.Scene();  
 let directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7, 1 );
directionalLight.position.set(0.3, 0.3, -0.3);
directionalLight.castShadow = true;
directionalLight.shadow.camera.left = - 0.5;
directionalLight.shadow.camera.right = 0.5;
directionalLight.shadow.camera.top = 0.5;
directionalLight.shadow.camera.bottom = - 0.5;
directionalLight.shadow.camera.fov = 45;
directionalLight.shadow.camera.aspect = 1;
directionalLight.shadow.camera.near = 0.1;
directionalLight.shadow.camera.far = 1;
directionalLight.shadow.bias = 0.001;
directionalLight.shadow.normalBias = 0.003;
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;

scene.add( directionalLight );
  
  scene.add(camera);
  scene.add(camPos);
  camera.position.set(0.2,0.5,-0.6);
  
	renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
	renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.toneMapping = THREE.ReinhardToneMapping;
  renderer.setClearColor( 0x000000, 0 );
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.autoUpdate = true;
  renderer.receiveShadow = true;
  renderer.shadowMap.type = THREE.PCFShadowMap;
	document.body.appendChild( container );
  container.appendChild( renderer.domElement );
  controls = new OrbitControls( camera, renderer.domElement );
  
  
    //---- cubes ----//
  
	geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
	material = new THREE.MeshPhongMaterial( {color: 0x8811ff, opacity: 1, transparent: true} );

	  mesh = new THREE.Mesh( geometry, material );
    mesh.castShadow = true;
  	scene.add( mesh );
  
  	mesh2 = new THREE.Mesh( geometry, material );
    mesh2.castShadow = true;
  	scene.add( mesh2 );
    mesh2.position.x = 0.3;
  
  document.getElementById("one").addEventListener("click", function(){

      mesh2.visible = !mesh2.visible;
 
   });
  
  
   document.getElementById("two").addEventListener("click", function(){

      mesh.visible = !mesh.visible;
 
   });
  
  
  
  
    //-------------- floor ------------//
  
  var geometry1 = new THREE.PlaneBufferGeometry(100, 100);
    var material1 = new THREE.MeshPhongMaterial( { color: 0xef465, flatShading: true} );
        //new THREE.ShadowMaterial();
    material1.opacity = 1;  

    var mesh1 = new THREE.Mesh( geometry1, material1 );
    mesh1.receiveShadow = true;
  
    mesh1.rotation.x = - 1.571;
    mesh1.position.y = -0.1;

    scene.add( mesh1 );
}

function animate() {

	requestAnimationFrame( animate );
var timea = Date.now() * 0.0005;

  camPos.position.set(camera.position.x, camera.position.y, camera.position.z);

  camPos.lookAt(mesh.position);
 
  

  
	renderer.render( scene, camera );

}