Issue with rendering 3D text in a three.js environment

Why isn't the text 'Hello three.js!' showing up in my scene when using TextBufferGeometry? It was working fine with BoxGeometry, so I must be missing something.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // fov, aspect, near and far
camera.position.set(-15, 0, 25);
camera.lookAt( scene.position );

var loader = new THREE.FontLoader();

loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {

  var material = new THREE.MeshPhongMaterial( { color: 0x0033ff, specular: 0x555555, shininess: 30 } );

  var textGeo = new THREE.TextGeometry( 'Hello three.js!', {
    font: font,
    size: 80,
    height: 5,
    curveSegments: 12,
    bevelEnabled: true,
    material: 0,
    extrudeMaterial: 1
  } );

  textGeo.computeBoundingBox();
  textGeo.computeVertexNormals();

  var mesh = new THREE.Mesh( textGeo, material );

  scene.add(mesh);

} );

var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);


var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

renderer.render( scene, camera );

The TextGeometry documentation on three.js is confusing to me:

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

Answer №1

It was necessary for me to relocate the render code within the font loader callback function.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // fov, aspect, near and far
camera.position.set(-15, 0, 25);
camera.lookAt( scene.position );

var loader = new THREE.FontLoader();

loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {

  var material = new THREE.MeshPhongMaterial( { color: 0x0033ff, specular: 0x555555, shininess: 30 } );

  var geometry = new THREE.TextGeometry( 'Hello three.js!', {
    font: font,
    size: 80,
    height: 5,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 10,
    bevelSize: 8,
    bevelSegments: 5
  } );

  var mesh = new THREE.Mesh( geometry, material );

  scene.add(mesh);

  var light = new THREE.DirectionalLight( 0xffffff );
  light.position.set( 0, 1, 1 ).normalize();
  scene.add(light);


  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  renderer.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

Canceling requests with Redux-thunk and axios

My current application utilizes redux-thunk, redux-pack, and axios. Here is an example of how my actions are structured: export const fetchContent = () => (dispatch, getState, { api }) => { return dispatch({ type: CONTENT_FETCH,    promis ...

Node.js and MySQL: Troubles with closing connections - Dealing with asynchronous complexities

I am currently working on a Node program to populate my MySQL database with data from files stored on disk. While the method I'm using seems to be effective, I am facing challenges in ensuring that asynchronous functions complete before ending the con ...

Previewing the small version, loading the URL into a container

Currently, I am working with jQuery's .load(url, ...) function to bring in a url and display it within a div. However, I am facing an issue where the result needs to be resized in order to fit correctly within the layout. Can anyone provide guidance o ...

Attempting to retrieve the mesh object using A-Frame's getObject3D('mesh') function results in an undefined value after several attempts

In an attempt to obtain a bounding box for an obj-model in A-frame, I came across two helpful links on stackoverflow that I will reference here: How to get bounding box information from a 3D object in A-frame? Any way to get a bounding box from a three.js ...

Guide to encapsulating an asynchronous function in a promise

I am in need of wrapping an asynchronous function within a promise to ensure synchronous execution. The reason behind this is that I must obtain a result from the asynchronous function before proceeding with the program's execution. Below is the rele ...

Navigating Gmail pop-up windows can be tricky. Take a look at the

Looking for tips on dealing with Gmail popups? Check out the screenshot below. https://i.sstatic.net/5m1OK.png ...

How can I prevent 401 unauthorized errors from appearing in the console?

I am facing an issue with a Vue.js function that sends data to the back-end for user login. When the user doesn't exist, it returns a 401 unauthorized error. While I can handle this error, it keeps getting logged in the console. Is there a way to prev ...

The combination of maskpass and multiple renderpass in three.js post processing always seems to cause issues

My goal is to achieve the following: https://i.sstatic.net/M6hMu.png Below is the code snippet: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-wid ...

The checkbox linked to a Vector layer in Openlayers 3 seems to have no effect on its visibility

Help me debug my code where I am attempting to connect a checkbox to a vector layer's 'visible' property. I can't seem to figure out what's wrong, can you spot the error? Interestingly, this code successfully works for ol.layer.Ti ...

The Bootstrap dropdown vanishes before I can even click on it

I recently encountered an issue with my Bootstrap dropdown menu on my website. After making some changes, the dropdown disappears after 1-2 seconds when viewed on a mobile phone. Interestingly, the original Bootstrap menu works fine, but not my customized ...

Obtain information through ajax using an asynchronous function

When fetching data in the first example using ajax with XMLHttpRequest, everything works smoothly. example 1 let req = new XMLHttpRequest(); req.open( "GET", "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-tempe ...

How can multiple arguments be passed to a function using JQuery's post method?

I can't seem to figure out how to pass multiple arguments to a function using jQuery's post method. It might sound like a silly question, but I'm struggling with it. Currently, my code looks something like this: $.post("<?php echo site_ ...

Guide to building a hierarchical data object with JavaScript

Prior This object consists of multiple rows: { "functions": [ { "package_id": "2", "module_id": "2", "data_id": "2" }, { "package_id": ...

Utilizing Firebase's real-time database for executing specific conditional queries

I am currently utilizing Express along with the Firebase Realtime Database Admin SDK to handle my database operations. My goal is to retrieve all tickets with a status of pending or open that belong to the logged-in user. However, I am facing difficulty in ...

What is the process for managing cookies on the server side using Node.js?

I have been struggling to access cookies on the server side and have not attempted anything yet. Is there a specific method or NPM package that can assist in setting or retrieving cookies on the server side? ...

Enhancing static SVG with dynamic tooltips using D3.js

Our challenge involves adding tooltips dynamically to a static SVG image when a hover event occurs on an object within the SVG using d3.js in the context of an AngularJS application. The SVG image we are working with is a floorplan, which is quite intrica ...

Using Javascript and jQuery to create an infinite animated background change with fade effect

I am struggling to figure out how to automatically change the background of a div every 3 seconds, looping through a series of images. I posted about this issue before but didn't receive much help. function animate() { change1(); change2() ...

Is there a way for me to display the image name at the bottom before uploading it, and have a new div created every time I upload an image?

Is there a way to display the image name at the bottom and have it create a new div every time an image is uploaded? I would appreciate any help with this... <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstra ...

Guide on displaying several items from Laravel to Vue through the JavaScript filter method?

I need help transferring multiple objects from laravel to vue and filling my vue objects with information retrieved from the database. This is the data received from laravel: https://i.sstatic.net/2Hnk5.png Vue objects to be populated: storeName: {}, ...

Uploading CSV file in Angular to populate the scope rather than sending it to the server

I need assistance with allowing users to upload a CSV file, which will then be displayed and validated. Rather than uploading the file directly to the server, I would prefer to keep it within scope until validation is complete. Unfortunately, Angular 1.5. ...