Using three.js to input text instead of particles within a particle cloud

Question

Using three.js to input text instead of particles within a particle cloud

I have a unique three.js codepen project where square particles drift through the space.

However, I am now looking to enhance it by incorporating text (perhaps using geometry?) instead of the square particles, creating a word/tag cloud effect. Is this even possible?

Check out my current codepen experiment here: https://codepen.io/farisk/pen/pWQGxB

Here's the visual result I am aiming for: https://i.sstatic.net/gIg3u.jpg

At the moment, I am unsure about where to begin.

My initial thought was to utilize a text geometry like so:

var loader = new THREE.FontLoader();
let font = loader.parse(fontJSON);
var geometry = new THREE.TextGeometry("hello", {font: font, size: 120, height: 10, material: 0});

But someone cautioned that this approach might not be correct. Since I am fairly new to three.js / html canvas, I would greatly appreciate any guidance or assistance.

javascript three.js html5-canvas word-cloud

Answer 1

Answer №1

Typically in particle systems, passing in individual geometries per particle is impractical due to the efficiency of having the same geometry for all particles.

To achieve your desired effect, you have two main options:

Combine all text into a single sprite texture and assign unique texture coordinates to each particle, allowing them to render the correct text. (Limited to two-dimensional rendering and not ideal for a large volume of text) View this example.
Create individual geometry for each text object and render them without using a particle system. (Although this sacrifices the performance benefits of particle systems)

If your goal is simply to create a tag cloud, you could also utilize pure JavaScript to manipulate the positions of text elements based on calculated 3D coordinates.

Answer 2

Typically in particle systems, passing in individual geometries per particle is impractical due to the efficiency of having the same geometry for all particles.

To achieve your desired effect, you have two main options:

Combine all text into a single sprite texture and assign unique texture coordinates to each particle, allowing them to render the correct text. (Limited to two-dimensional rendering and not ideal for a large volume of text) View this example.
Create individual geometry for each text object and render them without using a particle system. (Although this sacrifices the performance benefits of particle systems)

If your goal is simply to create a tag cloud, you could also utilize pure JavaScript to manipulate the positions of text elements based on calculated 3D coordinates.

Using three.js to input text instead of particles within a particle cloud

Answer №1

Similar questions

Tips on customizing image borders/masks with hover effects

Forwarding from a user interface element in Next.JS

Retrieving JSON information from the server

What causes AngularJS to generate an error when attempting to construct a URL for the src attribute of an iframe?

I am currently facing a challenge in React Highcharts where I am unable to remove and redraw the graph easily

Attempting to access a variable from outside the function

The JSON object is coming back as null

The Window.print() function may experience compatibility issues across different browsers

Clicking the table initiates several AJAX operations to run using jQuery

Custom time selector does not automatically set the default value

Is there a way to generate a distinctive curved design using CSS for a

Creating a serial number in a Class without relying on a global variable is a useful technique that

Develop an npm package that includes necessary dependencies

The issue of infinite scroll functionality not functioning properly when using both Will Paginate and Masonry

Converting milliseconds to a valid date object using Angular form validation

Forward the value of the selected radio button

AngularJS directive element not displaying CSS styles properly

pressing the switch will adjust the size of the container

"Utilize JavaScript to extract data from JSON and dynamically generate a

Mask input in AngularJS