Enhancing the appearance of bufferGeometry shapes in THREE.js by incorporating normal maps

I am currently attempting to incorporate a normal map (specifically a wood texture) onto a custom part I created using THREE.BufferGeometry() and vertices.

For this specific part:

//edit Initially, I omitted this section when posting. My script recognizes this directory and does not generate any errors.
const woodPattern = new THREE.TextureLoader();
const woodTexture = woodPattern.load('/textures/wood_pattern.jpg');

const frame_upper_part_geometry = new THREE.BufferGeometry();
const frame_upper_part_positions = [
     0.8,  0.8,  0.95,
    -0.8,  0.8,  0.95,
    -0.8,  0.8,  0.75,

    -0.8,  0.8,  0.75,
     0.8,  0.8,  0.75,
     0.8,  0.8,  0.95,
     
     0.6,  0.6,  0.95,
    -0.6,  0.6,  0.95,
    -0.6,  0.6,  0.75,
 
    -0.6,  0.6,  0.75,
     0.6,  0.6,  0.75,
     0.6,  0.6,  0.95,

     0.8,  0.8,  0.95,
     0.6,  0.6,  0.95,
     0.6,  0.6,  0.75,
     
     0.6,  0.6,  0.75,
     0.8,  0.8,  0.75,
     0.8,  0.8,  0.95,

     -0.8,  0.8,  0.95,
     -0.6,  0.6,  0.95,
     -0.6,  0.6,  0.75,
     
     -0.6,  0.6,  0.75,
     -0.8,  0.8,  0.75,
     -0.8,  0.8,  0.95,

     0.8,  0.8,  0.75,
    -0.8,  0.8,  0.75,
    -0.6,  0.6,  0.75,

    -0.6,  0.6,  0.75,
     0.6,  0.6,  0.75,
     0.8,  0.8,  0.75,
];
frame_upper_part_geometry.setAttribute( 
    'position', 
    new THREE.Float32BufferAttribute( frame_upper_part_positions, 3 ) 
);
frame_upper_part_geometry.computeVertexNormals();
const frame_material = new THREE.MeshStandardMaterial({normalMap:woodTexture})
frame_material.side = THREE.DoubleSide;
frame_material.color = new THREE.Color(0x654321)
const frame_upper_part = new THREE.Mesh(frame_upper_part_geometry, frame_material)
scene.add(frame_upper_part)

I do not receive any errors, but despite adding the normal map, it doesn't appear to have an effect. However, if I added it the same way with a predefined geometry in THREE itself, it should work. Am I overlooking something?

This is the result I'm getting, no errors, but the effects of the normal map are not visible.

Answer №1

The custom geometry you've created is missing texture coordinates, which means applying textures will not produce the desired results. Remember that texture coordinates are stored in the uv buffer attribute.

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

Ways to automatically scroll through an associated HTML table

Managing two related tables that display the same information in different languages can be a tricky task. In my case, when I use the Key down or Key up functions, only one table scrolls while the other remains stationary. How can I synchronize their scrol ...

Utilizing Directives to Gain Scope Access in a Separate Module

Recently delving into AngularJS, I find myself grappling with the best approach to a particular issue, especially in my utilization of directives. In my main app, I aim to consolidate some common code, such as a directive for displaying messages on an HTM ...

Having issues with Exit Property functionality in Framer Motion when using react js

Help Needed: Framer Motion Exit Property Not Working I've been trying to get the exit motion to work on Framer Motion with React JS for over a week now, but everything else seems to be functioning correctly. I have installed the latest version of Fra ...

A guide to setting an href using variable values in jQuery through manual methods

