Tween.js and THREE.js, how do I make a color tween work?

Question

I got a question regarding the use of tween.js with three.js

I've been trying to get a color tween to work that triggers on a mousedown. However it's not triggering the tween, and not giving any errors. I'm at a loss :(

for (var i = 0; i < scene.children.length; i++) {
  if (scene.children[i].position.z <= maxPositionZ && scene.children[i].position.z >= minPositionZ) {
    if (scene.children[i].position.y <= maxPositionY && scene.children[i].position.y >= minPositionY) {
      if (scene.children[i].position.x <= maxPositionX && scene.children[i].position.x >= minPositionX) {
        timer = timer + tweenSpeed
        doTimeout(i,timer);          
      }
    }
  }
}


function doTimeout(i,timer){
  var fadeouttimer = 1000 + timer
  setTimeout(function() {

  var tween = new TWEEN.Tween(scene.children[i].children[0].material.color).to({r: 1, g: 0, b: 0 }, 200).start()

  }, timer); 
}

DennisL DennisL · Accepted Answer · 2014-11-05T14:32:57

The awnser for my question, was that the TWEEN.update(); in the render function should be seperated in its's own function. It cannot be in the same function as requestAnimationFrame()

function render() {
  TWEEN.update();
  renderer.render(scene, camera);
}

Tween.js and THREE.js, how do I make a color tween work?

1 Answers