Integrate geometric shapes into your threejs text design

I need assistance with attaching text to the bottom part of the rings where the cuts are located, as shown in the image below. I have provided the code used to draw the rings. My goal is to display the radius measurements (40m, 30m, 20m) at the cut locations and ensure that they remain connected to the rings even when zooming in and out.

// Rings
// 40m ring
const geometry40m = new THREE.RingGeometry(35, 35.6, 30, 8, 4.85, 6);
geometry40m.lookAt(this.CAMERA_POSITION);
const ringMesh40m = new THREE.Mesh(geometry40m, whiteMaterial);

ringMesh40m.updateMatrix();
// geometry40m.mergeMesh(new THREE.Mesh(textGeometry, whiteMaterial));

// 30m ring
const geometry30m = new THREE.RingGeometry(26, 26.6, 30, 8, 4.85, 6);
geometry30m.lookAt(this.CAMERA_POSITION);

geometry30m.mergeMesh(ringMesh40m); // combining 40m and 30m into one mesh

const ringMesh40_30m = new THREE.Mesh(geometry30m, whiteMaterial);
ringMesh40_30m.updateMatrix();

// 20m ring
const geometry20m = new THREE.RingGeometry(16, 16.6, 30, 8, 4.85, 6);
geometry20m.lookAt(this.CAMERA_POSITION);

geometry20m.mergeMesh(ringMesh40_30m); // adding 40m, 30m, and 20m to a single mesh

const ringMesh40_30_20m = new THREE.Mesh(geometry20m, whiteMaterial);
this.rings = ringMesh40_30_20m;
this.rings.layers.set(15);
this.rings.visible = true;
this.scene.add(this.rings);

https://i.sstatic.net/NXf75.png

javascriptthree.js

Answer №1

If you're seeking the solution, I managed to generate text labels using the following function:

createTextMesh(text, font, size, mat) {
   var shapes = font.generateShapes(text, size);

   var geometry = new THREE.ShapeBufferGeometry(shapes);

   geometry.center();
   geometry.computeBoundingBox();

   return new THREE.Mesh(geometry, mat);
}

Here is how I implemented it successfully:

// Rings

// 40m ring
const geometry40m = new THREE.RingGeometry(
  RADIUS_40M,
  RADIUS_40M + 0.6,
  30,
  8,
  4.85,
  6);

// 30m ring
const geometry30m = new THREE.RingGeometry(
  RADIUS_30M,
  RADIUS_30M + 0.6,
  30,
  8,
  4.85,
  6);
geometry30m.merge(geometry40m);

// 20m ring
const geometry20m = new THREE.RingGeometry(
  RADIUS_20M,
  RADIUS_20M + 0.6,
  30,
  8,
  4.85,
  6
);
geometry20m.merge(geometry30m);

// combining 40m, 30m and 20m into one mesh
const ringMesh40_30_20m = new THREE.Mesh(geometry20m, whiteMaterial);
ringMesh40_30_20m.layers.set(16);
ringMesh40_30_20m.visible = true;
ringMesh40_30_20m.name = "rings";

this.rings = new THREE.Object3D();
this.rings.add(ringMesh40_30_20m);

// Labels

const fontJson = require("../../../assets/helvetiker_regular.typeface.json");
const font = new THREE.Font(fontJson);

let label20m = this.createTextMesh("20m", font, 0.5, whiteMaterial);
label20m.layers.set(16);
label20m.visible = true;
label20m.name = "label20m";

let label30m = this.createTextMesh("30m", font, 2.2, whiteMaterial);
label30m.layers.set(16);
label30m.visible = true;
label30m.name = "label30m";

let label40m = this.createTextMesh("40m", font, 2.5, whiteMaterial);
label40m.layers.set(16);
label40m.visible = true;
label40m.name = "label40m";

this.rings.add(label20m);
this.rings.add(label30m);
this.rings.add(label40m);

this.rings.getObjectByName("label20m").position.y = -RADIUS_20M;
this.rings.getObjectByName("label30m").position.y = -RADIUS_30M;
this.rings.getObjectByName("label40m").position.y = -RADIUS_40M;
this.rings.lookAt(this.CAMERA_POSITION);
this.scene.add(this.rings);

I obtained the font from the official three.js Repo

Answer №2

Embellish your scene by incorporating Mesh objects featuring PlaneGeometry and Basic material, textured with CanvasTexture objects. Strategically position these objects within the design to create dynamic visual interest through customized text displays.

To ensure that these elements are constantly facing the screen, consider utilizing Sprite objects in place of Mesh components.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting the issue of Collada Models appearing black in Three.js when using ShaderMaterials

I attempted to load a collada file exported from Blender into a three.js scene and then switch out the material with a ShaderMaterial. Since there's only one object in this collada file, it can be found at collada.scene.children[0]. I tried changing ...

shaderwebglthree.jscollada

Resolving the Issue with onClick Events in Closures

