Svelte无法正确处理来自x3dom的单击事件

如何解决Svelte无法正确处理来自x3dom的单击事件

我有一个小的hello world程序，可以一起测试svelte和x3dom。

<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>

问题在于on:click事件具有某些奇怪的行为。

该复选框用于显示和隐藏绿色圆锥体。只要缺少形状节点上的on:click={onclick}操作，此方法就起作用。当我将动作添加到代码中时，我只能打开和关闭绿色三角形一次。

第二个on:click事件仅在绿色圆锥体上起作用。相同的处理程序位于红色和蓝色对象上，但不会触发。

这是怎么回事。

实时代码位于

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