feat: adding warning when canvas parent height is 0px

Tresjs · Mar 28, 2023 · 4224103 · 4224103
1 parent 8b2bbb3
commit 4224103
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/src/composables/useRenderer/index.ts b/src/composables/useRenderer/index.ts
@@ -1,3 +1,4 @@
+import { watch, watchEffect } from 'vue'
 /* eslint-disable max-len */
 import { watch, ref, shallowRef, computed, toRefs } from 'vue'
 import {
@@ -152,11 +153,16 @@ export function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef,
   const { setState } = useTres()
 
   const { width, height } = resolveUnref(windowSize) ? useWindowSize() : useElementSize(container)
-  const { logError } = useLogger()
+  const { logError, logWarning } = useLogger()
   const { pixelRatio } = useDevicePixelRatio()
   const { pause, resume } = useRenderLoop()
   const aspectRatio = computed(() => width.value / height.value)
 
+  if (!resolveUnref(windowSize) && container?.value?.offsetHeight === 0) {
+    logWarning(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
+You could set windowSize=true to force the canvas to be the size of the window.`)
+  }
+
   const updateRendererSize = () => {
     if (!renderer.value) {
       return