Three.js - Error: Attempting to access the 'normal' property of an undefined value

Encountered an issue that I'm struggling with 

Uncaught TypeError: Cannot read property 'normal' of undefined

upon executing the following code on my live website:

var text_geo = new THREE.TextGeometry("H", {size:20});
var text_mat = new THREE.MeshBasicMaterial({color:"white", overdraw:true});
var txt = new THREE.Mesh(text_geo, text_mat);

Upon checking in the Chrome debugger, it seems to be originating from the three.js source code file. Any suggestions on how to work around this?
Thanks

javascriptthree.jsgeometrytypeerror

Answer №1

Dealing with the same issue, I discovered a solution that involves downloading a specific font for use in THREE.js. By default, the font used is helvetiker, which can be found here. Simply add it to your webpage like any other JavaScript script.

<script src="http://mrdoob.github.com/three.js/examples/fonts/helvetiker_regular.typeface.js"></script>

Remember to ensure that you load the font after loading THREE.js.

If you prefer to use a different font, you can download the corresponding font file and specify a weight property:

<script src="http://mrdoob.github.com/three.js/examples/fonts/helvetiker_bold.typeface.js"></script>

var text_geo = new THREE.TextGeometry("H", {size:20, weight: "bold"});

r.54

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

How can array data be organized by date in an Ajax response?

i have an array with the following data [{ date: "January 2019", sum: 20, name: "Persada", },{ date: "Februay 2019", sum: 21, name: "Persada", },{ date: "April 2019", sum: 22, name: "Persada", },{ date: "January 2019", ...

javascriptjqueryarraysajax

There seems to be a lack of update in the fragment shader due to mouse movement

Struggling to incorporate the Voronoi shader from the Book of Shaders into three.js, I can't figure out why the mouse position isn't affecting my visible output. Even though I'm logging the mouse position and checking that the uniform value ...

javascriptthree.jsshaderfragment-shader

Finding text located between specific characters and a unique symbol

Is there a way to extract data between a specific string and a special character using JavaScript? Here is the code I am working with: var string = '(CATCH: dummy)'; var TitleRegex = /\((CATCH:.*?)\)/; var titleData = st ...

javascriptregex

Distribution of data in K6 according to percentage

Is it possible to distribute data based on percentages in K6? For instance, can you demonstrate how to do this using a .csv file? ...

javascripttestingperformance-testingload-testingk6

Using the console to modify variables in AngularJS

As I dive into learning Angular, I created a fun little game. While using ng-inspector to check the current variable values, I'm now wondering how to manipulate these variables directly through the browser console. Any insights? ...

javascriptangularjs

Multiple instances of Google Maps embedded on a single webpage using a consistent design

Is it possible to have multiple Google Maps on a single page? I currently have this code, but I am unsure of how to implement this. What additional steps are needed? I would like the other maps to have the same styles as well. Another issue I am facing ...

javascriptjquerygoogle-maps-api-3

The Material UI appbar fails to resize properly on mobile devices

I have added a material-ui appbar to the top of my website. Check it out here: Website Appbar However, when I resize the website to mobile size, the appbar does not adjust responsively to the screen. Here's how it looks on mobile: Appbar when in mobi ...

javascriptreactjsmobilewebmaterial-ui

What is the highest image size that desktop Chrome can accommodate?

Let's delve into a specific scenario amidst the vast possibilities. Assume the following technical specifications: Browser: Chrome Latest (Desktop) Hardware: Windows Standard PC with default Intel Graphics card Ram: 8GB Processor: i7 @ 3.40 GHz The ...

javascripthtmlcssimagegoogle-chrome

Having trouble adding space between paragraphs inside a div element while trying to retrieve its content using jQuery

Issue Description: Currently, I am utilizing the jQuery syntax below to count words: var value = $('#displayContent').text(); Before counting the words, I aim to employ a RegExp in value that concatenates the last word of each sentence with th ...

javascriptjqueryhtml

Incorporating a progress bar into the file upload feature

Looking to incorporate a minimalist progress bar using jQuery into this HTML. Any suggestions on the simplest approach? Just need a percentage value and a progress bar. <!DOCTYPE html> <html> <body> <form action="basic.php" method= ...

javascriptjqueryhtmlcss

Guide on creating connecting lines for bar charts within Kendo-UI

Recently embarking on the journey of learning Kendo-UI I have developed some bar charts and now I am looking to incorporate draw lines that connect the bar charts, similar to what is shown in the second figure. This is my current progress: This is my de ...

javascripthtmlkendo-ui

Replace the hyphen with a comma using JavaScript

Looking for a way to modify a string like this: "PALS español K- add-on" by replacing the - with ,. The desired output should be: "PALS español K, add-on" Is there a JavaScript solution to achieve this task? ...

javascript

Detecting collisions on a pixel-by-pixel basis within Javascript/Jquery/Gamequery

Currently, I am working on developing a web game using Jquery with the GameQuery plugin. However, I have encountered an issue where the GameQuery plugin does not support per pixel collision detection, only bounding boxes collision detection. Is there a way ...

javascriptjquerycollision-detection

What is the best method to extract the country_code from JSON data using jQuery or JavaScript?

{ "status": "success", "description": "Data successfully received.", "data": { "geo": { "host": "2405:204:3213:5500:b012:b9d5:e4db:47b6", "ip": "2405:204:3213:5500:b012:b9d5:e4db:47b6", "rdns": "2405:204:3213:5500:b012:b9d5:e4db ...

javascriptjqueryjson

Ionic2 - Ion-select malfunctioning on a particular page

I have encountered an issue with the ion-select component in my Ionic 2 app. Specifically, when navigating to a certain page, the ion-select does not display properly. Strangely enough, on other pages of the app, this component works perfectly fine. Below ...

javascripthtmlangulartypescriptionic-framework

Determining if an array is devoid of any elements using ng-if

When the API I am dealing with has no items in the array, it returns: items: [] If there are elements in the array, it looks something like this: items: [ { name: 'Bla' } ] I suspect that in my template, I will need to utilize ng-if t ...

javascriptarraysangularjs

Understanding the contrast between a put request subscription with an arrow versus without in Typescript

I'm sorry if the title is not very clear. In my Angular project, I have come across two different put requests: public Save() { const types: string[] = this.getTypes.getCurrentTypes(); this.userTypeService .updateTypes(this.userID, gro ...

javascriptangulartypescript

What could be the reason for the ReferenceError that is being thrown in this code, indicating that '

let number = 1; console.log(number); Feel free to execute this basic code snippet. You may encounter an issue: ReferenceError: test is not defined, even though the variable was declared. What could be causing this unexpected behavior? ...

javascriptunicodelanguage-designlanguage-featuresreferenceerror

The forked library fails to generate a dist folder within the node-modules directory

Having an issue with a Vue.js plugin from GitHub. Here's the link: https://github.com/antoniandre/vue-cal I forked it and made some changes, but when I try to install the node_modules folder, the dist folder is missing. Any idea what could be causing ...

javascriptvue.jsnode-modules

Guide to positioning a THREE.js plane onto the exterior of a spherical object

Just starting out with Threejs and 3D graphics. I'm interested in learning how to position a plane of any dimensions on the surface of a sphere. Here's an example image of what I'm aiming for: example image ...

javascriptthree.js3dgeometry