Merge pull request #134 from Tresjs/hotfix/default-aspect-ratio-breaks-responsiveness

Hotfix/default aspect ratio breaks responsiveness

packages/tres/src/core/useCamera/index.ts

@@ -1,7 +1,7 @@
 import { useTres } from '/@/core/'
 import { PerspectiveCamera, OrthographicCamera } from 'three'
 
-import { toRef, watch, Ref } from 'vue'
+import { toRef, watch, Ref, inject } from 'vue'
 
 export enum CameraType {
   Perspective = 'Perspective',
@@ -105,7 +105,7 @@ let camera: Camera
  */
 export function useCamera(): UseCameraReturn {
   const { state, setState } = useTres()
-
+  const aspectRatio = inject('aspect-ratio')
   /**
    * Create camera and push to Tres `state.cameras` array
    *
@@ -182,10 +182,10 @@ export function useCamera(): UseCameraReturn {
   function clearCameras() {
     state.cameras = []
   }
-
-  if (state.aspectRatio) {
-    watch(state.aspectRatio, updateCamera)
+  if (aspectRatio) {
+    watch(aspectRatio, updateCamera)
   }
+
   return {
     activeCamera: toRef(state, 'camera'),
     createCamera,

packages/tres/src/core/useInstanceCreator/index.ts

@@ -167,8 +167,8 @@ export function useInstanceCreator(prefix: string) {
       return
     } else {
       const vNodeType = ((vnode.type as TresVNodeType).name as string).replace(prefix, '')
-      const { catalogue: fallback } = useCatalogue()
-      const catalogue = inject<Ref<TresCatalogue>>('catalogue') || fallback
+
+      const catalogue = inject<Ref<TresCatalogue>>('catalogue')
 
       // check if args prop is defined on the vnode
       let internalInstance
@@ -265,12 +265,12 @@ export function useInstanceCreator(prefix: string) {
               const { onLoop } = useRenderLoop()
               const scene = state.scene
               const raycaster = state.raycaster
-              const { pushCamera } = useCamera()
 
               let instance = createInstance(threeObj, attrs, slots)
               processProps(attrs, instance)
               // If the instance is a camera, push it to the camera stack
               if (instance instanceof PerspectiveCamera || instance instanceof OrthographicCamera) {
+                const { pushCamera } = useCamera()
                 pushCamera(instance)
               }
 

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

@@ -149,6 +149,8 @@ export function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef,
     preset = undefined,
   } = toRefs(options)
 
+  const { setState } = useTres()
+
   const { width, height } = resolveUnref(windowSize) ? useWindowSize() : useElementSize(container)
   const { logError } = useLogger()
   const { pixelRatio } = useDevicePixelRatio()
@@ -212,7 +214,6 @@ export function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef,
       premultipliedAlpha: resolveUnref(premultipliedAlpha),
     })
 
-    const { setState } = useTres()
     setState('renderer', renderer.value)
     setState('clock', new Clock())
     setState('aspectRatio', aspectRatio)