// let me explain what the code does, there are two boxes, one blue and one green, when you click on the green box it causes the blue box to move in a circle in the air, there are 12 points on the circle, and each point is a case, while the blue boxes are moving both the blue and green boxes are rotating. This code works fine, what is the problem is that at the last rotation, when the blue box returns to it's starting point, there is a mysterious rapid 360 rotation of the blue box that is not in my code, and also the green box also rotates 360 degrees with no explanation. I looked on StackOverFlow, and In the Documentation, and on Discord, but I don't know what to call this problem, and you know it's hard to search when you don't know the name of the thing you are searching for. Any help as to what is causing this mysterious 360 rotation at the click reset point? I don't want it to have a mysterious 360 rotation marking that point as special somehow instead of being just the same as all the other points.
init: function () {
var rota = document.querySelector(".rota");
var caller = document.querySelector("#caller");
var clickCount = 0;
let shouldScaleUp = true; // Keep track of scaling direction
caller.addEventListener("click", function (e) {
var rotation = caller.getAttribute("rotation");
var position = caller.getAttribute("position");
var scale = caller.getAttribute("scale");
// Blue box rotation, position, and scale
var angle = (clickCount * Math.PI) / 6 - Math.PI / 2; // Angle for each click (360 degrees / 12 clicks), offset by -90 degrees
var newX, newY, newZ;
switch (clickCount) {
case 0:
newX = 3;
newY = 2;
newZ = -3;
break;
case 1:
newX = 2;
newY = 2;
newZ = -2;
break;
// case 2 through 10 you can just imagine
case 11:
newX = 2;
newY = 2;
newZ = -4;
break;
case 12:
newX = 3;
newY = 2;
newZ = -3;
break;
}
rota.setAttribute("animation", {
property: "rotation",
to: { x: (-angle * 180) / Math.PI, y: 0, z: 0 }, // Rotate to face the green box
dur: 1000,
shortestPath: true
});
rota.setAttribute("animation__2", {
property: "position",
to: { x: newX, y: newY, z: newZ }, // Move along the circular path above the green box
dur: 500,
});
rota.setAttribute("animation__3", {
property: "scale",
from: { x: 0.01, y: 0.01, z: 0.01 }, // Start with a very small scale
to: { x: 1, y: 1, z: 1 }, // Expand to full size
dur: 1000,
});
// Green box rotation and scale
caller.setAttribute("animation", {
property: "rotation",
to: { x: (angle * 180) / Math.PI, y: 0, z: 0 }, // Rotate to face the blue box
dur: 1000,
});
clickCount = (clickCount + 1) % 12; // Reset```
Answers
It seems like the mysterious 360-degree rotation you're experiencing may be caused by the rotation interpolation between the starting and ending points of the animation. When transitioning between the last point and the first point (click 12 to click 0), there might be a sudden change in rotation that causes the box to rotate an additional 360 degrees.
To prevent this behavior, you can adjust the rotation interpolation to ensure a smooth transition between the last and first points. One approach is to calculate the angle difference between the starting and ending points and adjust the rotation interpolation accordingly.
Here's how you can modify your code to handle the transition between the last and first points more smoothly:
init: function () {
var rota = document.querySelector(".rota");
var caller = document.querySelector("#caller");
var clickCount = 0;
let shouldScaleUp = true; // Keep track of scaling direction
caller.addEventListener("click", function (e) {
var rotation = caller.getAttribute("rotation");
var position = caller.getAttribute("position");
var scale = caller.getAttribute("scale");
// Blue box rotation, position, and scale
var angle = (clickCount * Math.PI) / 6 - Math.PI / 2; // Angle for each click (360 degrees / 12 clicks), offset by -90 degrees
var newX, newY, newZ;
switch (clickCount) {
case 0:
newX = 3;
newY = 2;
newZ = -3;
break;
case 1:
newX = 2;
newY = 2;
newZ = -2;
break;
// case 2 through 10 you can just imagine
case 11:
newX = 2;
newY = 2;
newZ = -4;
break;
}
// Adjust angle for smooth transition between last and first points
if (clickCount === 0) {
angle = 2 * Math.PI; // Full circle rotation
}
rota.setAttribute("animation", {
property: "rotation",
to: { x: (-angle * 180) / Math.PI, y: 0, z: 0 }, // Rotate to face the green box
dur: 1000,
shortestPath: true
});
rota.setAttribute("animation__2", {
property: "position",
to: { x: newX, y: newY, z: newZ }, // Move along the circular path above the green box
dur: 500,
});
rota.setAttribute("animation__3", {
property: "scale",
from: { x: 0.01, y: 0.01, z: 0.01 }, // Start with a very small scale
to: { x: 1, y: 1, z: 1 }, // Expand to full size
dur: 1000,
});
// Green box rotation and scale
caller.setAttribute("animation", {
property: "rotation",
to: { x: (angle * 180) / Math.PI, y: 0, z: 0 }, // Rotate to face the blue box
dur: 1000,
});
clickCount = (clickCount + 1) % 12; // Reset
});
}
In this modification, when transitioning from the last point (click 11) to the first point (click 0), the angle is set to a full circle rotation (2 * Math.PI) to ensure a smooth transition without any additional 360-degree rotations. This should eliminate the mysterious rotation at the reset point.
