feat: buffergeometry setAttribute logic

Tresjs · Mar 23, 2023 · beee7b3 · beee7b3
1 parent 0ccf3ea
commit beee7b3
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git 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
@@ -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,16 +69,14 @@ 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>
         <TresBufferGeometry :position="[positionArray, 3]" :a-scale="[scaleArray, 1]" />
         <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
@@ -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('-')