feat(core): nice warning for camera at [0,0,0]

Tresjs · Mar 11, 2023 · 71eff1b · 71eff1b
1 parent f4f198c
commit 71eff1b
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 18 deletions.
diff --git a/packages/tres/src/App.vue b/packages/tres/src/App.vue
@@ -9,17 +9,20 @@ const gl = {
 function click(e) {
   console.log('click', e)
 }
+function enter(e) {
+  console.log('enter', e)
+}
 </script>
 
 <template>
   <Suspense>
     <TresCanvas v-bind="gl">
       <TresPerspectiveCamera :args="[75, 1, 0.1, 1000]" :position="[0, 2, 7]"></TresPerspectiveCamera>
-      <TresGridHelper :args="[4, 4]"></TresGridHelper>
-      <TresMesh @click="click">
+      <TresMesh :position="[0, 4, 0]" @click="click" @pointer-enter="enter">
         <TresBoxGeometry :args="[1, 1, 1]"></TresBoxGeometry>
         <TresMeshBasicMaterial color="teal"></TresMeshBasicMaterial>
       </TresMesh>
+      <TresGridHelper :args="[4, 4]"></TresGridHelper>
     </TresCanvas>
   </Suspense>
 </template>

diff --git a/packages/tres/src/components/TresCanvas.ts b/packages/tres/src/components/TresCanvas.ts
@@ -1,10 +1,10 @@
-import { defineComponent, h, onUnmounted, PropType, provide, ref, watch, watchEffect } from 'vue'
+import { defineComponent, h, PropType, provide, ref, watch } from 'vue'
 /* eslint-disable vue/one-component-per-file */
 import * as THREE from 'three'
 import { ShadowMapType, TextureEncoding, ToneMapping } from 'three'
 /* import { OrbitControls } from '@tresjs/cientos' */
 import { createTres } from '/@/core/renderer'
-import { useCamera, useRenderer, useTres, useRenderLoop } from '/@/composables'
+import { useCamera, useRenderer, useTres, useRenderLoop, useRaycaster } from '/@/composables'
 
 export const TresCanvas = defineComponent({
   name: 'TresCanvas',
@@ -45,8 +45,8 @@ export const TresCanvas = defineComponent({
       const { renderer, aspectRatio } = useRenderer(canvas, container, props)
       const { activeCamera } = useCamera()
 
-      provide('aspect-ratio', aspectRatio)
-      provide('renderer', renderer)
+      /*  provide('aspect-ratio', aspectRatio)
+      provide('renderer', renderer) */
 
       /* const controls = new OrbitControls(camera, renderer.domElement)
         controls.enableDamping = true */
@@ -65,10 +65,12 @@ export const TresCanvas = defineComponent({
 
       const { onLoop } = useRenderLoop()
 
+      const { raycaster, pointer } = useRaycaster()
+
       onLoop(() => {
         if (!activeCamera.value) return
 
-        /* raycaster.value.setFromCamera(pointer.value, activeCamera.value) */
+        raycaster.value.setFromCamera(pointer.value, activeCamera.value)
         renderer.value?.render(scene, activeCamera.value)
       })
 

diff --git a/packages/tres/src/composables/useRaycaster/index.ts b/packages/tres/src/composables/useRaycaster/index.ts
@@ -1,5 +1,5 @@
 import { Raycaster, Vector2 } from 'three'
-import { onUnmounted, provide, Ref, ref, ShallowRef, shallowRef } from 'vue'
+import { Ref, ref, ShallowRef, shallowRef } from 'vue'
 import { useTres } from '/@/composables'
 
 const raycaster = shallowRef(new Raycaster())
@@ -42,20 +42,16 @@ export function useRaycaster(): UseRaycasterReturn {
   setState('pointer', pointer)
   setState('currentInstance', currentInstance)
 
-  provide('raycaster', raycaster)
-  provide('pointer', pointer)
-  provide('currentInstance', currentInstance)
-
   function onPointerMove(event: MouseEvent) {
     pointer.value.x = (event.clientX / window.innerWidth) * 2 - 1
     pointer.value.y = -(event.clientY / window.innerHeight) * 2 + 1
   }
 
   window.addEventListener('pointermove', onPointerMove)
 
-  onUnmounted(() => {
+  /*  onUnmounted(() => {
     window.removeEventListener('pointermove', onPointerMove)
-  })
+  }) */
   return {
     raycaster,
     pointer,

diff --git a/packages/tres/src/core/nodeOps.ts b/packages/tres/src/core/nodeOps.ts
@@ -33,10 +33,12 @@ export const nodeOps: RendererOptions<Node, Element> = {
 
     if (instance.isCamera) {
       // Let users know that camera is in the center of the scene
-      logWarning(
-        // eslint-disable-next-line max-len
-        'Camera is positioned at the center of the scene, if this is not intentional try setting a position if your scene seems empty 🤗',
-      )
+      if (!props.position || props.position.every(v => 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 🤗',
+        )
+      }
       const { pushCamera } = useCamera()
       pushCamera(instance)
     }