feat(cientos): logger composable

packages/cientos/src/composables/useLogger.ts

@@ -0,0 +1,32 @@
+/* eslint-disable no-console */
+export const isProd = import.meta.env.MODE === 'production'
+
+const logPrefix = '[TresJS - Cientos ▲ ■ ♥] '
+
+interface LoggerComposition {
+  logError: (message: string, error?: Error | ErrorEvent) => void
+  logWarning: (message: string) => void
+  logMessage: (name: string, value: any) => void
+}
+
+export function useLogger(): LoggerComposition {
+  function logError(message: string, error?: Error | ErrorEvent) {
+    console.error(`${logPrefix} ${message}`, error || '')
+  }
+
+  function logWarning(message: string) {
+    console.warn(`${logPrefix} ${message}`)
+  }
+
+  function logMessage(name: string, value: any) {
+    if (!isProd) {
+      console.log(`${logPrefix} - ${name}:`, value)
+    }
+  }
+
+  return {
+    logError,
+    logWarning,
+    logMessage,
+  }
+}

packages/cientos/src/core/TransformControls.vue

@@ -67,8 +67,8 @@ function addEventListeners(controls: TransformControlsImp) {
 watch(
   () => props.object,
   () => {
-    if (state.camera?.value && state.renderer && state.scene && props.object) {
-      controls.value = new TransformControlsImp(state.camera.value, unref(state.renderer).domElement)
+    if (state.camera && state.renderer && state.scene && props.object) {
+      controls.value = new TransformControlsImp(state.camera, unref(state.renderer).domElement)
 
       controls.value.attach(unref(props.object))
       state.scene.add(unref(controls) as TransformControlsImp)

packages/cientos/src/core/usePamCameraMouse/component.ts

@@ -18,7 +18,7 @@ export const PamCameraMouse = defineComponent({
   },
   setup(props: any) {
     const { state } = useCientos()
-    const camera = state?.camera?.value
+    const camera = state?.camera
 
     const PamCameraMouse = usePamCameraMouse(props.disabled as boolean, props.factor as number, camera)
 

packages/cientos/src/core/usePamCameraMouse/index.ts

@@ -1,21 +1,24 @@
 import { watchEffect, computed } from 'vue'
 import { Camera } from 'three'
 import { useWindowSize, useMouse } from '@vueuse/core'
+import { useLogger } from '/@/composables/useLogger'
 
 export function usePamCameraMouse(disabled = false, factor = 5, camera: Camera | undefined) {
   const { x, y } = useMouse()
+  const { logWarning } = useLogger()
   const { width, height } = useWindowSize()
   const cameraX = computed(() => (x.value / width.value - 0.5) * factor)
   const cameraY = computed(() => -(y.value / height.value - 0.5) * factor)
-  if(camera){
-      const { x: initX, y: initY } = camera.position
-      watchEffect(() => {
-        if (disabled) return
-        if (camera) {
-          camera.position.x = initX + cameraX.value
-          camera.position.y = initY + cameraY.value
-        }
-      })
-  } else console.warn("camera is required")
-
+  if (camera) {
+    const { x: initX, y: initY } = camera.position
+    watchEffect(() => {
+      if (disabled) return
+      if (camera) {
+        camera.position.x = initX + cameraX.value
+        camera.position.y = initY + cameraY.value
+      }
+    })
+  } else {
+    logWarning('Scene must contain a Camera component to use this composable')
+  }
 }

packages/cientos/vite.config.ts

@@ -13,7 +13,7 @@ import { lightGreen, yellow, gray, bold } from 'kolorist'
 import pkg from './package.json'
 
 // eslint-disable-next-line no-console
-console.log(`${lightGreen('▲')} ${gray('■')} ${yellow('⚡️')} ${bold('Tres/cientos')} v${pkg.version}`)
+console.log(`${lightGreen('▲')} ${gray('■')} ${yellow('♥')} ${bold('Tres/cientos')} v${pkg.version}`)
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: {

packages/tres/src/components/TheEnvironment.vue

@@ -24,13 +24,11 @@ const environmentTexture = shallowRef()
 watch(environmentTexture, ({ getTexture }) => {
   envMap = getTexture()
 })
-
 </script>
 <template>
   <!--   <TresCanvas v-bind="state"> -->
   <TresCanvas preset="realistic">
-    <TresPerspectiveCamera :position="[10, 10, 18]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
-     <PamCameraMouse :factor="2" />
+    <PamCameraMouse :factor="2" />
     <TresScene>
       <Environment
         ref="environmentTexture"