Is there a more efficient method to choose specific UV coordinates from a texture for presentation on a sprite using three.js?

I've got a texture sheet that contains various game HUD elements UV packed together in one texture.

Currently, I find myself having to create a clone() of the texture for each individual part of the GUI, then create a material using this texture in order to use different UV's for each component of the HUD elements.

Is there a more efficient way to handle this process? It feels quite sluggish and cumbersome.

In the past, on Android/iOS/Blackberry, I worked with a GLES VertexBuffer. I would add vertices and rebuild on the fly, as the HUD/GUI elements were subject to change or removal at any time.

Here's an image of what I'm trying to accomplish. The menu option boxes are comprised of 4 corners, 4 sides, and a center. This design allows me to adjust the display to different resolutions without sacrificing texture quality.

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

Answer №1

Instead of altering the textures directly, consider adjusting the UVs of the mesh in use.

Opting for PlaneGeometry over PlaneBufferGeometry in this scenario could simplify the process. Scale and translate the UVs for each element to align with the atlas. To enhance efficiency, you can combine all geometries into one or utilize instancing and GLSL.

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

Performing multiple SQL queries in a for loop using Node.js and Express

After submitting a Post form, I receive a req.body containing multiple values in the following format: console.log(req.body) { productid:[1, 2, 3] qty: [3, 5, 6] } I'm trying to implement a for loop to use these values in SQL queries. However, I e ...

javascript sql express asynchronous async-await

Mocha maintains the integrity of files during testing

After running a unit test to update a config file, I noticed that the file was altered. My initial thought was to use "before" to cache the file and then restore it with "after". mod = require('../modtotest'); describe('Device Configuratio ...

javascript node.js testing mocha.js

Fabric covered in ammunition created using softBodyHelpers' Patch function

I've been experimenting with the three.js physics cloth demo in an attempt to create a tablecloth. However, every time I run the simulation, the cloth ends up looking like a vertical banner instead. I used the ammo softBodyHelpers.CreatePatch function ...

three.js physics

Refreshing a DIV in Rails by reloading from model using a JavaScript function

Recently, I created a page displaying the number of Widgets a customer has. Below is the view written in Haml: #available = "Available widgets: #{@customer.widgets.unused.count()}" (The "unused" scope in the model displays available widgets). When a C ...

javascript ruby-on-rails ruby-on-rails-3 unobtrusive-javascript

When scrolling, custom cursor object disappears from view as it moves along with the mouse

My goal is to have a custom object follow the mouse by changing the translate property and assigning x and y values to it. Everything works fine initially, the object appears and moves within the first frame. However, when scrolling down, the transform pro ...

javascript html jquery css mouse

What is the process for converting this code to HTML format?

I am new to programming and I am using an API with node.js to display the result in a browser. The API is working fine with console.log, but I want to render it on the browser instead. I am using Jade template for this purpose. How can I write the code t ...

javascript node.js api express

What causes the error when I use "use client" at the top of a component in Next.js?

Whenever I include "use client" at the top of my component, I encounter the following error: event - compiled client and server successfully in 2.5s (265 modules) wait - compiling... event - compiled client and server successfully in 932 ms (265 modules) ...

javascript node.js reactjs next.js next.js13

Filtering out specific properties in an array using Angular

I am facing an issue with my Angular filter when inputting text for a specific list. initialViewModel.users = [ {user: 'Nithin',phone: 'Azus', price: 13000}, {user: 'Saritha',phone: 'MotoG1',price: 12000}, {user: ...

javascript angularjs angularjs-ng-repeat angular-filters

The installation of @grpc/grpc-js does not include all necessary dependencies

Recently, I incorporated @grpc/grpc-js into my project using the command npm i @grpc/grpc-js. Surprisingly, there are no compile time errors when I attempt to use it. However, at runtime, a series of errors arise: ./node_modules/.pnpm/@<a href="/cdn-cgi ...

javascript node.js npm grpc-js

The React Native application is working fine on the emulator but is encountering some issues when trying

While the app runs smoothly on an emulator through Android Studio, I encounter an error when trying to run it from the CLI. error Failed to install the app. Ensure that you have set up the Android development environment properly: <a href="https://fac ...

javascript reactjs react-native

Choosing an item in an AngularJS select directive from an external origin

I'm currently working on developing a form using Angular JS for editing venue details such as address and city. The backend system is powered by Django and offers a REST API (Django Rest Framework) which I am interfacing with through Restangular serv ...

javascript django angularjs rest drop-down-menu

Presenting JSON data in a table format on-the-fly even without prior knowledge of the data's structure or field names

When working with my application, I will be receiving data in JSON format and I am looking to showcase this data in a tabular form within a web browser. It's important to mention that I won't know beforehand the structure or field names of the re ...

javascript jquery html angularjs json

Is there a way to modify the edit button to become a save button and include a cancel button?

Is there a way to toggle between an edit button and a save button, along with a cancel option? $('#edit').click(function() { $(this).hide(); $('#save, #cancel').show(); }); $('#cancel').click(function() { $('#ed ...

javascript jquery html

What is the best way to include an ID parameter in a $ajax GET request?

Real-life Dilemma I've been grappling with an issue for the past 4 hours - I'm attempting to send an http get request with the user ID as a parameter. Despite trying numerous examples found online, I continue to encounter this pesky error on the ...

javascript jquery node.js ajax get

Alter numerous classifications based on varying circumstances at regular intervals

This code snippet is designed to change randomly all the <div class="percentx"> elements, for example from <div class="percent31"> to <div class="percent52"> (with values between 1-100). It works smoothly. I ...

javascript html

What is the secret behind the checkbox retaining its checked status upon page reload?

My dataTable is loading all data from the MySQL database and the first checkboxes are automatically incremented when a new row is added. However, users may check or uncheck these checkboxes. My goal is to retain the checkbox results even when the page is r ...

javascript php mysql

Use JavaScript to switch the h1 title when selecting an option from the dropdown menu

As a beginner in coding, I am struggling to find a solution using an if statement for this particular problem. Although I can achieve the desired result with HTML code and options, this time I need to use arrays and an if function. My goal is to create a ...

javascript html

Text element in SVG not displaying title tooltip

Looking for a solution to display a tooltip when hovering over an SVG Text element? Many sources suggest adding a Title element as the first child of the SVG element. This approach seems to work in Chrome, but not in Safari - the primary browser used by mo ...

javascript jquery html svg tooltip

Can you provide the regular expression that will successfully match this specific string of text?

Can you solve this fruit riddle? apple is 2kg apple banana mango is 2kg apple apple apple is 6kg banana banana banana is 6kg If the fruits are limited to "apple", "banana", and "mango", how can we write a regex that extracts the names of ...

javascript regex

Ways to verify login status on index.html

By using the code below in "index.php", I can determine the user's session status: <?php if(isset($_SESSION['id'])) { ?> <li><a href="controller.php?type=logout" class="btn btn-borders btn-primary">Log out</a>< ...

javascript php html

JavaScripter Q&A