fix(core): TresCanvas responsive

packages/tres/src/App.vue

@@ -1,10 +1,25 @@
 <script setup lang="ts">
-import TheBasic from '/@/components/TheBasic.vue'
+import Responsiveness from '/@/components/Responsiveness.vue'
 </script>
 
 <template>
   <Suspense>
-    <TheBasic />
-    <!-- <VectorSetProps /> -->
+    <Responsiveness />
+    <!--     <VectorSetProps /> -->
   </Suspense>
 </template>
+
+<style>
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+#app {
+  height: 100%;
+  width: 100%;
+  background-color: #000;
+}
+</style>

packages/tres/src/components/Responsiveness.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import TheEnvironment from './TheEnvironment.vue'
+</script>
+<template>
+  <div class="modal">
+    <TheEnvironment />
+  </div>
+</template>
+
+<style>
+.modal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  right: 0;
+  bottom: 0;
+  width: 200px;
+  height: 200px;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+}
+</style>

packages/tres/src/core/useRenderer/component.ts

@@ -64,22 +64,37 @@ export const TresCanvas = defineComponent({
             style: {
               position: 'relative',
               width: '100%',
-              height: '100vh',
+              height: '100%',
+              overflow: 'hidden',
+              pointerEvents: 'auto',
+              touchAction: 'none',
               ...(attrs.style as Record<string, unknown>),
             },
           },
           [
-            h('canvas', {
-              ref: canvas,
-              style: {
-                width: '100%',
-                height: '100%',
-                position: props.windowSize ? 'fixed' : 'absolute',
-                top: 0,
-                left: 0,
+            h(
+              'div',
+              {
+                style: {
+                  width: '100%',
+                  height: '100%',
+                },
               },
-            }),
-            slots.default(),
+              [
+                h('canvas', {
+                  ref: canvas,
+                  style: {
+                    display: 'block',
+                    width: '100%',
+                    height: '100%',
+                    position: props.windowSize ? 'fixed' : 'absolute',
+                    top: 0,
+                    left: 0,
+                  },
+                }),
+                slots.default(),
+              ],
+            ),
           ],
         )
       }