I'm having trouble with my TextGeometry not displaying on screen. Can someone help me figure

Here is the code I am using for Three.js:

<html>
    <head>
        <title>My first Three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
       </style>
   </head>
   <body>
       <script src="js/three.min.js"></script>
       <script src="js/optimer_regular.typeface.js"></script>
       <script>
           //Basic Three components
           var scene = new THREE.Scene();
           var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight,       0.1, 1000 );

           var renderer = new THREE.WebGLRenderer();
           renderer.setSize( window.innerWidth, window.innerHeight );
           document.body.appendChild( renderer.domElement );
           //Let´s add a cube
           var geometry = new THREE.BoxGeometry( 1, 1, 1 );
           var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
           var cube = new THREE.Mesh( geometry, material );
           scene.add( cube );

           camera.position.z = 5;
           //Let´s add a text
           var material2 = new THREE.MeshPhongMaterial({
               color: 0x00ff00
           });
           var textGeom = new THREE.TextGeometry( 'Sitescope', {
               font: 'optimer',
               weight: 'normal' 
           });
           var textMesh = new THREE.Mesh( textGeom, material2 );
           scene.add( textMesh );
           //Render scene
           function render() {
               requestAnimationFrame( render );
               cube.rotation.x += 0.01;
               cube.rotation.y += 0.01;
               renderer.render( scene, camera );
           }
           render();
       </script>
   </body>

Whenever I run the code, the cube renders correctly but the text does not appear on the screen. The only message I see in the javascript console is: THREE.WebGLRenderer 69.

I am struggling to figure out why my text is not displaying. Could someone with experience in Three.js help me troubleshoot this issue? Thank you!

Answer №1

When you utilize a THREE.MeshPhongMaterial(), it is essential to have a light source within the scene. Without proper lighting, the model may appear completely black. This can be misleading if your background is also dark, as you won't be able to tell if the model has been rendered or not. Check out this JSFiddle example. In this demo, I am using THREE.MeshNormalMaterial(). Switching to PhongMaterial will highlight the issue I am discussing. Notice how the text appears in black due to its placement over the green cube.

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

When I click on the button, the page reloads instead of executing the essential code

On my website, there is a settings page where users can edit their profiles. After editing, they click the update button which triggers the updateProfileData function. This works smoothly in Chrome browser, but in Firefox, the page reloads as soon as the b ...

What exactly is the mechanism behind the functionality of ng-cloak?

Recently, I've been delving into the ng-cloak source code and trying to understand its inner workings. If you're interested, you can take a look at the source code here. From what I gather, it seems that the ng-cloak attribute is removed during ...

Sending data through a form using AJAX and PHP

Greetings! I've developed a page that allows users to view results for a specific tournament and round. The user will first select a sport, which will then populate the available tournaments based on the sport selection. Following this, the user can ...

Take out property that was placed in the "style" tag

One particular static HTML file that I have consists of the following code: <style> p { overflow-wrap: break-word; word-break: break-word; hyphens: auto; } </style> <div id="wrapper"> <p>Insert text here ...

Whenever I repeatedly click the button, the array will store a new value. My goal is for it to collect and store all values obtained from the function

After retrieving data from the listAPI value using an API, the output is displayed as follows: //output - console.log(listAPI) 5) [{…}, {…}, {…}, {…}, {…}] 0: {id: "1", name: "name 1", active: "true"} 1: {id: " ...

Sending Emails with AngularJS

Exploring AngularJs has been a delightful experience for me, and I recently stumbled upon a fantastic plugin for Angular called angular-http-auth. This plugin allows you to seamlessly integrate an identification system. Does anyone know of a similar resou ...

Disabling a checkbox within an onClick event handler

I'm facing an issue where I have a checkbox with the type "checkbox" and I'm using JAWS to read it. The problem is that in IE11, JAWS reads a disabled checked checkbox as unchecked, which I believe is a bug in IE. To work around this, I need to r ...

JS : Removing duplicate elements from an array and replacing them with updated values

I have an array that looks like this: let arr = ['11','44','66','88','77','00','66','11','66'] Within this array, there are duplicate elements: '11' at po ...

Can this pagination task be accomplished without the use of backgrid?

I have been exploring ways to implement server-side pagination similar to what Datatables offers, and during my search I came across the backbone.paginator library on GitHub. However, I am curious if there are any other options available as well. After ex ...

transition effect of appearing and disappearing div

Having trouble creating a fade out followed by a fade in effect on a div element. The fade out happens too quickly and the fade in interrupts it abruptly. Here is the JavaScript code: $('#fillBg').stop(true,false).fadeTo(3000, 0); $("#fillBg"). ...

How to access a class from another JavaScript file using a function call

The title may seem strange, but I will do my best to explain the situation clearly. I have a website with a navigation bar where each tab corresponds to a different php file. All the files share a common js and css file. The directory structure is as foll ...

Troubleshooting slow/delayed performance when using manual dataItem.set() in Kendo UI Grid

I recently implemented an editable Kendo Grid with a checkbox column to toggle a boolean value, thanks to an ingenious solution offered by OnaBai. The implementation works flawlessly! The only issue I'm facing is that there seems to be a delay in cha ...

Guide on how to implement a file upload feature using only JavaScript and the FileReader API

Allow me to explain the issue I'm facing. To give you some context, I've been working on a forum web application. Lately, I've been trying to enable users to choose a photo from their local file system during sign up. The idea is that once a ...

Managing email delivery and responses within Nextjs server functions using Nodemailer and React Email package

Currently, I'm working on a Next.js project that involves sending emails. The functionality works as expected, but I've encountered an issue when trying to verify if the email was successfully sent or not. Here's my current setup: await tran ...

Is it possible for me to deactivate the Material-UI SpeedDial hover function?

I need to override the default mouseover/hover behavior of Material-UI's SpeedDial component (https://material-ui.com/api/speed-dial/). Currently, when hovering over the primary icon, the SpeedDial opens. It also opens on click, causing confusion for ...

The integration of VueJS with the Canva Button JS API amplifies the

I have been exploring Canva's Button JS API which can be found at My goal is to implement a modular approach in utilizing their API, only loading the CanvaJS when necessary. My implementation involves triggering the load function when a button is cli ...

Trouble encountered while setting up Firebase Auth for React Native by utilizing AsyncStorage

Trying to implement SMS authentication via Firebase has presented some challenges for me. Despite poring over the documentation and scouring Google for solutions, I've hit a dead end. My setup is pretty basic - just a single input field and a "Send" b ...

A see-through object appears only properly when viewed from one specific angle

I am currently working with THREE.js and the WebGL renderer, facing an issue with a self-transparent object in my scene. This object is composed of a single geometry with a basic material that includes a texture and has the transparent: true property enabl ...

Encountered an unanticipated symbol at column 2 while using the Angular Google Recaptcha

I have integrated the Angular Google Recaptcha directive into my application from https://github.com/VividCortex/angular-recaptcha. However, upon running my application, I encountered an error stating that I am using my public key instead of my private key ...

What steps can be taken to restrict users to providing only one comment and rating for each item?

In the backend controller, I have the following code snippet: 'use strict'; var Comment = require('../../../models/comment'); module.exports = { description: 'Create a Comment', notes: 'Create a comment&apos ...