Three.js and 2D overlays

How do you handle the problem of 2D overlays in three.js-based app? You can go for camera-oriented planes, I guess, or maybe use sprites, but with just a few of them overlays why not just use DOM? The trick is to wrap the canvas in overflow:hidden element with display:relative or absolute, and place your overlays in there. This method has several problems that needs to be addressed.

When do you show and hide the overlays?

Object3D add() and remove() methods dispatch ‘added’ and ‘removed’ events, but this is only part of the story. You have to check if other objects obscure your overlay anchor, or else it will incorrectly show up on top of those objects. In simple cases, you could calculate this analytically, but general solution would have to rely on something like ray casting.

Screen Shot 2015-04-05 at 12.17.46Can these things be calculated implicitly?

Yes they can, by overriding Object3D’s updateMatrixWorld() method, which is called on every object when you render the scene. Of course, you still have to call original method, too.

The above method implementation will look like this. As always, feel free to discuss this stuff in comments.

0 Responses to “Three.js and 2D overlays”



  1. Leave a Comment

Ask a Question

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Old stuff

April 2015
M T W T F S S
« Mar   Aug »
 12345
6789101112
13141516171819
20212223242526
27282930  

Oh, btw…


%d bloggers like this: