Understanding the Use of Normal Maps in THREE.js

I've been struggling to implement normal maps in three.js without success. Despite finding related questions like Three.js Normal Mapping forcing mesh to not render and How to make a normal map in THREE.js correctly?, they haven't been helpful due to being outdated and no longer viable with the latest release of r71. I attempted several methods, but none seem to produce any visible changes when applying the normal map.

You can view what I have tried on this JSFiddle. Below is the code snippet of my attempts:

renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Rest of the code continues...

I am wondering if there's a mistake in my approach or if there's an updated resource that I should refer to for guidance?

Answer №1

Everything is functioning correctly with the normalmaps - simply load a texture and apply it using material.normalMap = texture;.

In reference to your jsfiddle:

  1. An error in the console:

    SecurityError: The operation is insecure.
    . To allow Cross-Origin loading when accessing a file, include
    THREE.ImageUtils.crossOrigin = '';
    .

  2. If you are applying the normalMap within your callback after rendering the object, make sure to inform three.js to update the material by using:

    cube.material.needsUpdate = true;

You can find the normalMap here: http://jsfiddle.net/akpbvn9p/3/

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

Confusion strikes as I struggle to update the size of a plane in Three.js after its creation

After setting the height and width to 100 with PlaneGemoetry, I attempted to scale it to the exact same size later using plane.scale(100, 100, 1);. However, the scaled plane appears much larger. Why are the dimensions so different? Am I making a mistake, o ...

AngularJS is receiving an array of null inputs

I have a form where data from my DB is displayed through WebApi. One of the controls will contain an array of values. There is a scenario where the user can edit and save it using the PUT function. Controller : $scope.Put= function () { $scope.i ...

Unexpected issue on AngularJS application

Encountering issues with incorporating a controller into my page - each time I add it to a DOM element, an error is thrown. Here's the structure of my HTML page: <html data-ng-app="sportsStore"> <head> <title>Sports Sto ...

An occasion to monitor alterations in attributes

Is there a way to attach an event to an HTML element to listen for attribute changes? My goal is to trigger an action when the visibility of a div changes. I can't alter the JavaScript code that controls the visibility, so I need to find a way to dete ...

Preventing postback is not guaranteed by returning false from the client-side handler

Within my WebForms page, there is a button coded as follows: <asp:Button ID="btnNewProgramNext" runat="server" Text="Next &gt;&gt;" /> A javascript/jquery script has been implemented to manage its event. $('#<%= btnNewProgramNext.C ...

The statusText variable for getXMLHTTP object is not found when the status is not equal to

Earlier, I posted about this issue before isolating the problem. Now that I have isolated it, I wanted to repost with a clearer focus on the two functions causing the problem. Whenever I update my State, it triggers the getCity function. The call is being ...

Issue with Moment.js: inability to append hours and minutes to a designated time

I have a starting time and I need to add an ending time to it. For example: start=19:09 end=00:51 // 0 hours and 51 minutes I want to add the 51 minutes to the 19:09 to make it 20:00. I've attempted several different methods as shown below, but none ...

The warning message from npm indicates a lack of permission to write to the specified directory, `/usr/local/lib

Important: For security reasons, please avoid using the suggested solution and opt for the top-voted answer instead! Query: I am attempting to execute the installation of Monaca with this command. npm install -g monaca However, immediately encountering ...

Error: Next.js is throwing a SyntaxError due to encountering an unexpected token 'export'

I encountered an issue when trying to render the following code: SyntaxError: Unexpected token 'export' (project path)/node_modules/react-syntax-highlighter/dist/esm/styles/prism/index.js Everything seems to work as expected initially, but then ...

What would you name this particular element?

I want to create a unique slider design but I'm unsure where to begin or how to search for information because I don't know the correct terminology. Does this type of slider have a specific name? I heard about Marquee, but that seems like someth ...

Is local computer time utilized by Javascript?

I apologize if this seems like a silly question, but I just want to confirm. Does JavaScript utilize the local time of the user's computer? ...

the input text box does not respond to click events

This is the input I have: <input name="DeviceIP" class="k-input k-textbox" type="text" data-bind="value:DeviceIP"> Below is my JavaScript code that seems to not be functioning properly: $('input[name="DeviceIP"]').click(function () { al ...

The .ajax() method is having trouble sending data to a PHP database query

Dealing with a persistent issue here. Grateful for all the assistance so far, but I've hit another roadblock. My .ajax() function just won't run. Strangely, the .click() doesn't work unless I have if(field != text) before my .ajax() call, bu ...

Tips for using the arrow keys to navigate the cursor/caret within an input field

I am trying to create a function that allows the cursor/caret to move inside an input field character by character using the arrow keys (ArrowLeft, ArrowRight) on a keydown event. Current Approach: const handleKeyDown = (e: KeyboardEvent<HTMLInputEle ...

Is it necessary for me to replicate this function? - jQuery

I have developed a function that creates a transparent information overlay on a current div for a mobile web app. Context: I am using jQTouch, which means I have separate divs instead of loading individual pages anew. $(document).ready(function() { ...

Encountering the error message "Failed - File incomplete" in Google Chrome while attempting to download a file from MongoDB

I have developed a JavaScript application that enables users to download a file. The page displays a clickable link to the file, which is stored in MongoDB. However, when I attempt to download the file by clicking on the link, I encounter an issue where Ch ...

Execute JavaScript script whenever the state changes

I have a large table with multiple HTML elements such as dropdowns, textboxes, radio buttons, and checkboxes. Additionally, I have a function that I want to execute whenever any of these items change. Whether it's a selection from a dropdown, typing i ...

Send the user's information to the userProfile using Axios

Alright, here's what I've got: UserProfile Details: class UserProfile(models.Model): user = models.OneToOneField(User, on_delete=models.CASCADE, related_name='profile', unique=False) orders = models.ManyToManyField(Order, blank ...

Finding the version of a dll file with javascript or JQuery

Is there a way to retrieve the version number of a file using JavaScript or JQuery on an HTML page? ...

What is the best way to determine the number of documents in an array based on their values in MongoDB?

How can I write a query to count the number of parking spaces with the excluded property value set to false for the parking lot with _id: 5d752c544f4f1c0f1c93eb23? Currently, I have managed to select the number of parking spaces with excluded: false prope ...