Thank you so much for quick response. The first provided code for the hide/show works perfectly, however, I am having the problem with the code removing the time and environment totally.
In line 15 (my code: line 23), I am getting an error shown as below. Unfortunately, I am having the same problem that I initiated the question. Once removed shadow (once visibility is hidden), the clock doesn't show the time correctly and casting shadow function no longer works. I tried a few things, but no luck.
let btn = <reference to HTML button to toggle clock>;
let clock = <reference to clock widget>;
let listener = clock.on('time-change', function(...){...});
btn.addEventListener('click',(e)=>{
if (clock.el.style.visibility === 'visible'){
clock.el.style.visibility = 'hidden';
listener.remove();
view.environment.lighting.directShadowsEnabled = false;
} else {
clock.el.style.visibility = 'visible';
listener = clock.on('time-change', function(...){...});
view.environment.lighting.directShadowsEnabled = true;
}
});
Here is my code:
let shadowBtn = dom.byId('shadow');
let clock = new Clock({
el: 'clock',
skin: require.toUrl('./third-party/clock.svg'),
time: sceneView.environment.lighting.date.getTime()
});
let listener = clock.on("time-change", function (time) {
sceneView.environment.lighting.date = time;
sceneView.environment.lighting.directShadowsEnabled = true;
});
sceneView.ui.add('clock', 'bottom-left');
clock.el.style.visibility = 'hidden';
shadowBtn.addEventListener('click', function(e){
if (clock.el.style.visibility === 'visible'){
clock.el.style.visibility = 'hidden';
listener.remove();
sceneView.environment.lighting.directShadowsEnabled = false;
} else {
clock.el.style.visibility = 'visible';
listener = clock.on("time-change", function (time) {
sceneView.environment.lighting.date = time;
sceneView.environment.lighting.directShadowsEnabled = true;
});
}
});