OnUpdate tweened values are NaN

[git-ayas]

I have just started working with Tween.js and ask forgiveness if wasting time. I have written a basic tween as in the code snippet. partTween= new TWEEN.Tween({y:100}); partTween.to({y:0},1000); partTween.onUpdate(function(d){ console.log(d) }) logs keep showing NaN. If I assign a variable, even its value gets changed to NaN. Using Tween.js(tween.esm.js) 18.3.2 on chrome browser, Windows 10

[mikebolt]

Are you calling TWEEN.update? Don't forget to include this code:

// Setup the animation loop.
function animate(time) {
  requestAnimationFrame(animate);
  TWEEN.update(time);
}
requestAnimationFrame(animate);

[git-ayas]

Are you calling TWEEN.update? Don't forget to include this code:

// Setup the animation loop.
function animate(time) {
  requestAnimationFrame(animate);
  TWEEN.update(time);
}
requestAnimationFrame(animate);

Nevermind. I found out that threejs included in my other dependencies. This is a duplicate of issue #175. @mikebolt any way to work around this issue?

[mikebolt]

Are you trying to tween instances of THREE.Vector3? If you provide some code I can figure it out.

Only the properties that are present in the object passed to .to will be tweened. So, the following code should work:

const t = new THREE.Vector3(4.0, 5.0, 6.0);

const tween = new TWEEN.Tween(t);
t.to({x: 7.0, y: 8.0, z: 9.0}, 1000);
t.start();

However, if you also pass a THREE.Vector3 to the .to function then some weird stuff might happen.

[git-ayas]

Are you trying to tween instances of THREE.Vector3? If you provide some code I can figure it out.

Only the properties that are present in the object passed to .to will be tweened. So, the following code should work:

const t = new THREE.Vector3(4.0, 5.0, 6.0);

const tween = new TWEEN.Tween(t);
t.to({x: 7.0, y: 8.0, z: 9.0}, 1000);
t.start();

However, if you also pass a THREE.Vector3 to the .to function then some weird stuff might happen.

Sorry for replying so late. I am using t.to({x: 7.0, y: 8.0, z: 9.0}, 1000); and not using three vectors. There is no NaN values if I remove threejs from my project completely. My code is the same as the one you have put here but with a Threejs import.

[yifanya]

@git-ayas Have you solved it? I also meet this question... 😭

[mikebolt]

@yifanya @git-ayas I'm re-opening this. If you could provide a complete program that demonstrates this issue that would really help.

[yifanya]

@mikebolt I'm very sorry. I find this error in my program and meaningless to others, you can close this issus. 😅

[trusktr]

Three.js has lately removed Tween.js from being shipped with Three.js. This is probably not an issue now.

The reason this happens might be that TWEEN global conflicted with each other. We recommend not using TWEEN. Instead use tween.update() on your individual tweens, or use a new Group to make your own groups of tweens, and always avoid TWEEN (which itself is a Group that all tweens use by default).

Here's guide on using Groups:

https://tweenjs.github.io/tween.js/docs/user_guide.html#controlling-groups-of-tweens

Also note you can pass false to tween.to({...}, false) so it will not have a group, and it will not use the default global TWEEN group.

We may remove this TWEEN group soon because it causes confusion (and source of errors).