I must duplicate a pattern to accommodate various object dimensions

Let me clarify something.

I am faced with the challenge of handling multiple textures, and I already know which method to employ for this task.

The solution I identified was to use UV mapping on geometries to repeat textures.

However, the issue I'm encountering is that I am struggling to understand how to implement this, especially since the UV mapping documentation in THREE.js seems overly complex.

Imagine I have three distinct objects all sharing the same texture, each with different dimensions:

(1,1,1) - For this object, I require a 2x2 UV grid to repeat the texture, resulting in 4 repeats on each face. (1,2,1) - I need this object to have a 2x4 UV grid for the sides, excluding the top and bottom. (3,1,3) - This object should feature a 6x6 UV grid for the top and bottom surfaces, but not the sides.

How can I avoid loading three separate clones of the texture and instead utilize UV maps on each specific geometry to repeat the texture based on its unique size?

EDIT: I have configured the segments of boxbuffergeometry, but the texture is not repeating according to the UVs. This has become quite a frustrating issue. I'm looking to define the texture repetition, segments, and UVs within the geometry itself.

javascriptthree.js

Answer №1

To scale UVs, you can use the following code if you are working with BufferGeometry. When you scale UVs by 2X, it will tile the texture twice.

var uvs = mesh.geometry.attributes.uv;

for ( var i = 0; i < uvs.count; i++ ) {

  uvs.setXY( i, uvs.getX( i ) * 2, uvs.getY( i ) * 2 );

}

After scaling the UVs, you can merge geometries that have the same material, even if the textures have different tiling amounts.

For more information, you can refer to , version r96 of three.js.

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

core.js encountered an issue at line 6210: TypeError - The function this.service.addDepartment does not exist

Whenever I attempt to click the 'Add' button on a web application that I'm constructing, an error pops up. core.js:6210 ERROR TypeError: this.service.addDepartment is not a function at AddEditDepComponent.addDepartment (add-edit-dep.componen ...

javascriptbootstrap-modalangular10

Sort values depending on the value of another key

I have a list of different types: const types = ['BAKERY', 'FRUITS', 'RESTAURANT', ...]; The length of this array is not fixed. Additionally, I also have a corresponding category list for each type as shown below: const categ ...

javascriptnode.jsexpressjoihapi.js

Troubleshooting async error management in Express Framework

I am attempting to circumvent the try catch block in route handlers by handling errors differently: const catchAsync = (fn) => { // Why doesn't this function have access to req, res, next? // I'm passing async(req, res, next) as an ar ...

javascriptexpressasync-await

Picture fails to load on Ionic app on the device

Currently, I am utilizing Ionic 3 for my project. The location of the images file is \src\assets\img. This pertains to a basic page implementation. export class BasicPage { items = []; constructor(public nav: NavController ,private adm ...

javascripthtmlangularionic2ionic3

Can the `lang` attribute be used in a `style` tag to specify the CSS preprocessor language for VueJS? Are there any disadvantages to using this method?

Occasionally, I notice people incorporating code like this: <style lang="scss"> ... </style> <style lang="stylus"> ... </style> I checked the documentation for the style tag and found that lang is not a valid a ...

javascriptcssvue.jssassstylus

Vue fails to reflect changes in data when it is updated

I have a page where I can access data by calling domain.com/subpage?soundfile=something Using the fetch method, I extract the query parameter from the URL to retrieve the necessary information. The retrieval process is successful as indicated by the data ...

javascriptvue.jsnuxt.js

Angular Link function encounters scope undefined issue

I've been struggling with this issue for some time now. Imagine I have the directive and controller setup as shown below: angular.module('LiveAPP.artist',[]) .controller('artistCtrl', ['$scope', '$http', ' ...

javascriptangularjs

Angular2 only supports cross-origin requests for protocol schemes

I'm currently facing an issue while following the Angular Quickstart tutorial due to a CORS error. To resolve this, I made configurations in my Windows host file located under system32/drivers/etc/: 127.0.0.1 tour-of-heroes I also configured ...

javascriptangular

I am unable to store a session variable using the GET method

Good day, I am seeking assistance with my code and have been searching for four hours without finding the error. I am working on an exchange where variables are stored in a session. The issue I am facing is that the variable $discount gets cleared every ti ...

javascriptphpmysqlsession-variables

Changing the color variable of an object using an onClick function in JavaScript

I'm currently working on a simple game where users can draw using the keys W, A, S, and D. If you want to take a look at the progress I've made so far, here is a JSFiddle link. There's a collision function in the code that I no longer need, ...

javascripthtmlvariablescolors

Issue: Unable to locate 'path' in directory 'C:workdemo ode_modulesmime-types'

Encountering an error after updating from "react-scripts": "4.0.3" to "react-scripts": "5.0.1",. I need assistance with understanding why this error is occurring and how to resolve it... ERROR in ./node_modules/mime ...

javascriptreactjsnpm

Storing multiple email addresses in an array using an HTML input element

I have a small React Bootstrap form where I am trying to save multiple email addresses entered by the user into an array. However, when I use onChange={()=> setEmails(e.target.value as any} it stores them in string format like this --> [email p ...

javascripthtmlreactjstypescript

Exploring Typescript for Efficient Data Fetching

My main objective is to develop an application that can retrieve relevant data from a mySQL database, parse it properly, and display it on the page. To achieve this, I am leveraging Typescript and React. Here is a breakdown of the issue with the code: I h ...

javascriptsqlreactjstypescript

Ways to send information to browser javascript from Spring MVC controller

Looking for the most efficient method to transfer data from Spring MVC to JavaScript. Let's say there is an array in JavaScript: var myArray = new Array(); And in the Java backend, there is another array: int[] myArray = new int[100]; What would ...

javascriptajaxweb-servicesspring-mvcbrowser

How can we avoid re-rendering the same component repeatedly when using React Router v6?

As a beginner in react, I'm facing an issue with preventing components from re-rendering when navigating to a different page. Specifically, I want to display only text on my Signup and Login pages, but the Navbar keeps re-rendering every time I switch ...

javascriptcssreactjsreact-native

Implementing the onClick function for the correct functionality in a ReactJS map component

I have designed a mockup and now I am trying to bring it to life by creating a real component. View my component mockup here Starting with something simple, I created 3 buttons and an array. However, when I click on any button, all features are displayed ...

javascriptarraysreactjs

Using the preselection feature in the MUI DataGrid can cause the grid to become disabled

I am customizing a mui datagrid to have preselected rows using the following code snippet: const movieCrewList = movieCrew.map((item) => item.id); const [selecteTabledData, setSelectedTableData] = React.useState([]); <DataGrid rows={crewData} c ...

javascriptreactjsmaterial-ui

Tips for creating an expression within ng-if

I am struggling with placing an expression inside ng-if that needs to be assessed in order for my content to be shown based on its outcome. This is what I currently have: <a ng-if="abc.status===failure" href="http://localhost:3000/abc/abc">image< ...

javascriptangularjs

What exactly is the purpose of FormControl and why is it employed? In what ways should FormControl be properly utilized?

I'm a bit confused about how to properly use FormControl in Material-UI when creating forms in React. Can someone simplify for me what exactly FormControl does and why I should consider using it in my project? Currently, I have a Form.js Component wh ...

javascriptreactjsformsmaterial-uisingle-page-application

The Bootstrap modal simply fades away without ever making an appearance

My bootstrap modal is not displaying on desktop, only showing a faded screen. It works fine on mobile and tablet devices. Any ideas why this might be happening? Here is the code: <button type="button" class="btn btn-primary" data-to ...

javascripthtmljquerycsstwitter-bootstrap