The texture applied using THREE.TextureLoader() does not align properly with the THREE.ExtrudeGeometry shape

I am currently working on creating a domino with rounded vertices using a rounded rectangle shape in THREE.js and then extruding it with the ExtrudeGeometry method. I have also applied a texture of a rectangular brick wall to the front face of this geometry. However, instead of the wall fitting perfectly onto the face of my rounded rectangle, I encountered an unexpected result as shown in the image below: Texture mapping issue

I'm wondering if this is a bug in THREE.js or if I overlooked something in my code. Any help would be greatly appreciated! Below is the snippet of code that I used:

//add tile
var tile_size = 2;
var roundedRectShape = new THREE.Shape();
  ( function roundedRect( ctx, x, y, width, height, radius ) {
    ctx.moveTo( x, y + radius );
    ctx.lineTo( x, y + height - radius );
    ctx.quadraticCurveTo( x, y + height, x + radius, y + height );
    ctx.lineTo( x + width - radius, y + height );
    ctx.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
    ctx.lineTo( x + width, y + radius );
    ctx.quadraticCurveTo( x + width, y, x + width - radius, y );
    ctx.lineTo( x + radius, y );
    ctx.quadraticCurveTo( x, y, x, y + radius );
  } )( roundedRectShape, 0, 0, 1.5*tile_size, 1.7*tile_size, 0.1 );
var extrudeSettings = {
  steps: 3,
  depth: 0.1*tile_size,
  bevelEnabled: true,
  bevelThickness: 0.05,
  bevelSize: 0.05,
  bevelSegments: 3
};
var geometry = new THREE.ExtrudeGeometry( roundedRectShape, extrudeSettings );
  var texture = new THREE.TextureLoader().load( "content/wall.jpg" );

  var materialFace = new THREE.MeshLambertMaterial({
      map: texture
  });
  var materialSide = new THREE.MeshLambertMaterial({
      color: '#EEEBDC'
  });
  var materials = [materialFace, materialSide];

tile = new THREE.Mesh(geometry, materials);
tile.rotation.x = - Math.PI/2;
tile.position.z = -1;
tile.position.x = -0.5*tile_size/2;
tile.position.y = -0.2*tile_size;

all.add( tile );

Answer №1

When working with UV mapping, it is important to maintain values within the range of 0 to 1. The ExtrudeGeometry function assigns UV coordinates based on vertex positions. For example, a vertex at position [4, 3, -2] would have a corresponding UV value of [4, 3]. Values beyond 1 may cause stretching or repetition in textures.

You have two options:

  1. Adjust your tileSize to be within the range of
    [0, 1]</code for proper UV mapping, and then scale the tile Mesh using <code>tile.scale.set(2.0, 2.0, 2.0)

or

  1. Allow your texture to repeat infinitely by setting
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping
    . Additional wrapping modes can be found in the texture constants page

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

Verifying StartDate and EndDate using AngularJS and Bootstrap Datepicker

My HTML Coding <form name="myForm"> <div class="row"> <div class="col-md-2"> <input data-ng-model="Data.StartDate" type="text" id="startDate" name="startDate" class="form-control" data-da ...

What methods can I use to test a Django view that includes a form?

As I embark on developing an application using Django, I find myself faced with a particular challenge. I have created a view that receives a form from the HTML code and then searches the database for any instances of a model based on the values specified ...

Issue with pop up window causing button click event to malfunction

I am facing an issue where the button click event works fine outside of a pop-up window but does not fire when inside the pop-up window. In my HTML code, the part that calls the button event outside of the pop-up window works perfectly, but inside the pop- ...

How to Trigger a Javascript Function from an OnItemClick Event in ASP.NET ListView

In order to achieve the functionality of refreshing ListView No.2 without refreshing the entire page when a user clicks on an item in ListView No.1, I am attempting to use JavaScript. Here is what I have tried so far: ListView No.1: <asp:ListView ID=" ...

Guide to extracting JSON information in JavaScript that includes a URL as the key

I am having trouble parsing the json file from this URL. My goal is to retrieve the populationTotal, areaTotal, and populationDensity fields from the json data obtained through the URL mentioned above. Below is an excerpt of the json data retrieved from ...

