graphics

Basic Threejs Game Tutorial Part 4: Moving 2

Introduction

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.

Let's Begin

We are going to start by adding two new variables for our indicator. The top and the bottom portions.

Graphic Mapping Techniques in Threejs

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!

Here is a pretty neat use of normal mapping.