Animation Mixers not firing at the correct times when multiple mixers are being fired at once

Recently, I built a 3D maze solving algorithm: maze3d - npm

Mostly because I got bored in CS class. I just graduated HS and have a few months before college to finish this project up.

It uses a 3D matrix to solve the maze, and then saves the data as a 3D matrix as so (The O character is the path to solve given the start and end points):

[
  [
    [ 'X', 'X', 'X', 'X', 'X' ],
    [ ' ', 'O', ' ', 'X', 'X' ],
    [ 'X', 'X', 'X', 'X', 'X' ],
    [ 'X', ' ', ' ', ' ', 'X' ],
    [ 'X', ' ', 'X', 'X', 'X' ]
  ],
  [
    [ ' ', 'X', ' ', ' ', ' ' ],
    [ ' ', 'O', ' ', 'X', 'X' ],
    [ ' ', 'O', 'X', ' ', 'X' ],
    [ 'X', ' ', ' ', 'X', ' ' ],
    [ 'X', 'X', ' ', ' ', 'X' ]
  ],
  [
    [ ' ', ' ', 'X', 'X', 'X' ],
    [ ' ', 'X', ' ', 'X', 'X' ],
    [ 'X', 'O', 'X', 'X', 'X' ],
    [ 'X', 'X', 'X', 'X', ' ' ],
    [ 'X', 'X', 'X', 'X', 'X' ]
  ],
  [
    [ ' ', ' ', 'X', ' ', 'X' ],
    [ 'X', 'X', ' ', 'X', ' ' ],
    [ 'X', 'O', ' ', 'X', 'X' ],
    [ ' ', ' ', ' ', 'X', ' ' ],
    [ 'X', 'X', ' ', ' ', 'X' ]
  ],
  [
    [ 'X', 'X', 'X', 'X', 'X' ],
    [ ' ', ' ', 'X', ' ', 'X' ],
    [ 'X', 'O', 'X', 'X', 'X' ],
    [ ' ', 'O', 'O', 'O', ' ' ],
    [ 'X', ' ', 'X', 'X', 'X' ]
  ]
]

If you use Three.js to create a cube for every cell in the 3D matrix, but swap the index around:

maze[1][2][3] = cube at (3,2,1)

It creates a solved 3D maze:

Live demo (with some added GUI features not in the package): https://yqs5l9.csb.app/

(Show barrier layers allow you to look inside the maze by hiding which instances render. Make sure to hit generate barriers and select start/ end).

Code: Interactive maze3d 2.0.2 - CodeSandbox

This is where version 2.0 stops. It doesn’t doesn’t have any functions built in to work with Three JS. It only provides that 3d matrix.

I am currently working on version 3.0, which will provide the user with all of the instances for the 3D model. All they have to do is simply add them to the scene. That part works, now I decided to make a animation engine that can take in a variety of configurations, such as slide or fade in, and then create a 3D animation over the maze building and solving itself.

The 3D animation part has been tricky:

For the animation part (such as in this post), I have to create a new 3D model of the maze but split it for every slice of every part of the maze (barrier, space, void, path, etc).

The comment of the post I linked above discuses the issues I am having with the render order not as intended.

1 Like