A guide on assigning a state variable to a dynamically generated component within a React application

I need to display user data from an array and have a button for each watchlist that deletes it. Although the backend is set up with a function deleteWatchlist, I am facing an issue in setting the state of the watchlistName for each watchlist after mapping ...

How to generate a circular section using the CanvasRenderer

Exploring the creation of multiple circle/ring segments with Three.JS and the CanvasRenderer. Check out an example using THREE.Shape and THREE.ShapeGeometry at this link: http://jsfiddle.net/25U8E/1/ The triangulation pattern doesn't seem right, and ...

What is the process of branching a stream with highland.js?

I have a stream called sourceStream that contains objects of type BaseData. My goal is to split this stream into n different streams, each filtering and transforming the BaseData objects according to their specific criteria. Ultimately, I want to end up ...

Transmitting information following successful password verification

Currently, I am working on a form to insert users into a database. Along with this, I have two scripts in place - one for password validation and the other for AJAX retrieval of PHP results. As of now, these two scripts are functioning independently. How ...

"The rotation speed of the CameraHelper in three.js surpasses that of the Perspective

I have a THREE.PerspectiveCamera equipped with a THREE.CameraHelper. cameraLocal = new THREE.PerspectiveCamera(70, 1, 20, 120); scene.add(cameraLocal); cameraLocalHelper = new THREE.CameraHelper(cameraLocal); cameraLocal.add(cameraLocalHelper); However, ...

Find similarities and differences between two CSV files

Dealing with 2 large files, both exceeding 1 million rows: The first file contains only an md5 hash The second file contains pairs of md5 and email addresses My task is to compare these two files and if the md5 hashes match, write the corresponding emai ...

Angular: Filtering Array Data with a Custom Format

Is it possible to extract only data with a specific format from an Array? For example, I am interested in data enclosed within brackets [], such as Name[Name], Type[Type], and Status[Status]. { "column": [ "Exam ID(id|Optional)", "Na ...

A guide on utilizing the React Suite range slider in rsuite

Hello there, I recently started working with the UI framework rsuite (React suite) and everything was going smoothly until I tried to use the Range slider component's API. Unfortunately, I am facing some issues with the labels and tooltips not display ...

Attempting to iterate through and retrieve the names listed in the table

I have a code that I need help with in extracting names from td elements using jQuery. In certain instances, if the td is empty, I want to merge the left-side td with the 5 right-side tds because the first td on the right side is empty and the second td c ...

What are the steps to integrate openjphjs with next.js?

I am working on a project with Next.js and need to utilize openjphjs for decoding HTJ2K pixel data. In order to incorporate openjphjs, I have included both openjphjs.js and openjphjs.wasm in a specific folder within the project structure. To address an e ...

The module refuses to import, continuously claiming that it cannot be found

Games.js file in the Utils folder const unirest = require('unirest') const fetchGame = (g) => { unirest.get('https://rawg-video-games-database.p.rapidapi.com/games/' + g) .header("X-RapidAPI-Key", '3482457f4amsh7fbc73f ...

Creating an external JavaScript and CSS file for date picker in Eclipse can be done by following a few simple steps. By creating separate files for the

I am using the following javascript and css styles: <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" /> <script src="http://ajax.googleapis.com/ajax/libs/jq ...

Removing a function when changing screen size, specifically for responsive menus

$(document).ready(function () { // retrieve the width of the screen var screenWidth = 0; $(window).resize(function () { screenWidth = $(document).width(); // if the document's width is less than 768 pixels ...

Is there a way to transform this Json array into a format that JQuery can interpret easily?

Having a bit of trouble with this issue. I'm not entirely sure how to get it working correctly. According to Firebug, the Json object (or possibly array) from my ajax request appears as follows: { "jsonResult": "[ {\"OrderInList\":1}, ...

Identifying changes in data streams

I am attempting to update the value of a div when the data attribute of another div changes. This is my code: $('.language-rate').attr("data-rate-value").on('change', function () { $('.language-d').text($('.language- ...