feat(core): export useLogger

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

@@ -1,7 +1,7 @@
 import { watchEffect, computed } from 'vue'
 import { Camera } from 'three'
 import { useWindowSize, useMouse } from '@vueuse/core'
-import { useLogger } from '@tresjs/core/src/iternal/useLogger'
+import { useLogger } from '@tresjs/core'
 
 export function usePamCameraMouse(disabled = false, factor = 5, camera: Camera | undefined) {
   const { x, y } = useMouse()

packages/tres/src/App.vue

@@ -1,30 +1,63 @@
 <script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
 import TresCanvas from './components/TresCanvas'
+import AkuAku from './demos/AkuAku.vue'
+import { useRenderLoop, useTres } from '/@/composables'
 // import TheEvents from '/@/components/TheEvents.vue'
 const gl = {
   antialias: true,
   alpha: true,
   clearColor: '#82DBC5',
 }
+
+const { state } = useTres()
+let controls = null
+
+const { onLoop } = useRenderLoop()
+
+watchEffect(() => {
+  if (state.camera && state.renderer) {
+    controls = new OrbitControls(state.camera, state.renderer.domElement)
+    controls.enableDamping = true
+    controls.dampingFactor = 0.05
+    controls.screenSpacePanning = false
+    controls.minDistance = 1
+    controls.maxDistance = 500
+    controls.maxPolarAngle = Math.PI / 2
+  }
+})
+
+onLoop(() => {
+  if (controls) {
+    controls.update()
+  }
+})
+
+const gridVisible = ref(false)
 function click(e) {
   console.log('click', e)
+  gridVisible.value = !gridVisible.value
 }
 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>
-      <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>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :args="[75, 1, 0.1, 1000]" :position="[0, 2, 7]"></TresPerspectiveCamera>
+    <TresAmbientLight :color="0xffffff" :intensity="0.75" />
+    <TresDirectionalLight :color="0xffffff" :intensity="0.75" :position="[-2, 2, 0]" />
+    <TresMesh :position="[0, 4, 0]" @click="click" @pointer-enter="enter">
+      <TresBoxGeometry :args="[1, 1, 1]"></TresBoxGeometry>
+      <TresMeshBasicMaterial color="teal"></TresMeshBasicMaterial>
+    </TresMesh>
+    <TresGridHelper v-if="gridVisible" :args="[4, 4]"></TresGridHelper>
+    <Suspense>
+      <AkuAku />
+    </Suspense>
+  </TresCanvas>
 </template>
 
 <style>

packages/tres/src/composables/index.ts

@@ -6,3 +6,4 @@ export * from './useLoader'
 export * from './useTexture'
 export * from './useTres'
 export * from './useRaycaster'
+export * from './useLogger'

packages/tres/src/composables/useLoader/index.ts

@@ -1,6 +1,6 @@
 import { isArray } from '@alvarosabu/utils'
 import { Object3D } from 'three'
-import { useLogger } from '../../iternal'
+import { useLogger } from '/@/composables'
 
 export interface TresLoader<T> extends THREE.Loader {
   load(

packages/tres/src/composables/useRenderer/component.ts

@@ -2,7 +2,7 @@ import { RendererPresetsType } from './const'
 import { ShadowMapType, TextureEncoding, ToneMapping } from 'three'
 import { h, defineComponent, ref, provide, onBeforeUnmount, PropType } from 'vue'
 import { useRenderer } from '.'
-import { useLogger } from '../../iternal'
+import { useLogger } from '/@/composables'
 import { TresVNodeType } from '/@/types'
 
 /**

packages/tres/src/composables/useRenderer/index.ts

@@ -24,7 +24,7 @@ import { normalizeColor } from '/@/utils/normalize'
 import { TresColor } from '/@/types'
 import { rendererPresets, RendererPresetsType } from './const'
 import { merge } from '/@/utils'
-import { useLogger } from '../../iternal'
+import { useLogger } from '/@/composables'
 
 export interface UseRendererOptions extends WebGLRendererParameters {
   /**

packages/tres/src/core/nodeOps.ts

@@ -1,6 +1,6 @@
 import { useCamera, useRaycaster, useRenderLoop } from '/@/composables'
 import { RendererOptions } from 'vue'
-import { useLogger } from '../iternal'
+import { useLogger } from '/@/composables'
 import { catalogue } from './catalogue'
 import { Mesh } from 'three'
 import { useEventListener } from '@vueuse/core'
@@ -24,6 +24,7 @@ function noop(fn: string): any {
 export const nodeOps: RendererOptions<TresObject, TresObject> = {
   createElement(type, _isSVG, _isCustomizedBuiltIn, props) {
     if (type === 'template') return null
+    if (type === 'div') return null
     let instance
 
     if (props === null) {
@@ -110,6 +111,7 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
     }
   },
   remove(node) {
+    if (!node) return
     const parent = node.parent
     if (parent) {
       if (parent.isObject3D && node.isObject3D) {
@@ -132,13 +134,13 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
     let target = root[key]
 
     // Traverse pierced props (e.g. foo-bar=value => foo.bar = value)
-    if (key.includes('-')) {
+    /* if (key.includes('-')) {
       const chain = key.split('-')
       target = chain.reduce((acc, key) => acc[key], root)
       key = chain.pop() as string
 
       if (!target?.set) root = chain.reduce((acc, key) => acc[key], root)
-    }
+    } */
 
     const value = nextValue
     /*   try {
@@ -148,7 +150,7 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
 
     // Set prop, prefer atomic methods if applicable
     if (!target?.set) root[key] = value
-    else if (target.constructor === value.constructor) target.copy(value)
+    else if (target.constructor === value.constructor && target?.copy) target?.copy(value)
     else if (Array.isArray(value)) target.set(...value)
     else if (!target.isColor && target.setScalar) target.setScalar(value)
     else target.set(value)

packages/tres/src/demos/AkuAku.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useTweakPane, useGLTF } from '@tresjs/cientos'
+
+useTweakPane()
+
+const { scene: model } = await useGLTF(
+  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf',
+  {
+    draco: true,
+  },
+)
+model.position.set(0, 4, 0)
+model.updateMatrixWorld()
+</script>
+
+<template>
+  <Suspense>
+    <TresMesh v-bind="model" />
+  </Suspense>
+</template>

packages/tres/src/demos/TestSphere.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable max-len -->
 <script setup lang="ts">
 import { Ref, ref } from 'vue'
 import { useRenderLoop, useTexture } from '/@/composables/'
@@ -13,13 +14,14 @@ onLoop(({ elapsed }) => {
   }
 })
 
-/* const texture = await useTexture(['/textures/stylized-leaves-material/Stylized_Leaves_002_basecolor.jpg']) */
 const pbrTexture = await useTexture({
-  map: '/textures/stylized-leaves-material/Stylized_Leaves_002_basecolor.jpg',
-  displacementMap: '/textures/stylized-leaves-material/Stylized_Leaves_002_height.png',
-  roughnessMap: '/textures/stylized-leaves-material/Stylized_Leaves_002_roughness.jpg',
-  normalMap: '/textures/stylized-leaves-material/Stylized_Leaves_002_normal.jpg',
-  ambientOcclusion: '/textures/stylized-leaves-material/Stylized_Leaves_002_ambientOcclusion.jpg',
+  map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',
+  displacementMap:
+    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',
+  roughnessMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Roughness.jpg',
+  normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_NormalGL.jpg',
+  ambientOcclusion:
+    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
 })
 </script>
 <template>