Guide on incorporating texture atlas in Three.js (r65)

With the recent release of the new threejs revision (r65), the uvOffset and uvScale have been relocated to texture.offset and texture.repeate.

However, I am facing an issue with the texture.offset not working as intended. My goal is to showcase multiple sprites in a scene, all using the same texture. This texture serves as a texture atlas with different tiles. Changing the texture offset impacts all sprites within the scene, which is not what I desire. Is there a way to adjust the offset individually for each sprite?

I believe uvOffset handled this task effectively, so I am puzzled as to why it was moved.

Below is some code illustrating my objective:

var gui_texture = THREE.ImageUtils.loadTexture('images/button.png');

var btn_material1 = new THREE.SpriteMaterial( { map:gui_texture } );
btn_material1.map.offset.set(0.5,0);
var button1 = new THREE.Sprite(btn_material1);
button1.position.set(-screen_half_x+50, screen_half_y-25, 1);
button1.scale.set(100, 50, 1);
gui_node.add(button1);

var btn_material2 = new THREE.SpriteMaterial( { map:gui_texture } );
btn_material2.map.offset.set(-0.5,0);
var button2 = new THREE.Sprite(btn_material2);
button2.position.set(-screen_half_x+50, screen_half_y-150, 1);
button2.scale.set(100, 50, 1.0);
gui_node.add(button2);

Best regards,

Markus

Answer №1

Although it may not be the most visually appealing, give this a shot:

let textureOne = new THREE.Texture();
textureOne.offset.set( 0.5, 0 );

let textureTwo = new THREE.Texture();
textureTwo.offset.set( - 0.5, 0 );

const loader = new THREE.ImageLoader();
loader.load( 'images/button.png', function ( image ) {

    textureOne.image = image;
    textureOne.needsUpdate = true;

    textureTwo.image = image;
    textureTwo.needsUpdate = true;

} );

let buttonFirst = new THREE.Sprite( new THREE.SpriteMaterial( { map:textureOne } ) );
buttonFirst.position.set( - screen_half_x + 50, screen_half_y - 25, 1 );
buttonFirst.scale.set( 100, 50, 1 );
gui_node.add( buttonFirst );

let buttonSecond = new THREE.Sprite( new THREE.SpriteMaterial( { map:textureTwo } ) );
buttonSecond.position.set( - screen_half_x + 50, screen_half_y - 150, 1 );
buttonSecond.scale.set( 100, 50, 1.0 );
gui_node.add( buttonSecond );

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

Whenever I try to include a new array in my multidimensional array, it seems like an additional "A" keeps popping up at the start. Can anyone explain why this is happening?

I am experiencing a strange issue. In my SQL database, I have a multidimensional array to which I add new arrays weekly using a cron job. While this process usually runs smoothly, sometimes a random A gets inserted into the array when a new one is added. T ...

What is the best method to override the CSS transition effect with JavaScript?

I am trying to implement a CSS transition where I need to reset the width of my box in advance every time my function is called. Simply setting the width of the box to zero makes the element shrink with animation, but I want to reset it without any animati ...

Maintain the aspect ratio of the image while specifying the height in Next.js

Is there a way to set the height of an image in Next.js to 500px while maintaining its aspect ratio? I've been searching for a solution but haven't found one yet. <div className='relative text-center'> <Image ...

What happens to an array element when it becomes null within the realm of JavaScript?

As I work on a complex AJAX control class, I've encountered an interesting question. For instance, imagine I store all page elements in an array upon initialization. When a user triggers an AJAX-enabled link, specific parts of the content are replac ...

Component Editing: Enhancing the Dynamic Promise

My component requires a Promise as an input: export class Component { @Input() appendingFunction: Promise<PagedData<any>> } The function assigned to "appendingFunction" might be structured like this: async foo(importantParameter, parame ...

The issue of overflow scrolling not functioning properly on fixed-positioned elements in iOS is

On mobile devices / sizes, I have a navigation bar with position: fixed at the bottom of a page. The nav bar includes an overflow container for scrolling right to see more links (although I personally believe this design choice leads to poor user experienc ...

What is the best way to show a mesh in Three.Js directly in front of the camera?

Looking to display a mesh resembling a gunshot in front of my perspective camera with first person controls. Here's the code I've added to the render function on my page: var pos = camera.position; var rot = camera.rotation; ...

Addressing the issue of audio files not being cached by IOS web browsers

I am currently developing a language learning website where users can listen to audio by clicking on objects. Many of the site's users are in remote areas with slow Internet connections, so I need to cache the audio files before each activity loads to ...

angularjs reset file input form

Whenever I click publish, I want to clear my form: $scope.product = {}; $scope.upload = function(user) { var formData = new FormData; $scope.product.owner = user; for (key in $scope.product) { ...

Retrieve error message from 400 error in AngularJS and WebAPI

Why am I having trouble reading the error message in AngularJS from this code snippet? ModelState.AddModelError("field", "error"); return BadRequest(ModelState); Alternatively, return BadRequest("error message"); return Content(System.Net.HttpStatusCod ...

Stopping SQL Injection in JavaScript and Node.js

I have been developing a Discord bot using Node.js. Here's a snippet of the code: var info = { userid: message.author.id } connection.query("SELECT * FROM table WHERE userid = '" + message.author.id + "'", info, function(error) { if (e ...

Please disable zoom functionality on the website specifically for Android devices

Is there a way to disable the zoom feature on our website specifically for Android phones/devices without affecting iPhones? Perhaps targeting the Chrome browser on Android would be sufficient, but we should also verify the mobile screen size. ...

Issue with toggleClass() function when using Angular 4

My code includes the addition of jQuery in the script using import * as $ from 'jquery'; and also adding jQuery in the HTML file. However, the toggleClass() function is not functioning correctly. Upon checking the console, there were no error ...

What is the best way to save longitude and latitude coordinates in a database using the <input> method?

Learn how to use HTML code <html> <body> <p>Press the button below to receive your coordinates.</p> <button onclick="getLocation()">Get Coordinates</button> <p id="demo"></p> <script> var x = doc ...

Angular and Express: Automatically redirecting to the previous page after user login

A question similar in nature can be found here, although not directly relevant to my situation. Within my Single Page Application, I am implementing PassportJS for user authentication. There are multiple routes that necessitate user login. The routing is ...

What is the best way to assess a scope object within an ng-Class directive?

Whenever I click a button, it moves to the next item in an array. Once it reaches the last item in the array, I want to assign the "endButton" class to the button tag. I plan to use the ng-class directive within the HTML code to evaluate the expression. T ...

The dynamic form will not display the currency format

Could anyone assist me with this code, please? var sum = parseInt($("#jumlah-form3").val()); var nextform = sum + 1; $("#insert-form3").append( " <tr id='layanan"+nextform+&qu ...

How can I retrieve the SID received in a different tab using MSAL.js?

I have successfully integrated MSAL into a client-side library, and things are going smoothly so far. My next goal is to enable Single Sign-On (SSO) by following the instructions provided in the documentation at https://learn.microsoft.com/en-us/azure/act ...

Error: An unexpected identifier was encountered while executing my function

I've been trying to implement a function that I found online, but when I try to run it in the terminal, I keep getting this error: /home/simone/gekko/strategies/high.js:10 sma: function(name, price, points) ^^^ SyntaxError: Unexpected identifier I ...

How can Three.JS camera controls be used to navigate through a scene projected onto a plane's texture?

In this scenario, my ultimate goal is to achieve a rotation of the box within the plane using camera controls. However, every attempt I make to incorporate camera controls results in unintentional rotation of the plane instead. My end objective is to imp ...