CODEWITHSUNDEEP
javascript3dthree.js
Johan
Johan

Reputation: 1200

How do I render objects as 'icons' in three.js?

Say I have a nice spaceship rendered in my scene. I then zoom out and the ship becomes smaller. This is all quite simple to achieve. Now at some point I want to replace the spaceship object with a simple triangle representing the ship. At this stage the icon for the ship should be rendered instead of the ship. Obviously the triangle should move based on the ship's movement and my camera movements. The triangle should not change orientation, so even if I rotate the camera or have the ship roll the triangle should stay the same orientation. So on a canvas this would be very simple to do. I would just take the x and y components of the 3d object and draw my triangle at the coordinates. My problem is that I do not know how to draw on the WebGL canvas directly? Is it possible? If not do anybody have any pointers to strategies to get this done? I would be happy if I could get nudged in the right direction :) Thanks in advance.

Update : What I eventually decided to do was to use the orthographic camera overlay approach suggested below and in a couple of other places.

Upvotes: 0

Views: 1802

Answers (1)

lot
lot

Reputation: 1491

Use Sprite object for icon. Then place icon right between spaceship and camera in a specific distance from the camera (using Raycaster or just calculation).

Use of orthographic overlay as mentioned by @WestLangley is also possible. Since you would have to calculate ship's position relative to your canvas in this case, maybe you could even create pure HTML overlay using DIV and place your icon in it as IMG object.

Upvotes: 3

Related Questions