CODEWITHSUNDEEP
three.jsgeometry
Avatar
Avatar

Reputation: 15156

Three.js: How to draw a sphere with a spherical triangle on its surface?

I have not found any documentation or information about threejs and spherical triangles, so I guess this has not been coded yet in threejs.

My goal is to create a sphere and draw a bend triangle on its surface. Plus color the triangle. It should look like this:

enter image description here

Creating a sphere is easy thanks to threejs, but how do I draw the triangle?

Do I need to draw multiple small triangles to fake the spherical triangle? Or is there another easier way?

Thanks.

Upvotes: 2

Views: 2779

Answers (1)

Zob
Zob

Reputation: 470

You have 3 options as I see it to build a pseudo-triangle on the face of a sphere: geometry, texture, and color.

Taking a geometry route would require constructing a set of vertices that meet your requirements. The best way to do this would probably be to build a sphere with your preferred number of segments, and then remove unwanted vertices from places your triangle doesn't exist. You can make this easier for yourself by using the phiStart, phiLength, thetaStart, thetaLength constructor properties for SphereGeometry.

A texture solution might be to dynamically create a flat triangle image/texture of appropriate dimension and then just display it on the surface of your solid sphere. This might require some complicated math and dynamic image know-how to get your triangle to display properly as the image is stretched to fit.

The color solution (and your best solution imho) would be to create a whole sphere of some solid color, and remove appropriate pieces of it using SubtractiveBlending in your material like so:

blending: THREE.SubtractiveBlending,

Here is an example of what I mean: http://jsfiddle.net/Angrypickle/8pwLca8p/59/

Notice that I create an outer sphere with specified phiStart and phiLength to remove the unwanted portion of the inner sphere. You should be able to do the same for the alpha and beta angles. Let me know if you try this and it works for you!

Edit Here's another geometry option: http://jsfiddle.net/Angrypickle/oax054wL/23/

In this example, we build a normalized equilateral triangle. Then we subdivide the geometry a few times. Finally, we set the length of every vertex to the radius of our imaginary sphere and we're left with a nice spherized triangle. Note: The positions of the 3 vertexes we start with determine the final shape.

Upvotes: 1

Related Questions