fix: added default position and direction to camera if props are not …

…passed
Tresjs · Apr 6, 2023 · 63a340f · 63a340f
1 parent 8d030fb
commit 63a340f
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 13 deletions.
diff --git a/docs/guide/your-first-scene.md b/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" />

diff --git a/playground/components.d.ts b/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']

diff --git a/playground/src/components/TheFirstScene.vue b/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="true">
+    <TresPerspectiveCamera />
+    <TresMesh>
+      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+      <TresMeshBasicMaterial color="orange" />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts"></script>
 <template>
   <Suspense>
-    <TheEvents />
+    <TheFirstScene />
   </Suspense>
 </template>
diff --git a/playground/src/style.css b/playground/src/style.css
@@ -1,4 +1,4 @@
-html,
+/* html,
 body {
   margin: 0;
   padding: 0;
@@ -9,3 +9,4 @@ body {
   height: 100%;
   width: 100%;
 }
+ */
diff --git a/src/core/nodeOps.ts b/src/core/nodeOps.ts
@@ -6,8 +6,6 @@ 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)