Básicamente, lo que estoy tratando de hacer es que tengo tres cubos, y con cada clic cambian de posición. Esto funciona bien cuando se hace una vez. Ahora, agregué 3 líneas al final de la función llamada "rotWorld" así:
var i1 = i3; var i2 = i1; var i3 = i2;pero recibo errores todo el tiempo. ¿Cómo puedo definir las posiciones de los interruptores como nuevas posiciones iniciales, para que la próxima vez que haga clic en el gatillo, los objetos se muevan nuevamente, haciendo un círculo completo con 3 clics?
Aquí hay un violín: https://jsfiddle.net/ung8qapd/1/
Bien, lo que debes hacer aquí es crear el círculo desde 3 posiciones.
let counter = -1; const positions = [ [5, 0, 5], [0, 0, 5.66], [-5, 0, 0] ]; const cubes = [i1, i2, i3]; Con el counter , cada vez que haga clic en el botón, el contador aumentará y tendremos algo como:
y así sucesivamente, verá, se repite, y [0, 1, 2] es el índice de la posición (x, y, z) que aplicará al cubo. En el 4º clic cuando el contador es mayor que el total de posiciones, lo volvemos a poner al principio.
Esta es la nueva función rotWorld() :
function rotWorld(){ console.log('--- rotate world'); // counter store the begin of position loop counter++; counter = counter < positions.length ? counter : 0; // loop through each cube cubes.forEach((cube, index) => { // get the position base on the counter const pos = (counter + index) % positions.length; console.log(pos); gsap.to(cube.position, { duration: 1, x: positions[pos][0], y: positions[pos][1], z: positions[pos][2], }); }); }Agregué algunos registros en la consola para que puedas probarlo. También puede invertir la dirección usando la misma lógica. ver violín