Using an ellipsoid space instead fo spherical in the word cloud example?

Questions
1

I’m not good at the maths part and hoping for ideas of how to approach this. I use the word cloud example which is great. But typical smart phone screens are rectangular so there is often either wasted space or if scaled in, parts are cut off.

The example uses Three.Spherical(), positions words on the sphere, and uses trackball controls.

My idea for a solution is to create an ellipsoid or ovaloid(?) to replace the Spherical. And scale to the aspect ratio of the phone screen.

I found this example of how to draw an ellipsoid.

const ellipsoidGeometry = new THREE.SphereGeometry(0.5, 32, 16);
ellipsoidGeometry.rotateZ(Math.PI/2);
ellipsoidGeometry.scale(2, 1, 1);
const ellipsoidMesh = new THREE.Mesh(ellipsoidGeometry, yourMaterial);

It seems worst case I can position words on the sphere before transforming it, then scale and rotate the location of the words in the same manner as the sphere is transformed.

The control is the issue I can’t get my head around. The example trackball control is very user friendly and easy, and rotation over the poles works as expected. I have no idea of how to adapt that for an ellipsoid. Especially rotation over the poles.

Maybe fork the source (I am using r3f) and modify the camera movement using a similar scale and rotation? Or?

Just thought I would pass this by and see if there is a better approach or if I have missed somethings.Thanks!

2

Is this the behaviour you’re looking for?


Demo: https://codepen.io/prisoner849/full/wBGQYvy

If so, then you can compute objects’ positions, using camera.matrixWorldInverse.

It means: “cast the stuff into camera space, apply ellipsoid’s ratio, use the result to set correct positions”.

Specifically in the video, I used [1.25, 1, 1] ratios for axes. Thus, no matter how the camera looks at the cloud, the cloud will be always stretched on the X-coord in the camera’s view 1.25 times from its spherical formation.

PS No shader modifications were involved.

1 Like
3

Yes! So cool! Thank you. None of that makes sense yet, but I’m just glad no shaders were harmed in the process.

4

Demo added in my previous post.

5

Thank you once again. I’m beginning to understand the matrixWorldInverse a little, and the codepen helped greatly. I’m trying to build a front navigation system for a react website. Sometimes the site, https://marshillnews.com is functional. Under construction, so not much to see.