Creating custom UV coordinates for tiling textures on ExtrudeGeometry using Three.js

I'm attempting to generate a textured surface along a path in three.js, aiming for a tiling/repeating effect similar to what can be achieved in Blender. Creating individual faces manually and applying textures works well for simple paths like straight lines but becomes complex for more intricate designs.

One technique offered by three.js is ExtrudeGeometry. Applying a texture to a mesh created through this method reveals the default UV mapping:

It appears that a custom UVGenerator function needs to be implemented and passed to ExtrudeGeometry. However, there seems to be a lack of documentation on this topic. Existing resources found through searches either refer to outdated information or remain unanswered.

A JsFiddle example demonstrates the default behavior. The included uvGenerator() function mimics THREE.WorldUVGenerator for ease of experimentation.

I've experimented with converting vertex coordinates into a normalized 0-1 range according to the geometry's bounding box size. Unfortunately, this approach did not yield the desired outcome. Additional calculations within the generateSideWallUV function were attempted without success.

The inability to extract pertinent information regarding the extruded path length from the available documented sources has raised further questions about the feasibility of a custom UV generator solution.

Any assistance or guidance would be greatly appreciated.

Update: Dividing vertex coordinates by the bounding box size does not resolve the issue as the bounding box parameters remain indefinite when generateSideWallUV() is called during ExtrudeGeometry operation.

This scenario leads to unexpected results and highlights the challenges in implementing a customized UV generator for this specific task.

If there are alternative approaches or overlooked aspects (such as reconsidering the use of ExtrudeGeometry), I am open to suggestions and enlightenment.

Answer №1

Sharing my own insights: Check out this jsFiddle link for the solution.

Let's dive into the interesting tweaks made. Instead of using THREE.RepeatWrapping, ClampToEdgeWrapping is now utilized without the repeat setting:

t.wrapS = THREE.ClampToEdgeWrapping;
t.wrapT = THREE.ClampToEdgeWrapping;
//t.repeat.set(1 / 20, 1/20);

When configuring the object passed to ExtrudeGeometry, steps are set to precisely match the desired number of faces. This decision may seem like a workaround, as determining geometry details just to ensure correct UVs could be a questionable practice in scenarios where additional vertices would be preferred to avoid distortions. Here's how the updated extrudeCfg looks like (in the example's extrudeSurface() function):

extrudgeCfg = {
     steps:        20,
     bevelEnabled: false,
     extrudePath:  curve,
     UVGenerator:  uvGenerator,
};

Furthermore, the UVGenerator has been redefined to adapt to the changes in texturing and face count. This simplified approach is capable of handling the texture clamping and reduced face count effectively:

generateSideWallUV: function(geometry, vertices, idxA, idxB, idxC, idxD) {
     return([
          new THREE.Vector2(0, 0),
          new THREE.Vector2(1, 0),
          new THREE.Vector2(1, 1),
          new THREE.Vector2(0, 1),
     ]);
}

In essence, the texture is now stretched across each face with ease, making adjustments considering the rectangular shape formed by two triangles on the sides of the extruded geometry instead of a single quad.

Behold the result:

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

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

Error: Unable to call topFrame.window.changeSelectedBarStyle because it is not a valid function. What could be causing this

This function is called changeSelectedBarStyle: function changeSelectedBarStyle(tdId){ $("#menuTable td").each(function(index){ if(this.id == tdId){ $(this).removeClass("menuPanel"); $(this).addClass("menuPanelSelected" ...

How can you style a two-item list in Material-UI React to display the items side by side?

I have a list that contains two items: 'label' and 'value'. This is the current layout: https://i.stack.imgur.com/HufX7.png How can I rearrange the items on the right to be positioned next to the label on the left? https://i.stack.im ...

Troubles arise when attempting to utilize yarn for my projects

Whenever I enter the command yarn start in the terminal, I get this output: yarn run v1.22.4 $ react-scripts start 'react-scripts' is not recognized as an internal or external command, operable program or batch file. error Command fai ...

How can I create a Material ui Card with a border-less design?

After reviewing the information provided, I noticed that you can set the option to have it as variant="outlined" or raised However, I am curious if there is a method to create the card without any visible borders at all? ...

Submitting forms from a different router in React can pose a unique challenge

As a beginner in React, I am working on creating a simple meal app. In my App component, I am fetching meal data from an api and allowing users to click on a meal for more details. However, I am facing an issue where searching for a new meal on the detail ...

No files found in dist/ directory when using Vue.js

Beginner's Note I must confess that I am a novice when it comes to web development. Please bear with me if this question seems silly; I appreciate your assistance in advance. Initial Setup My current node version is 16.15.1 and npm version is 9.5.0 ...

Open a submenu when clicking on an input field and automatically close it when the focus is lost

Is there an easier way to create a submenu that opens on input click and closes when losing focus using jQuery? Right now, I have achieved this functionality with the following code: $(document).mouseup(function (e){ var container = $(".container"); ...

The execution of the Javascript function is not being carried out

Why is alert("Test1") being executed, but alert("Test2") is not running? P.S. I'm currently not utilizing JSON data. <script> $(document).ready(function() { var param = 10; $.getJSON( 'modules/mod_sche ...

Utilize the inherited background color for a linear-gradient effect

Here is the code snippet I am working with: <label className={classes.trigger} htmlFor={uniqueId} ref={labelRef} style={{ background: val, borderColor: val }} /> This is the corresponding CSS: .trigger { display: block; posit ...

Looking to implement a search filter in a table using reactJS. Wanting to optimize the search bar to dynamically filter the data displayed in the table

I'm having trouble with my search bar that is not currently filtering the information in my table. I have set up a table and a search bar, but the search bar isn't working as expected. When I type something in the search box, nothing happens. I s ...

What is the best way to retrieve a specific property or attribute of a specific div element after obtaining it from e.target.parentNode?

e.target.parentNode will return this element. <div class="quantity"> <span class="glyphicon glyphicon-minus-sign"></span> <span class="product_Count"> 4 </span> <spa ...

Attempting to transfer user information to MongoDB using AngularJS and Node.js

Greetings everyone! I am currently working on a template and trying to develop a backend for it, starting with the registration form. Despite having some kind of connection between my mongodb and my app, data is not being sent to the database. Here is the ...

Adjust background color on click using JavaScript

Could someone provide me with the JavaScript code to change the background color of a page from blue to green when a button is clicked? I have seen this feature on many websites but haven't been able to write the code myself. I am specifically lo ...

Complete my search input by utilizing ajax

It's only been 30 minutes since my last post, but I feel like I'm making progress with my search posts input: I've developed a model that resembles this: function matchPosts($keyword) { $this->db->get('posts'); ...

Firefox does not support jQuery AJAX functionality, unlike Internet Explorer where it works smoothly

Can anyone help me figure out how to ensure that this code works smoothly on both IE and Firefox? The confirm prompts are functioning in Firefox, but the AJAX request isn't triggering. According to Firebug, there's an error at line 9631 of jquery ...

Tips for inheriting and overriding controller methods in AngularJS with Java as the base language:

I have a simple controller and I want to create a new controller that is very similar to it, but without copying too much code. angular.module('test').controller('parentController', parentController); parentController.$inject = [' ...

What is the proper way to utilize variables in package.json with npm version 7.x.x?

I am looking to utilize npm scripts to access keys found in the directories section. "directories": { "client": "client", "server": "server" }, "scripts": { "test:client&qu ...

Creating a hierarchical list structure from a one-dimensional list using parent and child relationships in JavaScript

I am in the process of developing a web application that requires handling nested geographical data for display in a treeview and search functionality. The initial raw data structure resembles this: id:1, name:UK id:2: name: South-East, parentId: 1 id:3: ...

Rendering with node.js express inside nested JS files

Imagine I have a basic view <html> <head> <title>something</title> </head> <body> <%= param %> </body> <script type="text/javascript" src="myscript.js"></script> </html> Be ...

Node.js is experiencing difficulties loading the localhost webpage without displaying any error messages

I am having trouble getting my localhost node.js server to load in any browser. There are no errors, just a buffering symbol on the screen. The code works fine in VS Code. Here is what I have: server.js code: const http = require("http"); const ...