Set realistic environment settings in a SceneView sample code

Anonymous User

I would like to show and hide the tool using a button, but I haven't been able to make it work.  The image below displays the problems that I encountered.  The first problem is I am not sure how to reset environment setting (removing shadow),  and the second problem is how to make the clock to work (getting local time and also shadow casting).  I would appreciate your assistance.

&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> clock <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Clock</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; el<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"clock"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; skin<SPAN class="punctuation token">:</SPAN> require<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toUrl</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'./third-party/clock.svg'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; time<SPAN class="punctuation token">:</SPAN> sceneView<SPAN class="punctuation token">.</SPAN>environment<SPAN class="punctuation token">.</SPAN>lighting<SPAN class="punctuation token">.</SPAN>date<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getTime</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; sceneView<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'clock'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'bottom-right'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; clock<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'time-change'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>time<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sceneView<SPAN class="punctuation token">.</SPAN>environment<SPAN class="punctuation token">.</SPAN>lighting<SPAN class="punctuation token">.</SPAN>date <SPAN class="operator token">=</SPAN> time<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sceneView<SPAN class="punctuation token">.</SPAN>environment<SPAN class="punctuation token">.</SPAN>lighting<SPAN class="punctuation token">.</SPAN>directShadowsEnabled <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp; <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#shadow'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> display <SPAN class="operator token">=</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#clock'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">css</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'display'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>display <SPAN class="operator token">==</SPAN> <SPAN class="string token">'block'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#clock'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">css</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'display'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'none'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">// Show shadow with clock;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sceneView<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'clock'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'bottom-right'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#clock'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">css</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'display'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'block'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">// Hide shadow and clock</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sceneView<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN>clock<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>

<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

ThomasSolow

It looks to me like .remove is not working correctly on the clock.  I'm not sure if this is my mistake or a problem in the clock code.

Discounting .remove, you should still be able to toggle the clock's visibility and the lighting in the scene.  You can just allow the event listener to keep running in the background.  Based on your code, something like this should work:

<SPAN class="keyword token">let</SPAN> shadowBtn <SPAN class="operator token">=</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'shadow'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">let</SPAN> clock <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Clock</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; el<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'clock'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; skin<SPAN class="punctuation token">:</SPAN> require<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toUrl</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'./third-party/clock.svg'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; time<SPAN class="punctuation token">:</SPAN> sceneView<SPAN class="punctuation token">.</SPAN>environment<SPAN class="punctuation token">.</SPAN>lighting<SPAN class="punctuation token">.</SPAN>date<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getTime</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">// start with lighing off as clock starts hidden</SPAN>
sceneView<SPAN class="punctuation token">.</SPAN>environment<SPAN class="punctuation token">.</SPAN>lighting<SPAN class="punctuation token">.</SPAN>directShadowsEnabled <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>

clock<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"time-change"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>time<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; sceneView<SPAN class="punctuation token">.</SPAN>environment<SPAN class="punctuation token">.</SPAN>lighting<SPAN class="punctuation token">.</SPAN>date <SPAN class="operator token">=</SPAN> time<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

sceneView<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'clock'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'bottom-left'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
clock<SPAN class="punctuation token">.</SPAN>el<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>visibility <SPAN class="operator token">=</SPAN> <SPAN class="string token">'hidden'</SPAN><SPAN class="punctuation token">;</SPAN>

shadowBtn<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>clock<SPAN class="punctuation token">.</SPAN>el<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>visibility <SPAN class="operator token">!==</SPAN> <SPAN class="string token">'hidden'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; clock<SPAN class="punctuation token">.</SPAN>el<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>visibility <SPAN class="operator token">=</SPAN> <SPAN class="string token">'hidden'</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; sceneView<SPAN class="punctuation token">.</SPAN>environment<SPAN class="punctuation token">.</SPAN>lighting<SPAN class="punctuation token">.</SPAN>directShadowsEnabled <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; clock<SPAN class="punctuation token">.</SPAN>el<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>visibility <SPAN class="operator token">=</SPAN> <SPAN class="string token">'visible'</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; sceneView<SPAN class="punctuation token">.</SPAN>environment<SPAN class="punctuation token">.</SPAN>lighting<SPAN class="punctuation token">.</SPAN>directShadowsEnabled <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>