Maintain Label Size in ThreeJS Zooming Feature

Question

Maintain Label Size in ThreeJS Zooming Feature

Currently, I am working on a solar system project in three.js and have been wondering if there is a simple way to ensure that the labels for the planets are displayed at the same size regardless of their distance from the camera. Unfortunately, I haven't been able to find a solution for this yet. One possible approach could be calculating the distance from each label to the camera and then establishing a scaling factor based on this information. However, it seems like there should be a more straightforward method to achieve this. Any suggestions would be greatly appreciated!

Thank you!

https://i.sstatic.net/3lEvn.jpg

Recently updated with an answer provided by prisoner849, which has proven to work excellently!

https://i.sstatic.net/FE3Pj.jpg

javascript three.js

Answer 1

Answer №1

To solve this issue, one possible approach is to calculate the distance between each label and the camera and then establish a scaling factor based on that information.

It's quite straightforward. For instance, if a THREE.Sprite() object (label) is nested within a THREE.Mesh() object (planet), during your animation loop, you can implement the following:

var scaleVector = new THREE.Vector3();
var scaleFactor = 4;
var sprite = planet.children[0];
var scale = scaleVector.subVectors(planet.position, camera.position).length() / scaleFactor;
sprite.scale.set(scale, scale, 1);

I have created a simple demonstration of the Solar System using this method.

Answer 2

To solve this issue, one possible approach is to calculate the distance between each label and the camera and then establish a scaling factor based on that information.

It's quite straightforward. For instance, if a THREE.Sprite() object (label) is nested within a THREE.Mesh() object (planet), during your animation loop, you can implement the following:

var scaleVector = new THREE.Vector3();
var scaleFactor = 4;
var sprite = planet.children[0];
var scale = scaleVector.subVectors(planet.position, camera.position).length() / scaleFactor;
sprite.scale.set(scale, scale, 1);

I have created a simple demonstration of the Solar System using this method.

Answer 3

Answer №2

To assist future visitors, the example of transform controls demonstrates the following:

Here is a snippet from the sample code showing how it is implemented:

var factor;
if ( this.camera.isOrthographicCamera ) {
factor = ( this.camera.top - this.camera.bottom ) / this.camera.zoom;
} else {
factor = this.worldPosition.distanceTo( this.cameraPosition ) * Math.min( 1.9 * Math.tan( Math.PI * this.camera.fov / 360 ) / this.camera.zoom, 7 );
}
handle.scale.set( 1, 1, 1 ).multiplyScalar( factor * this.size / 7 );

Answer 4

To assist future visitors, the example of transform controls demonstrates the following:

Here is a snippet from the sample code showing how it is implemented:

var factor;
if ( this.camera.isOrthographicCamera ) {
factor = ( this.camera.top - this.camera.bottom ) / this.camera.zoom;
} else {
factor = this.worldPosition.distanceTo( this.cameraPosition ) * Math.min( 1.9 * Math.tan( Math.PI * this.camera.fov / 360 ) / this.camera.zoom, 7 );
}
handle.scale.set( 1, 1, 1 ).multiplyScalar( factor * this.size / 7 );

Answer 5

Answer №3

At long last, I have uncovered the solution to your inquiry:

To begin with, create a DOM Element:

<div class="element">Not Earth</div>

Next, apply CSS styles to it:

.element {position: absolute; top:0; left:0; color: white}
//        |-------------------------------|  |-----------|
//            position element on top of         canvas is 
//               the canvas                       black, so text
//                                                must be white

Then, establish the moveDom() function and execute it each time you render the scene using requestAnimationFrame()

geometry represents the geometry of the mesh
cube refers to the mesh where you want to place the label

for loop to assign labels to all meshes in your scene.

Keep in mind that this method only sets the 2D position of the DOM Element, so the size of the label remains constant even if you zoom in or out (the label is not part of the three.js scene).

Complete test case: https://jsfiddle.net/0L1rpayz/1/

... (text continues)

Answer 6

At long last, I have uncovered the solution to your inquiry:

To begin with, create a DOM Element:

<div class="element">Not Earth</div>

Next, apply CSS styles to it:

.element {position: absolute; top:0; left:0; color: white}
//        |-------------------------------|  |-----------|
//            position element on top of         canvas is 
//               the canvas                       black, so text
//                                                must be white

Then, establish the moveDom() function and execute it each time you render the scene using requestAnimationFrame()

geometry represents the geometry of the mesh
cube refers to the mesh where you want to place the label

for loop to assign labels to all meshes in your scene.

Keep in mind that this method only sets the 2D position of the DOM Element, so the size of the label remains constant even if you zoom in or out (the label is not part of the three.js scene).

Complete test case: https://jsfiddle.net/0L1rpayz/1/

... (text continues)

Answer 7

Answer №4

If you're utilizing spriteMaterial to display your text, consider disabling the sizeAttenuation attribute.

var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff, sizeAttenuation:false } );

For more details, check out:

Answer 8

If you're utilizing spriteMaterial to display your text, consider disabling the sizeAttenuation attribute.

var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff, sizeAttenuation:false } );

For more details, check out:

Maintain Label Size in ThreeJS Zooming Feature

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Transmit a JSON array from Javascript to PHP using the POST method

Obtaining the value and other attributes of a select option in Vue.js 2

Difficulty arises when attempting to run code when a checkbox is not selected

When you click on `window.open('my-app://', '_blank');`, it won't directly open the desktop app from the browser. However, typing `my-app://`

JavaScript function for submitting form data using AJAX and performing validation

In what ways can we utilize a consistent state across various tabs or pages?

Move the divs within the overflow container by sliding them, then take out the initial element and append it to the end

There was an issue with retrieving the image URL from the source, causing an error message to display: "

Incorrect Request Method for WCF json POST Request Leads to 405 Error (Method Not Allowed)

Shall we Combine JavaScript Files with Import and Require Statements?

Creating a 2D coordinate plane within a 3D space through the utilization of equations and vectors

What is the reason behind external JavaScript files being able to access the functions of other external JavaScript files, and what measures can

What are the best methods for capturing individual and time-sensitive occurrences within a service?

How can I retrieve routing parameters in a Vue.js/Nuxt/TypeScript app?

Error: guild is not defined | discord.js

Invoke the REST API when a checkbox is selected

Is it possible to apply fog to a specific area in Three.js instead of being dependent on the distance from

What is this error: "Unknown authentication strategy 'loca'"?

Tips for utilizing console log within a react form component

When the ASPxComboBox component is situated within two ASPxPageControl tab pages, I am unable to access it