Why my instance is not tweening?

Questions
1

Hi,

I made this example so that you can help me. When you click on the button normally my lights instance (number 1) should fall via the ‘fall’ function which is a simple transition.
But it doesn’t work…I have however, it seems to me, informed the good method via the instance class with the animate function which turns in loop. Honestly, I’ve been working on it for two days and I can’t see my error.

class Lights extends Instance {
  constructor(config) {
    super(config)
    this.config = config;
    console.log(this.dummy)
    this.tw_fall = []
    let b = 0
    for (let _x = 0; _x < (this.config.units_x * this.config.units_x); _x++) {
      for (let _z = 0; _z < this.config.units_z; _z++) {
        this.dummy[_x][0].position.set(_x, 12, _z).multiplyScalar(this.config.scalar);
        this.dummy[_x][0].updateMatrix();
        this.mesh.setMatrixAt(b, this.dummy[_x][0].matrix);
        b++
      }
    }
    this.fall(22)
  }
  fall(num) {
    this.tw_fall[num] = new TWEEN.Tween(this.dummy[num][0].position)
      .to({
        y: 0,
      }, 1000)
      .easing(TWEEN.Easing.Linear.None)
      .start()
      .onComplete(() => {
        console.log("ok")
      });
  }
}

Thanks for your help

2

Hi,

I see where is the problem, in my function animate.

01

I have 25 dummy on the z and x axis at 0 on y axis

this.dummy[_x][_y]

02
02468×578 27.6 KB

However, when i do this, nothing appens with my function fall (see in my codepen) and my elements are not in grid, why ?
I increment to 25 my dummy.matrix along the y axis and with ‘b’ i pass all my elements…

animate() {
		let b = 0
		this.mesh.instanceMatrix.needsUpdate = true;
		// for (let i = 0; i < this.config.units_z; i++) {
		for (let _x = 0; _x < 25; _x++) {
			for (let _y = 0; _y < 1 _y++) {
				// console.log("animate", i, _x, _y)
				this.dummy[_x][_y].updateMatrix();
				this.mesh.setMatrixAt(b++, this.dummy[_x][_y].matrix);
			}
		}
	}

and the result is this :

All my dummies is in line…

What i’m doing wrong ?

3

Hi!
Everything seems okay with your code, you just forgot to add TWEEN.update() in the animation loop:

function animate() {
  requestAnimationFrame(animate);
  render();
  lights.animate()
  TWEEN.update(); // add this line
}
4

Hi, thanks it’ s true, I forgot to add this in my codepen, but now all my instances are in a row, why don’t they stay in a grid like they were at the beginning?

02

  animate() {
        this.mesh.instanceMatrix.needsUpdate = true;
      let b = 0
            for (let _x = 0; _x < (this.config.units_x * this.config.units_x); _x++) {
                for (let _y = 0; _y < this.config.units_y; _y++) {
                    this.dummy[_x][_y].updateMatrix();
                    this.mesh.setMatrixAt(b++, this.dummy[_x][_y].matrix);
                  if (b > 25){
                    b = 0
                  }
               }               
         }    
    }

5

Nobody for this ?

6

find my error was in positions of my dummies :

class Lights extends Instance {
	constructor(config) {
		super(config)
		this.config = config;
		console.log(this.dummy)
		this.tw_fall = []
		let b = 0
		for (let _x = 0; _x < this.config.units_x; _x++) {
			for (let _z = 0; _z < this.config.units_z; _z++) {
				this.dummy[b][0].position.set(_x, 12, _z).multiplyScalar(this.config.scalar);
				this.dummy[b][0].updateMatrix();
				this.mesh.setMatrixAt(b, this.dummy[_x][0].matrix);
				b++
			}
		}
		// this.fall(22)
	}
	fall(num) {
		console.log(this.dummy[num][0].position);
		this.tw_fall[num] = new TWEEN.Tween(this.dummy[num][0].position)
			.to({
				y: 0,
			}, data.speed_fall)
			.easing(TWEEN.Easing.Linear.None)
			.start()
			.onComplete(() => {
				console.log("ok")
			});
	}
	animate() {
		this.mesh.instanceMatrix.needsUpdate = true;
		for (let i = 0; i < (this.config.units_x * this.config.units_x); i++) {
			this.dummy[i][0].updateMatrix();
			this.mesh.setMatrixAt(i, this.dummy[i][0].matrix);
		}
	}

}
export default Lights