From beee7b3d564e983e64b51bb4e97c6c357c6de89a Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Thu, 23 Mar 2023 18:25:03 +0100
Subject: [PATCH] feat: buffergeometry setAttribute logic

---
 playground/src/App.vue                     |  4 ++--
 playground/src/components/TheParticles.vue | 17 +++++++----------
 src/core/nodeOps.ts                        | 11 ++++++++++-
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/playground/src/App.vue b/playground/src/App.vue
index 08e9b4d96..04275867b 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import TheExperiment from './components/gltf/TheExperiment.vue'
+import TheParticles from './components/TheParticles.vue'
 </script>
 
 <template>
-  <TheExperiment />
+  <TheParticles />
 </template>
 
diff --git a/playground/src/components/TheParticles.vue b/playground/src/components/TheParticles.vue
index 989f320cb..ff4ff508c 100644
--- a/playground/src/components/TheParticles.vue
+++ b/playground/src/components/TheParticles.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
-import { OrbitControls } from '@tresjs/cientos/src'
-import { TresCanvas } from '../core/useRenderer/component'
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas, useRenderLoop } from '/@/'
 import { AdditiveBlending } from 'three'
-import { useRenderLoop } from '../core/useRenderLoop'
+
 /* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
 
-const state = reactive({
-  clearColor: 'teal',
+const gl = reactive({
+  clearColor: 'black',
   shadows: true,
   alpha: false,
-  physicallyCorrectLights: true,
 })
 
 const shader = {
@@ -52,7 +51,7 @@ const shader = {
   },
 }
 
-const firefliesCount = 30
+const firefliesCount = 3000
 const positionArray = new Float32Array(firefliesCount * 3)
 const scaleArray = new Float32Array(firefliesCount)
 
@@ -70,9 +69,8 @@ onLoop(({ elapsed }) => {
 })
 </script>
 <template>
-  <TresCanvas v-bind="state">
+  <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
-    <TresScene>
       <OrbitControls />
       <TresAmbientLight :intensity="0.5" />
       <TresPoints>
@@ -80,6 +78,5 @@ onLoop(({ elapsed }) => {
         <TresShaderMaterial v-bind="shader" />
       </TresPoints>
       <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
-    </TresScene>
   </TresCanvas>
 </template>
diff --git a/src/core/nodeOps.ts b/src/core/nodeOps.ts
index 45ef51c0d..1f1b71b7e 100644
--- a/src/core/nodeOps.ts
+++ b/src/core/nodeOps.ts
@@ -1,4 +1,4 @@
-import { Mesh } from 'three'
+import { BufferAttribute, Mesh } from 'three'
 import { useCamera, useRaycaster, useRenderLoop, useLogger } from '/@/composables'
 import { RendererOptions } from 'vue'
 import { catalogue } from './catalogue'
@@ -131,6 +131,15 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
         node.parent = scene as TresObject
       }
 
+      if(root.type === 'BufferGeometry') {
+        const chain = key.split('-')
+        key = chain.pop() as string
+        root.setAttribute(
+          kebabToCamel(key), 
+          new BufferAttribute(...(nextValue as ConstructorParameters<typeof BufferAttribute>))
+        )
+      }
+
       // Traverse pierced props (e.g. foo-bar=value => foo.bar = value)
       if (key.includes('-') && target === undefined) {
         const chain = key.split('-')