Error in ThreeJS: The constructor THREE.FaceNormalsHelper is not defined

I am currently studying a course on three.js and encountered an issue in Chrome version 79 while progressing through the material:

"THREE.FaceNormalsHelper is not a constructor".

The line causing trouble is as follows:

normals = new THREE.FaceNormalsHelper(sphere, 5, 0x00ff00, 1);

According to the official documentation for three.js, the example code should look like this:

helper = new THREE.FaceNormalsHelper( box, 2, 0x00ff00, 1 );

The sphere in my code is generated using SphereGeometry, which is a type of Geometry, so that should not be causing the issue. It seems like I might be overlooking something obvious. Can you please help me identify what I might be missing or not taking into account?

javascriptthree.js

Answer №1

FaceNormalsHelper is no longer included in the core library as of version R112. This change is documented in the migration guide.

However, the class can still be found in the examples directory and can be imported as follows:

import { FaceNormalsHelper } from 'three/examples/jsm/helpers/FaceNormalsHelper.js';

Remember to update to three.js R112

Answer №2

Quick heads up: Starting from March 21st, 2021, the FaceNormalsHelper can no longer be found in the "examples" folder. However, there is now a "VertexNormalsHelper" which seems to be a potential alternative. I am still learning and exploring, so I may not be the best judge of its effectiveness.

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 do I retrieve the HSL value for a color selected using an input of type 'color' in JavaScript?

I am faced with a creativity block and don't know where to begin. My goal is to develop functions that can manipulate the HSL values once I have access to them. Specifically, I am interested in modifying the light value, which is why I require it in ...

javascriptcolorshsl

Learning how to track mouse wheel scrolling using jQuery

Is there a way to track mouse scrolling using jquery or javascript? I want the initial value to be 0 and increment by 1 when scrolling down and decrement by 1 when scrolling up. The value should always be positive. For example, if I scroll down twice, the ...

javascriptjqueryhtmlcss

Button press triggers the fadeIn function successfully, but the keypress event does not have the same effect

I'm currently facing an issue with two div elements on my webpage. I want only one of them to be visible at a time, depending on which key is pressed. If the 1 key is pressed, I want 'div1' to fadeIn (if it's not already visible) and fo ...

javascriptjqueryhtmlcss

What is the most effective way to accurately identify the mobile platform of a user using JavaScript?

I need to determine whether a user has accessed the application through a browser on Android or iOS. The company would like to display slightly different content depending on the platform. While I am aware that navigator.platform can be used for this pur ...

javascriptandroidios

"Converting an object to a JSON string using URLSearchParams: A step-by

I am currently working on a piece of code that retrieves all the input types from a form const form = document.querySelector('form'); const data = new URLSearchParams(new FormData(form).entries()); My main concern is how to convert the above ...

javascriptjqueryjsonajax

Tips for accessing and displaying JSON data using jQuery

Data in JSON format: [ { "ID":"25", "Serial":"1", "Purchase_id":"8", "Item":"23", "Unit":"1", "HSN":"84212120", "Quantity":"10", "Purchase_rate":"100", ...

javascriptjqueryjson

Picture fails to load on Ionic app on the device

Currently, I am utilizing Ionic 3 for my project. The location of the images file is \src\assets\img. This pertains to a basic page implementation. export class BasicPage { items = []; constructor(public nav: NavController ,private adm ...

javascripthtmlangularionic2ionic3

Issues with nested array filtering in JS/Angular causing unexpected outcomes

I am faced with a particular scenario where I need to make three HTTP requests to a REST API. Once the data is loaded, I have to perform post-processing on the client side. Here's what I have: An array of "brands" An array of "materials" An array o ...

javascriptangularjsfilter

How can I ensure that all row checkboxes are automatically marked as checked upon loading the Material Table in ReactJS?

I'm currently working on a project using React Material Table and I need to have the selection option pre-checked by default. Is there a way to accomplish this? function BasicSelection() { return ( <MaterialTable title="Basic Selec ...

javascriptreactjsmaterial-uimaterial-table

Is there a way to use JavaScript to alter the existing URL?

Currently, I am utilizing a select tag to allow users to choose the number of 'rows' displayed on the table. <%=select_tag :per_page, options_for_select([10,20,50,100]....some more code...., onchange => "if (this.value) {windows.location=& ...

javascriptjqueryhtmlruby-on-railsurl

Is there a way to showcase a Bootstrap popover using HTML content sourced from a GridView?

I've spent the last couple of hours experimenting with this, trying different things. I can successfully display a popover with basic title and content, but I'm struggling to make it work with HTML and Eval() as the content. Here's my curren ...

javascriptc#jqueryasp.netpopover

Angular Bootstrap Popover will now automatically hide after a short period of time due to the removal of the tt_isOpen variable in ui-bootstrap-tpls-0

I recently attempted to implement the ingenious directive created by runTarm for managing angular-bootstrap-popover-hide-after-few-seconds. While using ui-bootstrap 0.11.0.js presented no issues, transitioning to ui-bootstrap-0.12.0 proved problematic as ...

javascriptangularjstwitter-bootstrap

Obtain the alternative attribute value from the adjacent element and save it to a variable using jQuery

I'm a beginner with jquery and am trying my hand at creating a simple drag and drop game using the following HTML structure: <div class="set-text"> <div class="text">cinema</div> <div class="text">post-office</div> ...

javascriptjqueryattrsiblings

Proper method for executing a synchronous AJAX POST request and subsequently submitting a form

Currently, I have an ASP submit button in my code. <asp:button runat="server" Text="Submit" id="btnSubmitOrder" OnClientClick="return SubmitOrder()" /> The JavaScript function I'm using, SubmitOrder(), is designed to execute a POST request. De ...

javascriptjqueryajax

Bringing in a script and invoking a function on a specific variable

As a newcomer to Typescript, I've been experimenting with some code I came across online to enhance the appearance of links on my website. <script src="https://wow.zamimg.com/widgets/power.js"></script> <script>var wowhead_tooltips ...

javascripttypescriptvisual-studio-codeangular8

Switching button class when hovering over another div

When you click on the "collapsible-header" div, I want the text "TE LAAT" in the button to change to "NU BETALEN". Currently, the CSS code changes the text on hover, but I want it to change on click when the collapsible-header also has the active class. T ...

javascriptjqueryhtmlcssonclick

Looking for guidance on integrating cookies with express session? Keep in mind that connect.sid is expected to be phased out

Within my app.js file, I have the following code snippet: app.use(session({secret: 'mySecret', resave: false, saveUninitialized: false})); While this setup functions correctly, it triggers a warning message: The cookie “connect.sid” will ...

javascriptnode.jsexpresssessioncookies

Refreshing Child's Activities

In my scenario, I am displaying data in a child action and utilizing buttons to modify the displayed information. Here is an example of how I am achieving this: Index.cshtml <head> <script type="text/javascript"> $("#RefreshView").on ...

javascriptjqueryasp.net-mvc

Retrieving Data from a Promise - { AsyncStorage } React-Native

Currently, I am grappling with figuring out how to retrieve the outcome of a promise. My journey led me to delve into the React Native documentation on AsyncStorage available here: https://facebook.github.io/react-native/docs/asyncstorage I decided to uti ...

javascriptreactjsreact-native

Tips on concealing all classes except one through touch swiping

If you have a website with a single large article divided into multiple sections categorized as Title, Book1, Book2, & Book3, and you want to implement a swipe functionality where only one section is displayed at a time, you may encounter some issues. ...

javascriptjqueryhtmlcssswipe