Currently, I am facing a challenge with scaling a moving object in my THREE project. Whenever I attempt to scale the object, it not only changes its size but also shifts it to a different position.
Here is the code snippet I am using to set the scale of the object:
// initiates the scale transition
function doTriangleScale(intersection){
var tween = new TWEEN.Tween(intersection.object.parent.scale)
.to({
x: scaleSize,
y: scaleSize,
z: scaleSize,
}, scaleEase)
tween.start();
// should have a check if the user is still on the object in question, no time for this now
setTimeout(function(){
doTriangleScaleRevert(intersection);
}, 2000)
}
// triggers the scale revert to default
function doTriangleScaleRevert(intersection) {
var tween = new TWEEN.Tween(intersection.object.parent.scale)
.to({
x: 1,
y: 1,
z: 1
}, scaleEase)
tween.start();
}
The current solution works fine when the objects are static. However, my objects are dynamic and continuously moving as per the following animation code:
scene.traverse(function (e) {
if (e instanceof THREE.Mesh && e.name != "pyramid") {
e.rotation.x += rotationSpeed;
e.rotation.y += rotationSpeed;
e.rotation.z += rotationSpeed;
if(triangleFloatLeft){
e.position.x += 0.01;
}else{
e.position.x -= 0.01;
}
}
});
I am seeking a method that will allow me to scale the objects from their center while they are in motion.
Any help or suggestions would be greatly appreciated!