feat: basic threejs view

packages/stage/package.json

@@ -33,6 +33,7 @@
     "@pixi/ticker": "^6.5.10",
     "@pixi/utils": "6",
     "@pixiv/three-vrm": "^3.2.0",
+    "@tresjs/cientos": "^4.0.3",
     "@tresjs/core": "^4.3.1",
     "@types/yauzl": "^2.10.3",
     "@unhead/vue": "^1.11.13",

packages/stage/src/components/MainStage.vue

@@ -272,8 +272,8 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div h-full p="2" flex="~ col">
-    <div flex gap-2>
+  <div h-full max-h="[100vh]" p="2" flex="~ col">
+    <div flex="~" gap-2>
       <fieldset
         flex="~ row"
         bg="zinc-100 dark:zinc-700"
@@ -317,7 +317,7 @@ onUnmounted(() => {
       </fieldset>
       <Settings />
     </div>
-    <div flex="~ row 1" relative w-full items-end gap-2>
+    <div flex="~ row 1" max-h="[calc(100vh-160px)]" relative h-full w-full items-end gap-2>
       <Live2DViewer
         v-if="stageView === '2d'"
         ref="live2DViewerRef"
@@ -327,11 +327,12 @@ onUnmounted(() => {
       />
       <ThreeViewer
         v-else-if="stageView === '3d'"
+        w="50%" min-w="50% <lg:full" min-h="100 sm:100" h-full flex-1
       />
       <div
         class="relative <lg:(absolute bottom-0 from-zinc-800/80 to-zinc-800/0 bg-gradient-to-t p-2)"
         px="<sm:2" py="<sm:2" rounded="<sm:lg"
-        w="50% <lg:full" flex="~ col 1" gap-2 max-h="[calc(100vh-117px)]"
+        w="50% <lg:full" flex="~ col 1" gap-2 max-h="[calc(100vh-160px)]"
       >
         <div v-for="(message, index) in messages" :key="index">
           <div v-if="message.role === 'assistant'" flex mr="12">
@@ -390,7 +391,7 @@ onUnmounted(() => {
         </div>
       </div>
     </div>
-    <div my="2" space-x="2" flex="~ row" w-full self-end>
+    <div flex="~ row" my="2" space-x="2" w-full self-end>
       <div flex="~ col" w-full space-y="2">
         <select
           p="2"

packages/stage/src/components/ThreeViewer.vue

@@ -1,10 +1,66 @@
 <script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
+import { breakpointsTailwind, useBreakpoints, useElementBounding, useWindowSize } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+const containerRef = ref<HTMLDivElement>()
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const { width, height } = useWindowSize()
+const containerElementBounding = useElementBounding(containerRef, { immediate: true, windowResize: true, reset: true })
+
+const isMobile = computed(() => breakpoints.between('sm', 'md').value || breakpoints.smaller('sm').value)
+const isTablet = computed(() => breakpoints.between('md', 'lg').value)
+const isDesktop = computed(() => breakpoints.greaterOrEqual('lg').value)
+
+const canvasWidth = computed(() => {
+  if (isDesktop.value)
+    return containerElementBounding.width.value
+  else if (isMobile.value)
+    return (width.value - 16) // padding
+  else if (isTablet.value)
+    return (width.value - 16) // padding
+  else
+    return containerElementBounding.width.value
+})
+
+const canvasHeight = ref(0)
+watch([width, height, containerRef], () => {
+  const bounding = containerRef.value?.parentElement?.getBoundingClientRect()
+
+  if (isDesktop.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else if (isMobile.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else if (isTablet.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else {
+    canvasHeight.value = 600
+  }
+})
+
+onMounted(async () => {
+  if (!containerRef.value)
+    return
+
+  containerElementBounding.update()
+})
 </script>
 
 <template>
-  <div>
-    <div>Working in progress</div>
-    <TresCanvas />
+  <div ref="containerRef" h-full w-full>
+    <TresCanvas :alpha="true" :antialias="true" :width="canvasWidth" :height="canvasHeight">
+      <TresPerspectiveCamera />
+      <TresMesh>
+        <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+        <TresMeshBasicMaterial color="orange" />
+      </TresMesh>
+      <OrbitControls />
+      <TresAmbientLight :intensity="1" />
+    </TresCanvas>
   </div>
 </template>