I have a datepicker set up where each day, month, and year is stored in a variable. I then display this information in the desired format. Below is the jQuery code: jQuery(document).ready( function($){ alert('alert function'); var txtFr ...

The reference to `$refs` is throwing a TypeError because it is not recognized as

Having an issue with VueJs. I implemented a "Confirmation Dialogue" on a button's On-Click-Event and it worked fine. However, when I tried to replicate the implementation on another button within a different parent, I received a "TypeError: this.$ref ...

Ways to have a component in Angular 5 patiently await and receive data from another component without the use of an event signal

Seeking assistance with a dilemma involving two components (pop ups) where I need to transfer data from a child component to a parent one that lacks an event to retrieve the data. Essentially, I am looking for a way for the parent to be able to listen fo ...

What is the best way to safely store a logged-in user on the client-side?

As I delve into creating a login system for my simple social media website where users can make posts and view feeds from fellow followers, I've successfully implemented user login. Upon logging in, I'm able to retrieve the user's credential ...

Upon refreshing the browser, an error pops up saying "unable to set headers after they have been sent."

Error image: https://i.sstatic.net/3dnH9.png app.get('/home', function (req, res, next) { usersession = req.session; if (usersession.loggedin == true) res.redirect('/home'); res.sendFile(path.join(__dirname, &a ...

Tips on sending arguments to functions associated with ...mapActions...()?

After analyzing the passage below export default { methods: { ...mapActions(["updateData", "resetData"]); } } I wanted to include a parameter in the called functions. Unsure of the proper way to do this while still using the ...mapAction() call, ...

Issuing a straightforward GET request results in a significant delay in receiving a response

I have a simple app running on Node.js, Handlebars, and Express. The main page features a single button that triggers an asynchronous GET request when clicked, causing a console.log message to display. Initially, the first click on the Submit button shows ...

Extract the URL from an iframe using either coding techniques or through user interaction

I am in the process of creating a website that will serve as a wrapper around a third-party site using an iframe. My goal is to allow users to browse the third-party site within the iframe, then share the URL with the main site for storage. My objective i ...

Is there a way to submit a form without refreshing the page, even if there are no input fields present

My script is all set up with predefined elements. When I click on SUBMIT, I want it to work without refreshing the page. Currently, it refreshes the page and displays "Working". What I'm aiming for is something like this: This is my code snippet: ...

Launching a modal by passing data in an MVC environment

I am struggling with a task where I have a list of objects, and upon clicking on any of them, I want a modal to open displaying the data of the clicked object. Despite thinking it would be simple, I just can't seem to get it to work. My goal is to pas ...

The Angular swiper appears to be malfunctioning as it is not showing any content

I possess a file that contains HTML markup: <div class="reviews__inner"> <swiper [pagination]="{ type: 'fraction'}" [navigation]="true" class="mySwiper"> <div class="sl ...

How can I retrieve the $index value of an ng-repeat element within a uib-dropdown?

I am currently working on implementing an ng-repeat loop that includes a dropdown menu for each element. I want the dropdown menu to contain functions that operate on the specific element, requiring access to the index of that element. Below is the code sn ...

The correct assertion of types is not carried out during the initialization of generics through a constructor

I am encountering a minor issue with TypeScript, and I am uncertain whether it is due to a typo on my part or if TypeScript is unable to correctly infer the types. Let me provide all the necessary code to replicate the problem: interface IRawFoo { type: s ...

Using Cocoon Gem in Rails 5 to create nested forms within nested forms

Currently, I am experimenting with the cocoon gem to construct nested forms efficiently. Within my application, I have defined models for Organisation, Package::Bip, and Tenor. The relationships between these models are as follows: Organisation has_ma ...

Pressing a button in Reactjs triggers a state update to a specific value, avoiding any undefined cases

I've encountered an issue with my onClick event implementation on a button. When I try to set the value to 0, the first click returns an "undefined" value. Initially, I had set the state of value to null in the constructor. Handler function code si ...

Apologies, but the module '@tanstack/query-core' cannot be located

While working on implementing a ConnectWalletButton demo using "Rainbowkit"+"wagmi"+viem", I encountered an issue when running "yarn run dev" that resulted in the following error: Unhandled Runtime Error Error: Cannot find module '@tanstack/query-core ...

The Importance and Purpose of Incorporating a Callback

Understanding asynchronous operations and callbacks has been a challenge for me. To improve my familiarity with these concepts, I've been studying code examples that utilize them. However, there's one aspect of this specific code snippet that con ...