From 4189083d24d6b95f200df69b94303c41e081c78f Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Thu, 1 Jun 2023 14:32:55 +0200
Subject: [PATCH] chore: fixed events demo

---
 playground/src/components/TheEvents.vue | 37 ++++++++++++-------------
 playground/src/pages/index.vue          |  2 +-
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/playground/src/components/TheEvents.vue b/playground/src/components/TheEvents.vue
index 74b9f0765..44dc90708 100644
--- a/playground/src/components/TheEvents.vue
+++ b/playground/src/components/TheEvents.vue
@@ -1,56 +1,53 @@
 <script setup lang="ts">
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-import { reactive } from 'vue'
-import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+
+import { OrbitControls } from '@tresjs/cientos'
 
-const state = reactive({
-  clearColor: '#201919',
+const gl = {
+  clearColor: '#202020',
   shadows: true,
   alpha: false,
   shadowMapType: BasicShadowMap,
   outputColorSpace: SRGBColorSpace,
   toneMapping: NoToneMapping,
-})
+}
 
 function onClick(ev) {
   if (ev) {
-    console.log('click', ev)
     ev.object.material.color.set('#008080')
   }
 }
 
 function onPointerEnter(ev) {
   if (ev) {
-    console.log('enter', ev)
-    ev.object.material.color.set('#DFFF45')
+    ev.object.material.color.set('#CCFF03')
   }
 }
 
-function onPointerMove(ev) {
+function onPointerLeave(ev) {
   if (ev) {
-    console.log('move', ev)
+    /*  ev.object.material.color.set('#efefef') */
   }
 }
 
-function onPointerLeave(ev) {
+function onPointerMove(ev) {
   if (ev) {
-    console.log('leave', ev)
-    /*  ev.object.material.color.set('#efefef') */
+    console.log(ev)
   }
 }
 </script>
 
 <template>
-  <TresCanvas v-bind="state">
-    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[0, 0, 0]" />
+    <OrbitControls />
 
-    <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.2" cast-shadow />
     <template v-for="x in [-2.5, 0, 2.5]">
       <template v-for="y in [-2.5, 0, 2.5]">
         <TresMesh
           v-for="z in [-2.5, 0, 2.5]"
-          :key="[x, y, z]"
+          :key="`${[x, y, z]}`"
           :position="[x, y, z]"
           @click="onClick"
           @pointer-enter="onPointerEnter"
@@ -62,7 +59,7 @@ function onPointerLeave(ev) {
         </TresMesh>
       </template>
     </template>
-    <OrbitControls />
-    <TresAmbientLight :intensity="0.5" />
+    <TresDirectionalLight :intensity="1" />
+    <TresAmbientLight :intensity="1" />
   </TresCanvas>
 </template>
diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
index da3453754..dd2b2091f 100644
--- a/playground/src/pages/index.vue
+++ b/playground/src/pages/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts"></script>
 <template>
   <Suspense>
-    <Udsz />
+    <TheEvents />
   </Suspense>
 </template>