Loop through array for instanciation

Questions
1

hi,

:keyboard: Assuming i have this type of array (config.puppet_position) :

01

:arrow_forward: I use this to make a test for instanciation. In fact i would use 1000 elements and subdivise this in 100 units to animate them :

Peek 05-09-2021 07-27

:keyboard: Actually, i do this and this is really not the right method since it is rather manual mode :

	for (var j = 0; j < 5; j++) {
			this.mesh.puppet[j].position.set(this.config.puppet_position[0][j].x, this.config.puppet_position[0][j].y, this.config.puppet_position[0][j].z)
			this.mesh.puppet[j + 5].position.set(this.config.puppet_position[1][j].x, this.config.puppet_position[1][j].y, this.config.puppet_position[1][j].z)
		}

:speech_balloon: How to automate this procedure according to the number of packets that I will have in my array ?
I try with loop trough elements and first and second array but without success…
I even managed to do an infinite loop :fearful:

Thanks for your help.

2

Hi,

I have updated my code like this :

import * as THREE from "https://threejs.org/build/three.module.js";
import {
    CSM
} from "https://threejs.org/examples/jsm/csm/CSM.js";
import {
    TWEEN
} from 'https://unpkg.com/three@0.125.2/examples/jsm/libs/tween.module.min'
import * as utils from "../utilities/utils.js"
import create_geo from "./Geometry.js";
import create_mat from "./Material.js";


class Instance {
    constructor(config) {
        this.config = config;
        g.cube = create_geo(this.config);
        m.cube = create_mat(this.config);

        this.obj = new THREE.InstancedMesh(g.cube, m.cube, this.config.count);
        this.obj.name = "Instance";
        this.obj.castShadow = true;
        this.obj.receiveShadow = true;
        this.config["scene"].add(this.obj);

        //HERE
        this.num = 0
        this.units = 7
        this.division = 4
        this.sum = this.units * this.division
        console.log((this.sum))
        this.pantin = []
        for (let i = 0; i < this.units; i++) {
            this.pantin[i] = [];
            for (let j = 0; j < this.division; j++) {
                this.pantin[i][j] = new THREE.Object3D();
                this.pantin[i][j].position.set(0, i * 5, j + j * 10)

            }
        }
    }
    animate() {
        this.obj.instanceMatrix.needsUpdate = true;
        for (var i = 0; i < this.units; i++) {
            for (var j = 0; j < this.division; j++) {
                this.pantin[i][j].updateMatrix()
                this.obj.setMatrixAt(this.num, this.pantin[i][j].matrix);
                this.num++
            }
        }

        if (this.num > this.sum) {
            this.num = 0
        }
    }
}

export default Instance;

Now I have this result :

Peek 06-09-2021 23-05

It’s not what i want…I would like to have 4 groups of 7 units and i have only 4 groups with different units (3 units and 2 units )…Why ?

Could you help me ?

3

Is my explanation not clear? Please ask me if not?

4

Hi!

Maybe this parameter set to 10?

5

@prisoner849
I’m embarrassed, do you also find yourself looking like crazy and in fact it is a stupid mistake the cause of everything? Thank you so much.

1 Like
6

Every time I code :sweat_smile: