41 lines
1.2 KiB
Vue
41 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { OrbitControls } from "@tresjs/cientos";
|
|
|
|
const route = useRoute();
|
|
const screen = computed(() => route.query.screen as string | undefined);
|
|
|
|
const topScreen = useTemplateRef("topScreen");
|
|
const bottomScreen = useTemplateRef("bottomScreen");
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<TresCanvas window-size clear-color="#181818">
|
|
<TresPerspectiveCamera :args="[45, 1, 0.001, 1000]" />
|
|
<OrbitControls />
|
|
|
|
<TresAmbientLight />
|
|
<TresDirectionalLight />
|
|
|
|
<NDS
|
|
v-if="topScreen && bottomScreen"
|
|
:top-screen-canvas="topScreen.canvas"
|
|
:bottom-screen-canvas="bottomScreen.canvas"
|
|
/>
|
|
</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>
|