Merge pull request #129 from Tresjs/bugfix/127-scene-doesnt-scale-properly

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/useInstanceCreator/index.ts

@@ -79,8 +79,8 @@ export function useInstanceCreator(prefix: string) {
             transformAxis = camelKey.substring(vecProps.length)
             if (!VECTOR3_AXIS.includes(transformAxis)) {
               logError(
-                `There was an error setting ${key} property`,
-                `${transformAxis} is not a valid axis for ${transformProps}`,
+                // eslint-disable-next-line max-len
+                `There was an error setting ${key} property, ${transformAxis} is not a valid axis for ${transformProps}`,
               )
             }
           }
@@ -93,7 +93,7 @@ export function useInstanceCreator(prefix: string) {
           colorProps = props
           colorKey = camelKey.substring(props.length).toLowerCase()
           if (!COLOR_KEYS.includes(colorKey)) {
-            logError(`There was an error setting ${key} property`, `${colorKey} is not a valid axis for ${colorProps}`)
+            logError(`There was an error setting ${key} property , ${colorKey} is not a valid axis for ${colorProps}`)
           }
         }
       })

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(),
+              ],
+            ),
           ],
         )
       }