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