feat: 3d nds model

app/pages/index.vue

@@ -1,26 +1,40 @@
 <script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
+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>
-  <NuxtLayout name="default">
-    <template #top>
+  <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'" />
-    </template>
-
-    <template #bottom>
+    </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'" />
-    </template>
-  </NuxtLayout>
+    </Screen>
+  </div>
 </template>