Watch as objects materialize after using the zoom function in THREE.JS

I am facing an issue with THREE.JS involving the addition of 3D text to my scene using the following code:

var loader = new THREE.FontLoader();
loader.load( '3rdparty/three.js/fonts/helvetiker_regular.typeface.json',function ( font ) {
   var material = new THREE.MeshPhongMaterial({color: 0xff0000});
   var textGeom = new THREE.TextGeometry( 'Hello World!', {font: font});
   var textMesh = new THREE.Mesh( textGeom, material );
   var bBox = new THREE.Box3().setFromObject(_object);
   textMesh.position.set((bBox.max.x - bBox.min.x) / 2 + 
   bBox.min.x,bBox.max.y + 10,(bBox.max.z - bBox.min.z) / 2 + bBox.min.z);
   scene.add(textMesh);
});

The issue is that the object only appears when I zoom in on the scene. Even when I unzoom, the object remains visible.

After adding text, it does not show up

After zooming in, the text becomes visible

Even after unzooming, the text remains visible

Below is the camera configuration (so it's not a far camera parameter issue): 

new THREE.PerspectiveCamera(45,SCREEN_WIDTH/SCREEN_HEIGHT,0.1,99999999);

How can I make the text appear immediately after being added to the scene?

javascriptthree.js

Answer №1

Make sure to re-render your scene once you have added your text by invoking render.render(scene, camera);

var loader = new THREE.FontLoader();
loader.load('3rdparty/three.js/fonts/helvetiker_regular.typeface.json', function(font) {
  var material = new THREE.MeshPhongMaterial({
    color: 0xff0000
  });
  var textGeom = new THREE.TextGeometry('Hello World!', {
    font: font
  });
  var textMesh = new THREE.Mesh(textGeom, material);
  var bBox = new THREE.Box3().setFromObject(_object);
  textMesh.position.set((bBox.max.x - bBox.min.x) / 2 +
    bBox.min.x, bBox.max.y + 10, (bBox.max.z - bBox.min.z) / 2 + bBox.min.z);
  scene.add(textMesh);
  render.render(scene, camera);
});

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

The member 'email' is not found in the promise type 'KindeUser | null'

I'm currently developing a chat feature that includes PDF document integration, using '@kinde-oss/kinde-auth-nextjs/server' for authentication. When trying to retrieve the 'email' property from the user object obtained through &apo ...

javascriptreactjstypescriptauthenticationnext.js

Is there a way to achieve a similar outcome on my site?

Recently, I noticed a mouse-hover effect on two websites and found it quite appealing. https://i.sstatic.net/Ly0gP.png https://i.sstatic.net/oDe1i.png This is the specific effect that caught my attention. Can anyone provide me with insight on how to impl ...

javascriptphpjqueryhtmlcss

Ways to evaluate and contrast two JSON values in JavaScript by their key names?

I am dealing with two JSON arrays that look like this: array1=[{a:1,b:2,c:3,d:4}] & array2=[{a:2,b:5,c:3,d:4}] Is there a way to determine which key in array2 has the same value as one of the keys in array1? For example, in array 1, key b has a value ...

javascriptarraysjson

How can I retrieve console log information in POSTMAN when a test fails?

Having an issue with this test. I am trying to trigger a console.log when the installment value in my JSON is less than 100 (resulting in a test FAIL). However, I am receiving both PASS and FAIL results in the test, but no information is showing up in th ...

javascriptjsonfor-looptestingpostman

Retrieve the source code of the current page using JavaScript and the Document Object Model (DOM)

Is there a way to retrieve the source of the current page using JavaScript and DOM? Do I need to utilize AJAX for this task? ...

javascriptajaxdom

Click event doesn't trigger the 'else if' statement in jQuery

Having trouble with a button click issue. In the following code, when the button is clicked, it checks if the text on the button is "day". If so, it changes the background-color of the body to red and updates the button text to "night". I am struggling wit ...

javascriptjqueryhtmlcss

Is there a streamlined approach to signal a successful callback to $q.all without the need to define a $q.defer() variable?

Within my application, I have a mixture of synchronous and asynchronous methods. Here is an example of code from one of the controllers: $q.all([ asyncMethod1(), syncMethod1() ]) .then(function (results) { Even though I don't actually need t ...

javascriptangularjsangular-promise

Utilizing the Replace function just once

I am currently using the Avada Theme on Wordpress and I am attempting to use jQuery to translate the social media privacy labels/content. Everything is working smoothly except for one issue. Below is the HTML code: function translate() { jQuery(".fus ...

javascriptjqueryhtmlwordpress

How can I determine the position of a particular point on a SplineCurve3 or TubeGeometry in Three.js?

I am currently grappling with the task of determining the distance of a specific point along a SplineCurve3 within Three.js. To elaborate... The aforementioned SplineCurve3 is composed of 4 predefined points: a, b, c, and d. To locate a point along the cu ...

three.js

Using TypeScript to incorporate JS web assembly into your project

I have been attempting to incorporate wasm-clingo into my TypeScript React project. I tried creating my own .d.ts file for the project: // wasm-clingo.d.ts declare module 'wasm-clingo' { export const Module: any; } and importing it like this: ...

javascripttypescriptimportwebassembly

Setting up Angular-CLI on a Windows 10 system

I encountered some challenges while trying to install angular-cli on my Windows 10 system. The issues revolved around Python dependencies and node-gyp, manifesting in error messages similar to the following: ><a href="/cdn-cgi/l/email-protection" ...

javascriptnode.jsangularwindows-10

Is it possible for me to search within a retrieved document using Mongoose?

My schema is structured as follows... var TerritorySchema = new Schema({ user: Schema.Types.ObjectId, streets: [streets_schema] )}; var StreetsSchema = new Schema({ name: String, odd: [block_schema], even: [block_schema], tags: [S ...

javascriptnode.jsmongodbmongoosemongoose-schema

Which programming language is more suitable for developing a chat website - PHP or JSP?

My goal is to create a web-based chat application similar to Yahoo's, utilizing JSP/PHP with AJAX. I'm debating between using JSP or PHP for this project and looking for the advantages and disadvantages of each. Which do you think would be bette ...

javaphpjavascriptajaxjsp

What is the process for transferring information from a Microsoft Teams personal tab to a Microsoft Teams bot?

Is it feasible to share data such as strings or JSON objects from custom tab browsers to a Teams bot's conversation without utilizing the Graph API by leveraging any SDK functionality? ...

javascriptsdkmicrosoft-teamsadd-in

Creating a Dual Y-Axis Chart with Two Sets of Data in chart.js

I utilized the chart.js library to write the following code snippet that generated the output shown below. My primary concern is how to effectively manage the labels on the horizontal axis in this scenario. CODE <!DOCTYPE html> <html lang="en"& ...

javascripthtmlgraphchartschart.js

Displaying items as objects in search results in Kendo Angular's auto complete feature

Seeking assistance with implementing Kendo Angular's auto complete widget using server filtering. Following the service call, the popup displays [object Object] and the count of these matches the results retrieved from the server. Could someone kindly ...

javascriptangularjsautocompletekendo-ui

django Ajax GET request could not locate the specified URL

I'm facing an issue while trying to pass parameters through Ajax with Django 1.11. The error message states: Not Found: /enquiry/followup_alter/. Below is the relevant code snippet. Error: Not Found: /enquiry/followup_alter/ Ajax: $(docume ...

javascriptpythonjqueryajaxdjango

What is the process for assigning an element to a specific URL ID?

Imagine having an array of objects structured like this: [{ details: {id: 7}, type: minigame1, ...(more values that need to be accessed later) }, { details: {id: 8}, type: minigame1, ...(more values that need to be accessed later) }, { details: {id: ...

javascriptreactjs

Is there a way to utilize a value from one column within a Datatables constructor for another column's operation?

In my Typescript constructor, I am working on constructing a datatable with properties like 'orderable', 'data' and 'name'. One thing I'm trying to figure out is how to control the visibility of one column based on the va ...

javascriptjquerytypescriptdatatable

Produces consistent results despite variations in tag names within the DOM

While iterating over each element (post) in an array, I have assigned each HTML tag name a value of post._id. In the DOM, the outputs have different values as expected. However, when I try to capture these values in the React Profile component, the console ...

javascripthtml