From 4ad1a3efa84cd43d35688329749704a549fa7134 Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Sat, 11 Mar 2023 19:22:46 +0100
Subject: [PATCH] feat(core): export useLogger

---
 .../src/core/usePamCameraMouse/index.ts       |  2 +-
 packages/tres/src/App.vue                     | 53 +++++++++++++++----
 packages/tres/src/composables/index.ts        |  1 +
 .../tres/src/composables/useLoader/index.ts   |  2 +-
 .../src/{iternal => composables}/useLogger.ts |  0
 .../src/composables/useRenderer/component.ts  |  2 +-
 .../tres/src/composables/useRenderer/index.ts |  2 +-
 packages/tres/src/core/nodeOps.ts             | 10 ++--
 packages/tres/src/demos/AkuAku.vue            | 20 +++++++
 packages/tres/src/demos/TestSphere.vue        | 14 ++---
 packages/tres/src/iternal/index.ts            |  1 -
 11 files changed, 82 insertions(+), 25 deletions(-)
 rename packages/tres/src/{iternal => composables}/useLogger.ts (100%)
 create mode 100644 packages/tres/src/demos/AkuAku.vue
 delete mode 100644 packages/tres/src/iternal/index.ts

diff --git a/packages/cientos/src/core/usePamCameraMouse/index.ts b/packages/cientos/src/core/usePamCameraMouse/index.ts
index 40983e8df..be6073701 100644
--- a/packages/cientos/src/core/usePamCameraMouse/index.ts
+++ b/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()
diff --git a/packages/tres/src/App.vue b/packages/tres/src/App.vue
index db42a7a37..fc5d0b24e 100644
--- a/packages/tres/src/App.vue
+++ b/packages/tres/src/App.vue
@@ -1,13 +1,43 @@
 <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)
@@ -15,16 +45,19 @@ function 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>
diff --git a/packages/tres/src/composables/index.ts b/packages/tres/src/composables/index.ts
index e1d457ca3..cffcfab57 100644
--- a/packages/tres/src/composables/index.ts
+++ b/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'
diff --git a/packages/tres/src/composables/useLoader/index.ts b/packages/tres/src/composables/useLoader/index.ts
index 5ff1c7d1d..da30f12cd 100644
--- a/packages/tres/src/composables/useLoader/index.ts
+++ b/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(
diff --git a/packages/tres/src/iternal/useLogger.ts b/packages/tres/src/composables/useLogger.ts
similarity index 100%
rename from packages/tres/src/iternal/useLogger.ts
rename to packages/tres/src/composables/useLogger.ts
diff --git a/packages/tres/src/composables/useRenderer/component.ts b/packages/tres/src/composables/useRenderer/component.ts
index 4d6c29c57..919019e2e 100644
--- a/packages/tres/src/composables/useRenderer/component.ts
+++ b/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'
 
 /**
diff --git a/packages/tres/src/composables/useRenderer/index.ts b/packages/tres/src/composables/useRenderer/index.ts
index 0a8d7dd88..8d463ee05 100644
--- a/packages/tres/src/composables/useRenderer/index.ts
+++ b/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 {
   /**
diff --git a/packages/tres/src/core/nodeOps.ts b/packages/tres/src/core/nodeOps.ts
index 5555e5d40..327b6dd05 100644
--- a/packages/tres/src/core/nodeOps.ts
+++ b/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)
diff --git a/packages/tres/src/demos/AkuAku.vue b/packages/tres/src/demos/AkuAku.vue
new file mode 100644
index 000000000..fae887beb
--- /dev/null
+++ b/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>
diff --git a/packages/tres/src/demos/TestSphere.vue b/packages/tres/src/demos/TestSphere.vue
index 6d81db6e6..67d63e2eb 100644
--- a/packages/tres/src/demos/TestSphere.vue
+++ b/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>
diff --git a/packages/tres/src/iternal/index.ts b/packages/tres/src/iternal/index.ts
deleted file mode 100644
index 93a88d834..000000000
--- a/packages/tres/src/iternal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useLogger'