Arrow helpers in three.js

When it comes to threejs I thought I would write a quick post on the subject of arrow helpers. In threejs there are a number of built in helper methods than can be used to quickly create objects that help to visualize what is going on with state of various components of a threejs project. The arrow helper is one of these such helper objects that can be used to find out what is going on with the direction of a Vector3 class object.

These arrow helper obuects are Object3d class based objects, so that means that they can be attached to the scene object, but also just about anything that inherits from the object32 class. So they can also be attached to a mesh object, an instance of a group, or any object3d based class for that matter.

In this post I will be going over some basic examples of arrow helpers, and the features to work with when it comes to such objects. In the process I will also be touching base on some other threejs related topics that have to do with making the code of a threejs project a little more organized so it is not such a thin post as there is only so much to write about when it comes to the arrow helper.

Read More

On collision events in phaser ce

When making a game with phaser ce a common topic that comes up a lot is dealing with collision, there is detecting if a collision has occurred, and then there is doing something with that collision event. In this post I will be coving an examples of both using the default arcade physics engine in phaser ce. However the focus on this post will be on the body.onCollide event and how to use that to do something in the event of a collision.

Read More

Fat Lines in threejs by making use of additional files

When playing around with lines in three.js it would be nice to set the width of lines to a thickness greater than that of one. That is that although there is a line width property of the Line Basic Material, on most platforms, any width other than the default value of 1 will not work. I have found that it will work on some of the Linux systems that I would with, but on Windows, and I assume many others it will now work.

So it would seem that I am just stuck with having to just have a thickness of 1 when it comes to drawing lines in threejs. However there is not just thinking in terms of drawing a line in space, but drawing a tube like structure in space. When doing so I should be able to use THREE.Mesh, rather than THREE.Line, and then make the radius of this tubing any thickness that I want. There is the option of looking into using curves, and the Tube geometry class as a way to create something like that. However it would be nice to also have a way to draw lines in a way in which the thickness will work on most platforms.

Looking over the examples at the threejs site there are some official additional resources that can be used to make thick lines that seems to work just fine. The only thing about it is that these features are not built into the core of the threejs library itself. They must be added to a project as an additional external files along with threejs. However once added to the stack the feature seems to work pretty good from what I am seeing on my end.

Read More

Finding if two lines intersect in phaser ce

When making a game with Phaser ce some projects may involve working with lines. Ither for the sake of making graphics, or for the sake of working out game mechanics. When using lines to work out mechanics there os often a need to find out if one line intersects with another line, or with a rectangle area. For this there is the Phaser.Line.intersects, and Phaser.Line.intersectsRectangle static Phaser.Line methods. In this post I will be outlining some examples of using these methods to find line intersection points.

Read More