CODEWITHSUNDEEP
three.jsgeometry-surface
user2445278
user2445278

Reputation: 938

threejs look at (sort of)

I have an shape geometry in my scene that looks like an arrow which is pointing from one object to another. It is added looking directly at the camera. Imagine the camera was facing x,y (front for example see first pic). As the user rotates to a "right" (z,x) you would be looking end on so wouldn't see anything. that's fine, however, with it being infinitely thin, the same is true if you look from the top/bottom and when you start angling it you cant tell its an arrow, and that's what i want to prevent.

if you use the lookat(camera.postion) during the render seen then the arrow wont be in its original position relative to the two objects anymore.

The only way i can potentially imagine doing this is by rotating the arrow along a single axis as the camera moves?? im looking for any other suggestionsenter image description here

i have attached an image to try and explain better Arrow

Basically I want the arrow to look like an arrow as the user rotates the scene rather than it disappearing to nothing when looking from the top. Please note these arrows may be added in any location/orientation which makes it abit trickier

Upvotes: 0

Views: 783

Answers (1)

Matey
Matey

Reputation: 1210

There are two options. A fully 3D option and a fake 2d option.

A. The 3D option

Suppose your arrow has a primary axis (running from its head to tail) and a secondary axis (perpendicular to its flat shape). What you need to do is calculate the angle between your camera position and the secondary axis. Here's an image, the angle you look for is the yellow arc.

enter image description here

Those are pretty simple calculations which are not provided here because it's not clear how your arrow is defined and which of the XYZ axes are primary and secondary.

Once you know the angle you can rotate the arrow about its primary axes by the angle. This will rotate the arrow to a position with best visibility.

Note that if the camera lies in the primary axis the angle is not defined. But you wouldn't see any of the arrow from this camera position anyway.

B. The 2D option

This is a bit simpler. Don't render the arrow in 3D. Just keep track of the arrow's head and tail position in 3D. When camera position changes, project these 3D positions into 2D canvas coordinates. You can then draw a 2D shape between these 2D head and tail positions. Please note that drawing a 2D shape will require creating a transparent 2D canvas on top of your current WebGL canvas.

The disadvantage of the 2D option is that the arrow will be superimposed on top of the 3d scene so it will sometimes overlap the blue cubes.

Upvotes: 2

Related Questions