<script lang="ts">
    import * as Three from 'three';
    import * as SC from 'svelte-cubed';

    export let config: Config;

    type Config = {
        directionX: number,
        directionY: number,
        directionZ: number,
    }

    function to_rad(degree: number): number {
        return (Math.PI / 180) * degree;
    }

    $: vec = new Three.Vector3(1,0,0)
    .applyAxisAngle(new Three.Vector3(1, 0, 0), to_rad(config.directionX))
    .applyAxisAngle(new Three.Vector3(0, 1, 0), to_rad(config.directionY))
    .applyAxisAngle(new Three.Vector3(0, 0, 1), to_rad(config.directionZ));

    const origin = new Three.Vector3(0,0,0);

</script>

<div class="gyro">
    <SC.Canvas antialias>
        <SC.Primitive object={new Three.ArrowHelper(vec, origin, 1, 0x00ff00)} scale={3} />
        <SC.PerspectiveCamera position={[0, 6, 6]} target={[0,0,0]} zoom={1} />
        <SC.Primitive
            object={new Three.GridHelper(50, 50, 0x444444, 0x555555)}
            position={[0, 0.001, 0]}
        />
    </SC.Canvas>
</div>
<div>
    X: <input type="number" bind:value={config.directionX} />
    Y: <input type="number" bind:value={config.directionY} />
    Z: <input type="number" bind:value={config.directionZ} />
</div>

<style lang="post">
    .gyro {
        width: 200px;
        height: 200px;
        position: relative;
    }
</style>
