Svelte doesn't handle click events from x3dom correctly

175 views Asked by At

I have a small hello world program to try out svelte and x3dom together.

<script>
    import { onMount } from 'svelte';

    let yes = false;

    let onclick = (event)=>{
        alert('ff');
    }
</script>
<style>
    h1 { fontweight: bold;}
</style>

<label>show cone</label>
<input type=checkbox bind:checked={yes}/>

<svelte:head>
    <link rel='stylesheet' type='text/css' href='https://www.x3dom.org/download/x3dom.css'/>
    <script type='text/javascript' src='https://www.x3dom.org/download/x3dom.js'> </script> 
</svelte:head>
 
<h1>Hello, X3DOM!</h1> 
     
<x3d id="x3d"  width='500px' height='400px'> 
       <scene> 
        <shape on:click={onclick}> 
           <appearance> 
             <material diffuseColor='1 0 0'></material> 
           </appearance> 
           <box></box> 
        </shape> 
             
{#if yes}
        <transform translation='-3 0 0' > 
          <shape on:click={onclick}> 
             <appearance> 
               <material diffuseColor='0 1 0'></material> 
             </appearance> 
             <cone></cone> 
          </shape> 
        </transform> 
{/if}
             
        <transform translation='3 0 0'> 
          <shape on:click={onclick}> 
             <appearance> 
               <material diffuseColor='0 0 1'></material> 
             </appearance> 
             <sphere></sphere> 
          </shape> 
        </transform> 
       </scene> 
    </x3d> 
  
<h1>Mind Blown!!</h1>

3d picture

The problem is that the on:click event has some strange behaviour.

The check box is meant to show and hide the green cone. This works as long as the on:click={onclick} action on the shape nodes is missing. When I put the action into the code then I can only switch on and off the green triangle once.

Secondly the on:click event only works on the green cone. The same handler is on the red and blue objects but doesn't fire.

What is going on here.

Live code at

https://svelte.dev/repl/6427e29e27404f48911d8e2708bcdfc0?version=3.29.0

0

There are 0 answers