49 lines
1.3 KiB
Svelte
49 lines
1.3 KiB
Svelte
<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>
|