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!
This program is a personal favorite of mine because it gives you a little taste of the size of Saturn from the point of view of one of it's many moons. In this case I used the moon Enceladus. Created with Threejs, this program is an experiment into large scale objects, lens flare effects, bump mapping, orbital controls, and much more.
The camera is attached to the moon and the moon is attached to Saturn. I did it this way so I could easily rotate two objects and affect the camera with both rotations. Click on the JS tab to see the code behind this program.
Making a custom panoramic image viewer is very simple when you use Threejs. All you have to do is create a sphere object, place a camera in the middle of it, and add the image to the backside of the sphere. Most of the controls are already availalbe for you. I also like to use the orbit control library to get a nice fluid view.
Another rather random program using Threejs that displays a bunch of particles that forever travel around aimlessly. The particles use a simple algorithm using cosine and sin to caclulate their pathing and then go in the expected wave pattern. Rotations are also attached using triginometric methods that make quick movements seem random.
You can navigate slightly by holding down the left mouse button and dragging it. If you would like to see the code, click the JS tab in the example below.
This is a neat little program that pulls in all objects to a central point and then throws them away in an infinite loop. The object starts out as a very dark blue and lightens until it reaches the middle. Upon ejection the object will turn bright red and quickly move to a dark red the further from the center it is.
I created this a 3D representation of a 2D canvas program I made that basically did the same thing. You can hold down the mouse and move to look around. Zooming also works with the mousewheel. Click the JS tab below to see the code.
Making a realistic scene on the web is easier than you think using Threejs. It supports bump, normal, displacement, and specular mapping and makes it simple to apply it to an object. I wrote this program really quickly so it doesn't look as good as something that gets more time put into it, but it provides a quick glimpse into what you can do. See the mapping example below to see a few mappings in action. Use your mouse to look around!
Reflections in Threejs can be accomplished quite easily using a Cube Camera. This is a unique camera that contains six perspective cameras that will display what each camera sees onto any object in which you place it. It fits well on all default three dimensional shapes provided by the core threejs library. In this example I use a few spheres, a rectangle, and a cone. I also add a reflection to the plane I use as the floor so that lights and the cubemap (background image) are reflected.