Merge pull request #131 from Tresjs/bugfix/127-scene-doesnt-scale-pro…

…perly Bugfix/127 scene doesnt scale properly
Tresjs · Feb 28, 2023 · 072f17e · 072f17e
2 parents 4189c7a + 25e55be
commit 072f17e
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/docs/api/composables.md b/docs/api/composables.md
@@ -143,7 +143,7 @@ Then you can bind the textures to the material.
 
 Similar to above composable, the `useTexture` composable returns a promise, you can use it with `async/await` or `then/catch`. If you are using it on a component make sure you wrap it with a `Suspense` component.
 
-# useCatalogue
+## useCatalogue
 
 The `useCatalogue` composable allows you to extend the internal catalogue of components. It returns a function that you can use to register new components.
 
@@ -170,7 +170,7 @@ Then you can use the new component in your template. Notice that the new compone
 </template>
 ```
 
-# useTres <Badge type="warning" text="^1.7.0" />
+## useTres <Badge type="warning" text="^1.7.0" />
 
 This composable aims to provide access to the state model which contains the default renderer, camera, scene, and other useful properties.
 

diff --git a/docs/api/renderer.md b/docs/api/renderer.md
@@ -13,6 +13,35 @@ The `Renderer` component is the main component of Tres. It's the one that create
 </template>
 ```
 
+## Canvas size
+
+The `Renderer` component will use the parent element size as the canvas size. If you want to use the window size as the canvas size, you can set the `window-size` prop to `true`.
+
+```vue
+<template>
+  <TresCanvas window-size>
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+Or you can use CSS to set your app size.
+
+```css
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+#app {
+  height: 100%;
+  width: 100%;
+  background-color: #000;
+}
+```
+
 ## Presets <Badge warning text="v1.7.0+" />
 
 Tres comes with a few presets for the `Renderer` component. You can use them by setting the `preset` prop.

diff --git a/packages/tres/src/core/useCamera/index.ts b/packages/tres/src/core/useCamera/index.ts
@@ -129,7 +129,7 @@ export function useCamera(): UseCameraReturn {
         far: 1000,
         fov: VERTICAL_FIELD_OF_VIEW,
       }
-      camera = new PerspectiveCamera(fov, state.aspectRatio?.value || 1, near, far)
+      camera = new PerspectiveCamera(fov, state.aspectRatio?.value || window.innerWidth / window.innerHeight, near, far)
       state.cameras?.push(camera as PerspectiveCamera)
     } else {
       const { left, right, top, bottom, near, far } = (options as OrthographicCameraOptions) || {
@@ -146,6 +146,7 @@ export function useCamera(): UseCameraReturn {
     state.camera = camera
 
     setState('camera', state.camera)
+
     return camera
   }
 

diff --git a/packages/tres/src/core/useTres/index.ts b/packages/tres/src/core/useTres/index.ts
@@ -1,5 +1,5 @@
 import { Clock, EventDispatcher, Raycaster, Scene, Vector2, WebGLRenderer } from 'three'
-import { ComputedRef, shallowReactive, toRefs } from 'vue'
+import { computed, ComputedRef, shallowReactive, toRefs } from 'vue'
 import { Camera } from '/@/core'
 
 export interface TresState {
@@ -93,6 +93,7 @@ export interface TresState {
 const state: TresState = shallowReactive({
   camera: undefined,
   cameras: [],
+  aspectRatio: computed(() => window.innerWidth / window.innerHeight),
 })
 
 /**