50 lines
1.6 KiB
Vue
50 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { OrbitControls } from "@tresjs/cientos";
|
|
import type { Screen as NDSScreen } from "#components";
|
|
|
|
type ScreenInstance = InstanceType<typeof NDSScreen>;
|
|
|
|
const route = useRoute();
|
|
const screen = computed(() => route.query.screen as string | undefined);
|
|
|
|
const topScreen = useTemplateRef<ScreenInstance>("topScreen");
|
|
const bottomScreen = useTemplateRef<ScreenInstance>("bottomScreen");
|
|
|
|
const topScreenCanvas = computed(() => topScreen.value?.canvas ?? null);
|
|
const bottomScreenCanvas = computed(() => bottomScreen.value?.canvas ?? null);
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<TresCanvas window-size clear-color="#181818">
|
|
<TresPerspectiveCamera
|
|
:args="[45, 1, 0.001, 1000]"
|
|
:position="[0, 10, 12]"
|
|
:rotation="[-Math.PI / 4.7, 0, 0]"
|
|
/>
|
|
|
|
<TresAmbientLight />
|
|
<TresDirectionalLight />
|
|
|
|
<NDS
|
|
v-if="topScreenCanvas && bottomScreenCanvas"
|
|
:top-screen-canvas="topScreenCanvas"
|
|
:bottom-screen-canvas="bottomScreenCanvas"
|
|
/>
|
|
</TresCanvas>
|
|
|
|
<Screen ref="topScreen">
|
|
<HomeTopScreen v-if="!screen" />
|
|
<ContactTopScreen v-else-if="screen === 'contact'" />
|
|
<ProjectsTopScreen v-else-if="screen === 'projects'" />
|
|
<SettingsTopScreen v-else-if="screen === 'settings'" />
|
|
</Screen>
|
|
<Screen ref="bottomScreen">
|
|
<HomeBottomScreen v-if="!screen" />
|
|
<ContactBottomScreen v-else-if="screen === 'contact'" />
|
|
<ProjectsBottomScreen v-else-if="screen === 'projects'" />
|
|
<SettingsBottomScreen v-else-if="screen === 'settings'" />
|
|
</Screen>
|
|
</div>
|
|
</template>
|