Smooth Camera & Mouse Click Controls


I’m building an isometric maze as my first threejs project and I’ve run into some issues that I can’t figure out after looking at other threejs examples. When I started this project, it was built off simple examples that I found and just pretty much added onto it.

My issue is that when I move the cube, the camera is not smooth and I believe it’s because of the animations that were applied on the cube since I’m using camera.lookAt(). Without that line of code, the animation is smooth, so I can’t figure out how to make it smooth whenever the move cubes since it also looks like it makes the maze jump as well.

I’ll need to follow the cube so that it’s always centered on the screen since I would also like to add mouse click controls. I have an image as an example on how I would like to do that, just not sure how to implement it in code:

In that image, I would like it so that if you click in one of the four areas, you would move that certain direction that’s labeled. Not sure how I would implement this in code.

Also, I know it’s probably not the best way to create the maze, since I had to build a specific one, but what would’ve been the best method to make the maze without building so many walls individually?

Maze in CodePen: