test instanced mesh

components/model/fence.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { BufferGeometry, InstancedBufferGeometry, Matrix4, MeshNormalMaterial } from 'three';
+
 const props = defineProps(['index', 'models'])
 
 const lamelles_count = use_lamelles_count()
@@ -34,6 +36,32 @@ if (extra.value) {
     pillar_one_pos.value = (extra.value as number) * -0.5 - 0.015
     pillar_two_pos.value = (extra.value as number) * 0.5 + pillar_size + bSize - 0.01
 }
+
+const instancedMesh = shallowRef();
+watch(instancedMesh, (mesh) => {
+    console.log('rr')
+    for (let i = 0; i < 4; i++) {
+        instancedMesh.value.setMatrixAt(
+            i,
+            new Matrix4().makeTranslation(i, 1, 1)
+        );
+    }
+    // mesh.instanceMatrix.setUsage(DynamicDrawUsage);
+});
+onMounted(() => {
+    for (let i = 0; i < 4; i++) {
+        const elapsed = 1
+        const x = Math.sin(elapsed + i * 0.3) * 3.5;
+        const y = Math.cos(elapsed + i * 0.5) * 4;
+        const z = Math.cos(elapsed + i * 0.3) * 3.5;
+        if (instancedMesh.value) {
+            instancedMesh.value.setMatrixAt(
+                i,
+                new Matrix4().makeTranslation(x, y, z)
+            );
+        }
+    }
+})
 watch([section_count, fence_section, extra_section], () => {
     extra.value = (extra_section.value && props.index == (section_count.value + 1)) ? extra_section.value * 0.001 : false
     if (extra_section && props.index == (section_count.value + 1)) {
@@ -81,12 +109,23 @@ watch([section_count, fence_section, extra_section], () => {
         </TresGroup>
 
         <TresGroup name="lamelles">
-            <template v-for="(n, i) in lamelles_count">
+            <template v-for="(n, i) in lamelles_count" v-if="false">
                 <TresGroup :position="[pillar_size * 0.5, (lSize * i), 0.02]"
                     :scale-x="((extra as number) || fence_section) * 10">
                     <ModelItem :model="props.models.lamelle" />
                 </TresGroup>
             </template>
+
+            <TresMesh :position-z="1"
+                :scale-x="((extra as number) || fence_section) * 10">
+                <TresObject3D v-bind="props.models.lamelle.children[0]" />
+                <TresMeshBasicMaterial color="blue" />
+            </TresMesh>
+            <TresInstancedMesh ref="instancedMesh" :args="[null!, null!, 4]"
+                :scale-x="((extra as number) || fence_section) * 10">
+                <TresBufferGeometry v-bind="props.models.lamelle.children[0].geometry" />
+                <TresMeshBasicMaterial color="red" />
+            </TresInstancedMesh>
         </TresGroup>
         <TresGroup name="lam_fastening_one">
             <template v-for="(n, i) in lamelles_count">