Secrets of the JavaScript Ninja provides an interesting example: HTML <button id="test">Click me!</button> JavaScript var button = { clicked: false, click: function() { this.clicked = true; console.log("this:", this, ...

javascript

Tips for inserting a button under a div when clicked

I am working on a layout where I have several div cards aligned side by side using the display: inline-block property. What I want to achieve is that when I click on a card, a button is added below the respective div. To accomplish this, I tried using jqu ...

javascriptjqueryhtmlcss

Is it acceptable to include multiple modules within a single JavaScript file?

One thing that I've noticed is that the AngularJS (*.js) files I've come across typically only have one module, and the module name doesn't always match the file name. I'm curious to know if it's possible to include multiple modul ...

javascriptangularjsangularjs-directive

What could be causing the ReferenceError when the Response object is not defined?

I am currently working on node.js and express. After attempting to establish a simple server, I am encountering an unexpected response error. const http = require('http'); const myServer = http.createServer(function(req, res){ res.writeHead ...

javascriptnode.jsexpress

Create dynamic automatic titles in HTML with JavaScript

Below is the code snippet to add an image with a link to the home-page and an h1 with the document name (if there isn't one already). This HTML code includes a JavaScript file reference in the <head> section and uses a <h1> tag for the ti ...

javascripthtmldom

Is it possible to use Javascript to redirect within an iframe?

I am dealing with a cross domain iframe where I have no control over the content. You can view the code on this jsfiddle url http://jsfiddle.net/biggenius/wH4p7/ Unfortunately, the functionality is not working as expected. I want to redirect the user to ...

javascriptiframehtml

What is the process for incorporating JavaScript files into an Angular project?

I have a template that works perfectly fine on Visual Studio. However, when I try to use it on my Angular project, I encounter an issue with the JavaScript code. I have filled the app.component.html file with the corresponding HTML code and imported the ...

javascriptangular

How can I pass data that is clicked on in a Bootstrap-vue b-table to a b-card that is not within the table or template?

I am currently working on a Bootstrap-Vue b-table that utilizes the @row-clicked event to showcase associated content in a card that expands below the selected row. While this feature works beautifully, the client has now requested that the displayed data ...

javascriptvue.jsbootstrap-4bootstrap-vue

I require assistance in clearing the text field under specific circumstances

Incorporated in my webpage are text area controls that have been coded to automatically create a bullet-list when the user clicks on the text area or presses the 'ENTER' key. However, there is an issue - if the user clicks on the text area withou ...

javascriptjqueryhtml

Sending a `refresh` to a Context

I'm struggling to pass a refetch function from a useQuery() hook into a context in order to call it within the context. I've been facing issues with type mismatches, and sometimes the app crashes with an error saying that refetch() is not a funct ...

javascriptreactjstypescriptgraphql

How can I include JavaScript in an HTML document?

My folder structure is as follows: Inside webapp/WEB-INF/some.jsp, I also have a javascript file located in the same directory at webapp/WEB-INF/js/myform.js. I referenced it in some.jsp like this: <script type="text/javascript" src="js/myform.js"> ...

javascriptajaxhtml

React Hook Form – Difficulties with error handling when utilizing multiple forms simultaneously in react hook form version 7.5.2

Previously, in the earlier versions of react hook form, multiple forms could function if another form object was created using the following code: const { register: register2, handleSubmit: handleSubmit2, errors: errors2 } = useForm() H ...

javascriptreactjsformsvalidationreact-hook-form

How to keep text always locked to the front layer in fabric.js without constantly bringing it to the front

Is it possible to achieve this functionality without using the following methods? canvas.sendBackwards(myObject) canvas.sendToBack(myObject) I am looking to upload multiple images while allowing them to be arranged forward and backward relative to each o ...

javascripthtmlcanvasfabricjs

Querying across multiple MongoDB collections with intricate conditions

Recently started working with node and mongo. Coming from a relational db background as a developer. I've been tasked to create a report that calculates the conversion rate from leads related to vehicle workshop bookings to invoices. A conversion is ...

javascriptnode.jsmongodbmongoose

Hide the menu even if the user clicks outside of it or anywhere on the webpage

I have a menubar code that is functioning correctly. However, I would like to make an enhancement. Currently, when I click outside of the menubar, it does not hide or close. I want the menubar to be hidden when I click anywhere on the webpage while the men ...

javascriptjqueryhtmlcss

Encountering the React Native error message "TypeError: Object(...) is not a function" while using react navigation stack

I am currently facing an issue with my react-navigation-stack. My suspicion lies in the dependencies, but I am uncertain whether that is the root cause. The objective at hand is to create a text redirecting to another page. If there is any irrelevant code, ...

javascriptreactjsreact-nativereact-navigation

How to extract user data from a JWT token using Node.js?

In my MEAN stack authentication application, I am utilizing Node and Angular. After a successful login, I set a JWT token and store it in a session within the controller by assigning the token to config.headers through a service interceptor: var token = j ...

javascriptangularjsnode.jsjwt

The Distinction between Object.assign and the simple assignment operation

Could you please explain the distinction between these two lines of code? Object.assign(otherObject, { someNewProperty: '' }); vs. otherObject.someNewProperty = ''; Also, which one of these methods is more efficient in terms of sp ...

javascriptnode.js

Troublesome code with Ajax, Jquery, and PHP is causing issues

I've been trying to send an array from php to js using ajax, but for some reason it's not working no matter what I try. I'm convinced it must be a simple fix, but I seem to have exhausted all my options. <!doctype html> <html lang= ...

javascriptphpjqueryhtmlajax