In this article we are going to upgrade our movement system by adding a click indicator and touch capabilities so it can be played on mobile devices. The indicator will show the player's destination an area is right clicked and disappear when the player arrives at that location.
We are going to start by adding two new variables for our indicator. The top and the bottom portions.
In this part of the series I will go over how to move your character around the X and Z axis of a Threejs scene by right-clicking with your mouse using raycasting. This article assumes you have read the previous two articles consisting of a basic setup and basic scene decoration. You can see a working demo at the bottom of the article.
If you didn't get a chance to read Part 1 in our series, you can read it here. This explains the basics for getting your program to render. If you can already render an object to the screen and rotate around it (object as the focus) then you can probably start here.
In this series I will show you how to create a basic game using Threejs. By the end of this series, you should be able to create the main character, walk around your world, create environment objects such as trees and rocks, detect collisions, fight enemies, and pick up objects. Other than a game tutorial, this series will provide you with a neat set of functions using Threejs that may help you on other projects. Let's begin!