BufferGeometry with buffer attributes prop

src/geometries/Geometry.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsOptions, defineComponent, watch } from 'vue'
-import { BufferGeometry } from 'three'
+import { ComponentPropsOptions, defineComponent, PropType, watch } from 'vue'
+import { BufferAttribute, BufferGeometry } from 'three'
 import { MeshInjectionKey, MeshInterface } from '../meshes/Mesh'
 
 export interface GeometrySetupInterface {
@@ -8,6 +8,13 @@ export interface GeometrySetupInterface {
   watchProps?: string[]
 }
 
+export interface GeometryAttributeInterface {
+  name: string
+  array: ArrayLike<number>
+  itemSize: number
+  normalized?: boolean
+}
+
 // function defaultSetup(): GeometryInterface {
 //   const mesh = inject('mesh') as MeshInterface
 //   const watchProps: string[] = []
@@ -19,6 +26,7 @@ const Geometry = defineComponent({
     rotateX: Number,
     rotateY: Number,
     rotateZ: Number,
+    attributes: { type: Array as PropType<Array<GeometryAttributeInterface>>, default: () => ([]) },
   },
   // inject for sub components
   inject: {
@@ -46,7 +54,17 @@ const Geometry = defineComponent({
     this.geometry?.dispose()
   },
   methods: {
-    createGeometry() {},
+    createGeometry() {
+      const bufferAttributes: Record<string, unknown> = {}
+      const geometry = new BufferGeometry()
+      this.attributes.forEach(attribute => {
+        if (attribute.name && attribute.itemSize && attribute.array) {
+          const bufferAttribute = bufferAttributes[attribute.name] = new BufferAttribute(attribute.array, attribute.itemSize, attribute.normalized)
+          geometry.setAttribute(attribute.name, bufferAttribute)
+        }
+      })
+      this.geometry = geometry
+    },
     rotateGeometry() {
       if (!this.geometry) return
       if (this.rotateX) this.geometry.rotateX(this.rotateX)

src/geometries/index.ts

@@ -1,3 +1,5 @@
+export { default as BufferGeometry } from './Geometry'
+
 export { default as BoxGeometry } from './BoxGeometry'
 export { default as CircleGeometry } from './CircleGeometry'
 export { default as ConeGeometry } from './ConeGeometry'