What role does the conditional statement play in the function ExtrudeGeometry.UVGenerator.generateSideWallUV within three.js?

Within three.js's ExtrudeGeometry.UVGenerator.generateSideWallUV function, there is a specific condition being checked:

if ( Math.abs( a.y - b.y ) < 0.01 ) {

        return [
            new Vector2( a.x, 1 - a.z ),
            new Vector2( b.x, 1 - b.z ),
            new Vector2( c.x, 1 - c.z ),
            new Vector2( d.x, 1 - d.z )
        ];

    } else {

        return [
            new Vector2( a.y, 1 - a.z ),
            new Vector2( b.y, 1 - b.z ),
            new Vector2( c.y, 1 - c.z ),
            new Vector2( d.y, 1 - d.z )
        ];

    }

This conditional seems to cause strange discontinuities in the UVs, as illustrated by the uv coordinates displayed on this shape:

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

By removing this block and using only the else section, the functionality works correctly. I am curious to know the rationale behind including this conditional in the first place.

Answer №1

By default, the UV coordinates for ExtrudeGeometry are calculated based on the vertex positions.

It's important to note that the sidewall of ExtrudeGeometry is made up of interconnected rectangles.

When the sidewall is primarily vertical in XYZ space, the UVs are based on the YZ coordinates; otherwise, they are derived from the XZ coordinates.

This UV generation method can sometimes lead to stretching issues, although it generally works well.

If you have a more effective algorithm, feel free to implement your own UV generator.

Version: three.js r.82

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

Unable to execute the new firebase on node server

I'm currently watching this google talk. However, I am facing an issue trying to create a firebase object. Following my package.json file, I initiated with: npm install firebase --save Then proceeded with the following steps: let Firebase = requir ...

Error: An unexpected 'if' token was not caught

Encountering an error related to the question title while working with this code snippet: $LAB.queue(function setup() { FB.init({ appId: '00000000', status: true, cookie: true, xfbml: true, logging: &ap ...

Setting a false condition on jQuery's .on('canplaythrough') event

Struggling to implement a custom audio control with jQuery, but encountering some issues. I'm in the process of converting native JavaScript to jQuery for consistency in my code, however, I can't seem to get it working. The original code that is ...

Guide on incorporating dxTreeView with AngularJS

Hello there, I am trying to utilize the dx-tree-view component. In my Home.html file, I have included the following HTML code: <div dx-tree-view="treeViewOptions"></div> And in my HomeController.js: $scope.treeViewOptions = { binding ...

"Utilizing JQuery's addClass, removeClass, and appendTo functions to

Having a bit of an issue trying to implement a functionality where options inside a div can be clicked and moved to another div, and if they are clicked again in the other div, they will return back. Here is the code snippet: $(".selectable").bind(&ap ...

Trigger the fire controller code upon the change of the textbox date in ASP.NET MVC

I am looking for a way to trigger controller code when a user clicks out of a date textbox without using HTML helpers, only plain HTML. I am new to MVC and have previously worked with web forms. The controller code that needs to be executed is as follows: ...

Is there a way to establish a connection between two excel entries using Angular?

In order to connect xlsx file records with their corresponding ids using angular, I am seeking a solution. To elaborate further: Let me provide an example for better understanding: Scenario 1 https://i.stack.imgur.com/25Uns.png Scenario 2 https://i ...

Is it possible to invoke the created() function in Vue from another method?

Currently, I am developing an application in Vue. Upon loading the page, a cookie containing the user's zip code is retrieved and used to perform a search. However, users should also have the ability to change their zip code if it is incorrect. I woul ...

Utilizing Angular's Local Storage Module to efficiently store and manage various elements within an array in Local Storage

I'm facing an issue with storing and retrieving an array from localStorage using the Angular Local Storage Module. Despite following the necessary steps, I am only able to retrieve the last element added to the array. Can anyone provide insights on wh ...

Image flipping effect malfunctioning in Safari and Internet Explorer

My image flipping effect is not functioning properly in Safari and IE browsers. Here is the code I am using: .flipcard { position: relative; width: 220px; height: 220px; perspective: 500px; margin: auto; text-align: center; } .flipcard.v:hove ...

Enhance Your jQuery Skills by Adding Custom Directories to Anchor Links

Can jQuery be used to add a custom folder name in front of all links on a webpage? For example, if the website has these links: <a href="/user/login">Login</a> <a href="/user/register">Register</a> <a href="/user/forum">Foru ...

Is it possible to simultaneously toggle buttons and submit a form?

I am currently working on a functionality that involves toggling the display of two buttons and submitting a form. Code toggleButtons() { var btn1 = document.getElementById("start"); var btn2 = document.getElementById("pause"); if (btn1.style. ...

Employ the $scope.go() method within a function written in JavaScript

I am working with some HTML code that looks like this <body ng-app="app" ng-controller="IndexCtrl" id="indexBody"> <h1>test</h1> </body> Next, in a JavaScript function, I retrieve the scope like so function myFx() { ...

What is preventing me from loading js and css files on my web pages?

I have developed a web application using SpringMVC with Thymeleaf and I am encountering an issue while trying to load javascript and CSS on my HTML5 pages. Here is a snippet from my login.html: <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

The international telephone input library's "grunt img" command is malfunctioning

I am currently utilizing intl-tel-input to develop a control for displaying mobile numbers. Since the flags are quite small, I am in need of enlarging them. A reference for this can be found here: https://codepen.io/jackocnr/full/ONXWgQ To achieve this, ...

Integrating Asp.Net Core for server-side functionality with React for client-side interactions

I have started a simple Asp.Net default project in Visual Studio 2015 using the template: ASP.NET Core Web Application (.NET Core) / Web Application, No Authentication. Following that, I created a package.json file to load all the necessary packages for R ...

Convert the button into text once the condition is met

I am currently utilizing the AppBar component from the material-ui library and have added a button. I would like to change this button to display just text within the AppBar, but I haven't been successful. Is there a way to transform the button in th ...

Developing uniform resource locators with jQuery

As I work on developing my webapp, I have made use of the tag in my JSPs to ensure that all links within the application - whether they lead to pages or resources like images and CSS - always stem from the root directory rather than being relative to the ...

Sending an array of complex data to a controller method in ASP.net MVC

Currently, I am in the process of migrating an ASP.net Web Forms application to MVC. This application makes use of AJAX through an Ajax-enabled WCF Web service and asp:ScriptManager. I have been sending an array of objects to the service, and it has been ...

Error in Function Due to Undefined jQuery DataTable Parameters

In the jQuery datatable column, the below JavaScript code will display either a green checkmark button or a red X button: { data: "HasPayment", render: function (data, type, row, meta) { if (data) { return '<bu ...