Issue with normalizing UV coordinates to a range of 0 and 1 in threejs

I am facing an issue where my model has UV coordinates that are outside the range of 0 and 1. I have attempted to normalize these coordinates with a function, but the results are not as expected. This is the function I am using to convert the UV coordinates into the desired range:

private convertNumberToUV(numb:number) {
    let converted = 0;

    if(numb < 0 || numb > 1) {
      if(numb < 0){ numb = -numb; }
      converted = numb - Math.floor(numb);
    }
    else if(numb > 1){
      converted = numb - Math.floor(numb)
    }
    else {
      converted = numb;
    }


    return converted;
}

The current result looks like this:

https://i.sstatic.net/5HUOf.jpg

However, I am expecting the result to look like this:

https://i.sstatic.net/XaaVT.jpg

I am unsure where I am going wrong in my approach. My objective, as pointed out by @pailhead, is to normalize the UV coordinates of the first texture to fit onto an atlas. I am also trying to repeat the texture on the second atlas to prevent any "stretch" effect. Does my method seem feasible for achieving this goal?

https://i.sstatic.net/sMBgo.jpg

Answer №1

Picture a scenario where there is a wall with a window that has been planar mapped. The scaling is such that one corner is located at UV(0,0) and the other corner is at UV(3,1). Let's narrow down our focus to the U dimension and examine the position of the window. One side is at U(1.5) while the other side can be found at U(2).

|0|---|1.5|-|2|--|3| <- visual representation of a slice through the wall along the U axis

When we apply a brick texture onto this setup and specify

myTexture.wrapS = THREE.RepeatWrapping
, the brick pattern will be evenly distributed across the wall and repeat itself 3 times in the process.

Manipulating these UV coordinates as described would result in the following pattern:

|0|-[0.5]-|0||0|

As a consequence, this would lead to nonsensical yet foreseeable outcomes. The left portion of the texture would extend all the way to the window. Below and above the window, the same half of the texture would be displayed in reverse, while the remaining section of the wall would exhibit only horizontal lines with no brick texture since it has been stretched infinitely.

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

Retrieving data from a server using the GET method with parameters through axios in a React Native application

As someone new to Web requests, I have encountered a challenge that seems simple but has proven difficult for me. Despite searching the web, I am struggling to get a working response. When I input the URL 'http://www.test.com/callservice.php?action=s ...

Would it be frowned upon in JavaScript to use "if (somestring in {'oneoption':false, 'secondoption':false})"?

Is the use of this construct considered a bad practice in JavaScript and could it lead to unexpected behavior? if (e.target.name in {name: '', number: ''}) { // do something } This code checks if the 'name' attribute of an ...

Fulfill the specified amounts for each row within a collection of items

I have an array of objects containing quantities. Each object includes a key indicating the amount to fill (amountToFill) and another key representing the already filled amount (amountFilled). The goal is to specify a quantity (amount: number = 50;) and au ...

Converting a timestamp from PHP in JSON format to date and time using JavaScript

Within the JSON file, there is a timestamp associated with each user login. An example of this timestamp is: timestamp: "1541404800" What steps should be taken to convert this timestamp into date and time format? ...

Utilizing conditional types for type narrowing within a function's body: A comprehensive guide

I created a conditional type in my code that constrains the second argument of my class constructor based on the type of the first argument. Although the type checker correctly limits what I can pass to the constructor, I am struggling to get the compiler ...

Creating a fetcher that seamlessly functions on both the server and client within Nextjs 13 - the ultimate guide!

My Nextjs 13 frontend (app router) interacts with a Laravel-powered backend through an api. To handle authentication in the api, I am utilizing Laravel Sanctum as suggested by Laravel for SPAs. This involves setting two cookies (a session and a CSRF token) ...

Searching for the clicked tr element within a tbody using jQuery

Here is my customized HTML table layout <table> <thead> <tr> <td class="td20"><h3>Client Name</h3></td> <td class="td20"><h3>Details</h3></td> ...

How do I pass a localhost database URL to my server.js file using module.exports in Node.js with MongoDB?

I am encountering an issue connecting to a database using mongoose on my localhost. Within my server.js file, I have the following code: var express = require('express'); var app = express(); //Creating our ap ...

A Comprehensive Guide on Incorporating Nodejs Modules in a Subdirectory

Within my AWS Lambda layer, I have a directory structure that resembles the following: main > nodejs > node_modules Prior to uploading to AWS, I require a test.js file for functionality testing purposes. The question at hand is whether it's fe ...

Error Message: discord.js is unable to retrieve the specified property 'find' due to it being undefined, resulting in

While working on a command for my discord bot, I encountered an error. As I am new to programming, please forgive me if it's something simple that I couldn't figure out. TypeError: Cannot read property 'find' of undefined at Object. ...

Error encountered during the production build of Angular 2. No issues reported during development phase

During development, I can successfully run the code below. However, when I deploy to production, I encounter the following errors: node_modules/@angular/common/src/pipes/async_pipe.d.ts(39,38): error TS2304: Cannot find name 'Promise'. node_modu ...

Customizing your Mui theme with Typescript may lead to unexpected errors

Within my MUI theme, I am aiming to customize the link element as shown below: components: { MuiLink: { defaultProps: { component: LinkComponent, }, }, } However, I encountered the following TypeScript error: Type error: Ty ...

Make a 3D model of an airplane with smooth, round edges using PlaneGeometry in Three

I am attempting to design a 2D square with curved or rounded edges. I have been advised that using planes is the most effective approach. However, I am encountering difficulties in determining the exact method to achieve this. While it appears straightforw ...

Issue: Oops! The digital envelope routines are not supported in Angular while attempting to run the project

I encountered an error when running the command below: ng s The error message is as follows: Error: error:0308010C:digital envelope routines::unsupportedat new Hash (node:internal/crypto/hash:68:19)at Object.createHash (node:crypto:138:10)at BulkUpdateDe ...

What is the best tool for syntax highlighting with Vue.js?

Looking for guidance on syntax highlighting with Vue.js. I've included the code snippet below, but for some reason the message "This is a test" isn't appearing as expected. Can someone please point out what mistake I may be making? <html> ...

Toggling a div updates the content of a different div

I am looking to make the content within <div class="tcw-content"> dynamically change when a different div is clicked. I have little experience with Ajax, so I'm wondering if there are alternative ways to accomplish this using JS/CSS. If anyone h ...

What is the best way to determine the height of an element after new content has been added through AJAX?

I have been working with a Jquery Mobile page and I am facing an issue when loading a form via AJAX. The plugin I am using to set the page dimensions calculates them after the AJAX call has completed and the layout has been updated. However, the height of ...

The .val() function in jQuery can sometimes give different results when used on input elements with placeholder text in Firefox compared to Chrome

After analyzing the given HTML code, I've noticed discrepancies in the values returned by jQuery in Firefox and Chrome: HTML: <input type="text" name="name" id="name" placeholder="Type Here"> <input type="email" name="email" id="email" plac ...

Oops! The reference error was not caught: CallApi has not been declared

Recently, I encountered an issue while trying to utilize a submit button to call an API. Upon inspecting the page in Chrome, I found the following errors: Uncaught ReferenceError: CallApi is not defined Here is the code snippet that I am using: < ...

The functionality of findDOMNode is no longer supported

My website, built using React, features a calendar that allows users to select a date and time range with the help of the react-advanced-datetimerange-picker library. However, I encounter some warnings in my index.js file due to the use of <React.Stric ...