Tag: 3D

I should share my experiments more often on this blog, and maybe not only the 3D javascript game development that I’m just having fun with. But anyway, here is the last one in date : a third person planet exloration thing.

It’s not exactly “work in progress” since I don’t really plan on improving any of it from here, so just consider this work bare and unfinished. You can try it out here : battle-royale.webmaestro.fr.

The 3D models used, such as the trees and stones, are from Poly by Google.

Controls are the classic W, A, S, D and mouse. I had to adapt the “third-person” logic to rotate rather than translate over space.

There is a day and night cycle that depends on where the player is positionned on the globe. The sun and the moon are casting light on opposite sides while turning around.

The water is… just ugly. There is no collision detection. And the character is a simple cone.

Oh, and there is no server to make it a multi-player shooter, even though that was the ispiration. The idea came when a friend showed me the very entertaining Fortnite. We thought it would be fun to turn this “Battle Royale” island into a planet. Instead of a “storm” shrinking toward the gathered players, we could simply reduce the radius of the spherical terrain… That was the concept.

Maybe I could post details about the code if whoever is interested. In the meantime I have other things to focus on !

Even after a little read about raycasting, I’m not quite sure I can define its concept properly… But let’s put it like this : from one origin (the very center position of our character’s Object3D), we’re going to spread vectors in every direction we’re able to move. For each one of those “rays“, we’ll be able to test if it intersects with any given mesh, and if so, to disable any move in that direction.

Collecting the obstacles

So first of all, we need to collect every obstacle in an array : all the meshes that we’re not supposed to cross.

And that’s it. So of course this isn’t perfect : some meshes are not taken into account (the hands and feet for instance), and it’s possible for some obstacles to get through our rays(try to walk just a little bit too close beside the cube on the demo). One solution would be to add some more rays. But still, this is meant to stay basic, so I’ll keep it like this so far.

I wanted to try Three.Js out since a little while, and I finally found some time for it. I’ll detail here the different classes I wrote for this to work.

Notice that the collisions are not handled yet. But this will be the topic of an upcoming post, as soon as I figure it out !

I used John Resig’s Simple JavaScript Inheritance in order to get rid of those ugly prototype declarations, to get a cleaner code, and to simplify any further implementation that would require classes inherithance.

That’s it for the tools. You don’t have to use them, but I will in the following explanations. In case you don’t, just replace the classes declarations by their prototype equivalences.

Now the first thing to say about what I experimented : so much trigonometry fun ! Let’s go.

Set the scene

I’m rendering within a <figure> tag.

<figure id="basic-scene"></figure>

Now we got to create the scene. We need a camera, to define from which view point we’re looking, some light or we won’t see a thing, and a “renderer”, which is actually the canvas viewport we render with.

This main class here will also set some event listeners for us to handle the user’s interactions, and a “frame” method that we’ll call at every animation frame request.

Live little 3D character, live !

Here as well, we use an Object3D in order to group our meshes.

Our character has two different types of motion to update : its position and its rotation. Further on, we could easily make it jump, dive, or dance. But let’s start with a simple “moving around” action only.

A directionvector will represent the motion that our user is calling through the controls.

The step property will record the progression of the character’s position motion. We will use it to animate its feet and hands.

The feet of our simple character are half-spheres. The trick is simply to properly set the phiStart, phiLength, thetaStart and thetaLength parameters of the SphereGeometry method.