Difficulty applying texture to Three.js sides

After creating a mesh by extruding a png image, I used the code reference from . The issue I encountered is that when using a THREE.MeshPhongMaterial with a texture map, the texture only applies to the front and back of the mesh, not the sides. The sides end up taking on the darkest color of the texture, as shown in the image below.

https://i.sstatic.net/Xumw0.png

Interestingly, when I tried the same material and texture on a cube in threejs.org/editor, the texture applied to all sides. However, in my case, the texture does not show up on the sides of the mesh.

Here is a snippet of the code I used:

var texture = THREE.ImageUtils.loadTexture('/Content/texture-green.jpg');
var bumpTexture = THREE.ImageUtils.loadTexture('/Content/texture-green-bump.jpg');
var specularTexture = THREE.ImageUtils.loadTexture('/Content/texture-green-specular.jpg');

var material = new THREE.MeshPhongMaterial({
    map: texture,
    bumpMap: bumpTexture,
    bumpScale: 0.03,
    specularMap: specularTexture
});

var g = new THREE.CanvasGeometry(canvas, { "height": 0.1, "solid": solid, "offset": window.thr, "steps": (steps ? Math.abs(steps) : 5) });
g.center();
mesh = new THREE.Mesh(g, material);
scene.add(mesh);

This raises the question of whether there is an issue with the geometry formation () or if there is another method to properly apply textures to the sides of the mesh.

Any insights or suggestions would be greatly appreciated. Thank you.

Answer №1

After following the steps outlined in this link, I was able to successfully implement the solution. I only needed to make a few minor adjustments to the texture to achieve the desired result.

texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
texture.offset.set(0.5, 0.5);

Hopefully, this information will be beneficial to others facing a similar issue.

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

The parameter 'string | JwtPayload' cannot be assigned to the parameter 'string'

Utilizing Typescript alongside Express and JWT for Bearer Authorization presents a specific challenge. In this situation, I am developing the authorize middleware with JWT as specified and attempting to extricate the current user from the JWT token. Sampl ...

How can one utilize a second drop-down list in asp.net to alter the selected index and visibility of a drop-down list?

I am working on an asp.net application that includes a drop down list with the following structure: <asp:DropDownList runat="server" ID="ddlChanges" CssClass="selectstyle" onchange="javascript:ddlChangesChanged();"> <asp:ListItem Text="-- Select ...

What is the best way to remove double quotes surrounding "name" and "count" when displayed in the JavaScript console output?

I am struggling to transform the input: ["apple", "banana", "carrot", "durian", "eggplant", "apple", "carrot"] into the desired output: [{ name: "Apple", count: 2 }, { name: ...

Can one utilize Javascript to write in plain text format?

Currently, using JavaScript I have a plain text containing data that is displayed within my form tags. Everything is functioning correctly, but now I need to update the values inside the code of my form tags in order for the changes to also be reflected in ...

Can you provide guidance on utilizing OneNote JavaScript APIs to interpret indented paragraphs within OneNote?

I keep a notebook that contains the following entries: https://i.stack.imgur.com/MLdO0.png For information on OneNote APIs, you can refer to this link (paragraph class selected already) https://learn.microsoft.com/en-us/javascript/api/onenote/onenote.p ...

Automatically compile files while performing an npm install or update

I am looking for a way to automatically compile my TypeScript code into JavaScript when another project requires it. For example, when a project runs npm install or updates with my project as a dependency, I want a specific command to be executed after all ...

Guide to illustrating the connections between origin and destination nations utilizing IP addresses

My goal is to create an interactive world map with a clickable marker for each country. When a user clicks on a source country's marker, I want to display interactions with other countries in an aggregated manner. While I have successfully drawn the w ...

The Express app.post endpoint is not acknowledging incoming POST requests from Postman

I am facing an issue where my POST request using Postman to my express app is timing out. Here is the request: https://i.sstatic.net/UfL07.png And here is the app: import express from 'express' import bodyParser from 'body-parser' i ...

Testing Angular 2: Ensuring Component Properly Calls Router with Accurate Arguments

I'm facing an issue with a child component that includes a button element with 'routerlink' attribute for navigation upon clicking. The button does not have a '(click)' handler, only the routerlink. Currently, I am writing a unit ...

Next.js 13 React Server Component not displaying updated data upon build completion

I have a React Server Component that retrieves its data at build time and does not reload it while the site is running. I expected it to fetch the data once when the server component is first rendered. Is there a way to force this server component to relo ...

What is the best way to find out if an array index is within a certain distance of another index?

I'm currently developing a circular carousel feature. With an array of n items, where n is greater than 6 in my current scenario, I need to identify all items within the array that are either less than or equal to 3 positions away from a specific inde ...

What could be the issue with my JSON data stream?

Trying to set up the Fullcalendar JQuery plugin with a JSON feed has been a bit of a challenge. The example provided with the plugin works perfectly, so it seems like there might be an issue with my own feed. Here is the output from the working example JS ...

Ensure the form is properly validated before initiating the submission process on 2checkout

Attempting to prevent the form from being submitted, I implemented the code below. Typically, this method works perfectly fine. However, when integrating 2checkout js (), it does not function as intended. <form onSubmit="validate(); return false;" meth ...

What causes the lack of sorting ability in AJAX responses?

I have integrated sorttable.js for table sorting, and my table is updated every 3 seconds with an ajax response. However, the response is not sorted in the manner I expect. Main Page <div id="resDiv"> <table id="myTable1" class="sortable"> ...

Issue with displaying errors in vee-validate when using Vue.js Axios (More details provided)

When working on my Vue project, I encountered an issue while using Vee-Validate and Axios. During an API call to register a user, if the email is already in use, an error is thrown. To handle this error and display the error message, I used the following ...

Tips for utilizing components in slots in Cypress and Vue for effective component testing

Can someone help me figure out how to import a component into a slot using Cypress Component Testing with Vue? The documentation mentions the following for slots: import DefaultSlot from './DefaultSlot.vue' describe('<DefaultSlot />& ...

Is there a way to fully load an entire HTML page on success using AJAX?

$.ajax({ type:'GET', url:"/" , data:{"user": user}, //user is a variable success:function(data) { I would like to display the entire HTML content received from my views here. } }); ...

The data source is having trouble connecting to the updated JSON format due to issues with pagination

I'm utilizing pagination.js to fetch asynchronous data using the code below. $('#demo').pagination({ dataSource: 'https://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?&ap ...

Twice within a controller, alert is displayed in AngulasJS, OnsenUI, and Phonegap

I'm currently developing a mobile application using AngularJS, OnsenUI, and PhoneGap to package it for Android devices. However, I've encountered a strange issue where an alert box pops up twice when the application is run as a new process. I&ap ...

typescript: best practices for typing key and value parameters in the forEach loop of Object.entries()

I have a specific object with key/value pairs that I need to iterate over using the entries() method of Object followed by a forEach() method of Array. However, I'm struggling to understand how to avoid a typescript error in this situation: type objTy ...