Merge pull request #191 from Tresjs/bugfix/190-v2-set-default-position-and-look-at-for-camera

fix: 190 v2 set default position and look at for camera

docs/guide/your-first-scene.md

@@ -92,7 +92,9 @@ Then you can add a [**PerspectiveCamera**](https://threejs.org/docs/index.html?q
 
 ```vue
 <template>
-  <TresCanvas window-size> <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" /> </TresCanvas>
+  <TresCanvas window-size>
+    <TresPerspectiveCamera />
+  </TresCanvas>
 </template>
 ```
 
@@ -118,7 +120,7 @@ Now let's see how we can easily achieve the same with **TresJS**. To do that we
 ```vue
 <template>
   <TresCanvas window-size>
-    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0,0,0]"" />
+    <TresPerspectiveCamera />
     <TresMesh>
       <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
       <TresMeshBasicMaterial color="orange" />
@@ -142,7 +144,7 @@ import { TresCanvas } from '@tresjs/core'
 
 <template>
   <TresCanvas clear-color="#82DBC5" window-size>
-    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0,0,0]"" />
+    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
     <TresMesh>
       <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
       <TresMeshBasicMaterial color="orange" />

playground/components.d.ts

@@ -28,6 +28,7 @@ declare module '@vue/runtime-core' {
     TheExperience: typeof import('./src/components/TheExperience.vue')['default']
     TheExperiment: typeof import('./src/components/gltf/TheExperiment.vue')['default']
     TheFireFlies: typeof import('./src/components/portal-journey/TheFireFlies.vue')['default']
+    TheFirstScene: typeof import('./src/components/TheFirstScene.vue')['default']
     TheGizmos: typeof import('./src/components/TheGizmos.vue')['default']
     TheGroups: typeof import('./src/components/TheGroups.vue')['default']
     TheParticles: typeof import('./src/components/TheParticles.vue')['default']

playground/src/components/TheFirstScene.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { TresCanvas } from '/@/'
+
+const context = ref()
+
+watchEffect(() => {
+  console.log(context)
+})
+</script>
+
+<template>
+  <TresCanvas ref="context" clear-color="#82DBC5" window-size>
+    <TresPerspectiveCamera />
+    <TresMesh>
+      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+      <TresMeshBasicMaterial color="orange" />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

playground/src/pages/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts"></script>
 <template>
   <Suspense>
-    <TheEvents />
+    <TheFirstScene />
   </Suspense>
 </template>

src/composables/useRenderer/index.ts

@@ -108,7 +108,7 @@ export interface UseRendererOptions extends WebGLRendererParameters {
    * @default 0x000000
    */
   clearColor?: MaybeComputedRef<TresColor>
-  windowSize?: MaybeComputedRef<boolean>
+  windowSize?: MaybeComputedRef<boolean | string>
   preset?: RendererPresetsType
 }
 
@@ -148,7 +148,10 @@ export function useRenderer(options: UseRendererOptions) {
 
   const { state, setState } = useTres()
 
-  const { width, height } = resolveUnref(windowSize) ? useWindowSize() : useElementSize(state.container)
+  const { width, height } =
+    resolveUnref(windowSize) == true || resolveUnref(windowSize) === '' || resolveUnref(windowSize) === 'true'
+      ? useWindowSize()
+      : useElementSize(state.container)
   const { logError, logWarning } = useLogger()
   const { pixelRatio } = useDevicePixelRatio()
   const { pause, resume } = useRenderLoop()

src/core/nodeOps.ts

@@ -1,13 +1,11 @@
 import { BufferAttribute } from 'three'
-import { useCamera, useLogger } from '/@/composables'
+import { useCamera } from '/@/composables'
 import { RendererOptions } from 'vue'
 import { catalogue } from './catalogue'
 import { isFunction } from '@vueuse/core'
 import { TresObject } from '../types'
 import { isHTMLTag, kebabToCamel } from '../utils'
 
-const { logWarning } = useLogger()
-
 const onRE = /^on[^a-z]/
 export const isOn = (key: string) => onRE.test(key)
 
@@ -32,12 +30,11 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
     }
 
     if (instance.isCamera) {
-      // Let users know that camera is in the center of the scene
-      if (!props?.position || props?.position.every((v: number) => v == 0)) {
-        logWarning(
-          // eslint-disable-next-line max-len
-          'Camera is positioned at the center of the scene [0,0,0], if this is not intentional try setting a position if your scene seems empty 🤗',
-        )
+      if (!props?.position) {
+        instance.position.set(3, 3, 3)
+      }
+      if (!props?.lookAt) {
+        instance.lookAt(0, 0, 0)
       }
       const { pushCamera } = useCamera()
       pushCamera(instance)