What is the most effective method for flipping a THREE.Sprite in r84?

After updating my game engine from r69 to r84, I encountered a few issues. One of them is related to flipping sprites.

In the past, I could easily flip sprites using the following code:

sprite.scale.x = -1;

Unfortunately, this method no longer works in r84. I'm not sure why this change occurred. Does anyone have suggestions on how to achieve sprite flipping in the latest version? I am considering storing two versions of the texture and toggling between them, but I feel this approach is inefficient and cluttered compared to the previous solution.

r84

javascriptthree.jsspritescale

Answer №1

If you're working with a sprite sheet and need to flip the image of a specific sprite, you can achieve that using THREE.MirroredRepeatWrapping and following this pattern:

// determine the desired sprite's row and column index
var iCol = 5;
var iRow = 3;
var flipSprite = true;

// load the texture
var loader = new THREE.TextureLoader();
var texture = loader.load( "mySpriteMap.jpg" );

// configure wrapping to enable sprite flipping
texture.wrapS = THREE.MirroredRepeatWrapping;

// set the number of rows and columns in the sprite sheet
var nRows = 8;
var nCols = 8;
texture.repeat.set( 1 / nCols, 1 / nRows );

// set the offset for the flipped or unflipped sprite
texture.offset.x = flipSprite ? - ( iCol + 1 ) / nCols : ( iCol / nCols );
texture.offset.y = iRow / nRows;

// create the material
var material = new THREE.SpriteMaterial( { map: texture } );

// create the sprite
sprite = new THREE.Sprite( material );

This code snippet is compatible with three.js version r.84.

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

Module lazily loaded fails to load in Internet Explorer 11

Encountering an issue in my Angular 7 application where two modules, txxxxx module and configuration module, are lazy loaded from the App Routing Module. The problem arises when attempting to navigate to the configuration module, as it throws an error stat ...

javascriptangulartypescriptwebpack

Choose the value of the dynamically changing id with the same name using jQuery

Whenever I choose the id (they all have the same id number which is fetched dynamically), it displays the value of the first id. Here's how I'm trying to implement it, but it doesn't seem to be working: function editdr() { qty = $(thi ...

javascriptjqueryajax

Issue with starting React app using the "npm start" command

Upon the installation of a React App, I encountered a error message after executing the command "npm start" Cannot destructure property compile of 'undefined' or 'null'. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! <a href=" ...

javascriptnode.jsreactjsnpm

Creating a Custom Emoji Module

Currently working on creating an emoji component using JavaScript without the React framework. Does anyone know of a comprehensive list containing the unicodes for all emojis? I can successfully display an emoji on the screen by using its Unicode (e.g. & ...

javascripthtmlhtml-listsemoji

Controllers within controllers that fail to choose an option in a select tag dropdown will result in the hiding of another input element

My application utilizes nested controllers following John Papa's style guide, with a controller as approach. One of the controllers manages the form for client validation and submission, while the other is responsible for handling location-related fun ...

javascriptangularjs

Efficiently organizing dates in the Vuetify date range picker

I am working with a vuetify date range picker component and have the following code: <v-menu ref="effectiveDateMenu" v-model="effectiveDateMenu" :close-on-content-cl ...

javascriptvue.jsvuejs2vuetify.js

Unlocking JSON Keys Using Dashes

When working with JSON objects, we typically access elements using dot notation. For example, var obj = {"key": "value"}; var val = obj.key;. However, what if the key contains hyphens, like in this case: var obj = {"key-with-hyphens": "value"};? Do we ne ...

javascriptjson

Receiving error messages about missing images in my React project

I am new to programming and I have encountered an issue while running my React project. When I use the command npm start, I noticed that some image resources are not being packaged properly, resulting in certain images disappearing when the website is run ...

javascriptreactjsnpmwebpackweb-development-server

Unable to run JavaScript file fetched from cache API

For a web application built using pure vanilla JavaScript without utilizing service workers, I am looking to cache a JavaScript file hosted on an AWS S3 file server explicitly. The script below will be embedded in the index.html file of the application (UR ...

javascripthtmlcachingprogressive-web-apps

How to retrieve the index of a nested ng-repeat within another ng-repeat loop

On my page, there is an array containing nested arrays that are being displayed using ng-repeat twice. <div ng-repeat="chapter in chapters"> <div ng-repeat="page in chapter.pages"> <p>Title: {{page.title}}</p> </d ...

javascriptangularjsangularjs-ng-repeat

Exclusive pair of vertices within a network

I am working with a diagram that includes nodes A, B, C and several edges connecting these nodes. How can I extract the distinct pairs (A, B), (A, C), (B, C)? One potential method is: visited = []; for item1 in nodes: for item2 in nodes: if (item ...

javascriptgraphnodesedges

Incorrect ng-pattern does not enable the tooltip to be activated

I have implemented the ng-pattern="/^[0-9]{9}$/" in an input field that appears as follows: <input type="text" id="company_taxId" ng-model="company.taxId" required="required" class="input ng-scope ng-valid-maxlength ng-valid-mi ...

javascriptangularjstwitter-bootstrap

Translating from JavaScript to Objective-C using JSON

Can someone help me figure out how to correctly 'return' this JSON object in JavaScript? function getJSONData() { var points = '{\"points\": ['; var params = polyline.getLatLngs(); ...

javascriptobjective-cjson

The Chrome Extension was denied from loading due to a violation of the specified Content Security Policy

I am encountering an issue while loading a Chrome Extension using React. Whenever I try to load it, the error message below pops up: Refused to load the script 'https://code.jquery.com/jquery-3.2.1.slim.min.js' because it violates the following ...

javascriptreactjsgoogle-chrome-extension

Stopping a file transfer in case of browser closure or upload cancellation

When working on uploading a file asynchronously using HTML5 in MVC3, a common issue arises when dealing with large files such as 1GB. If the upload process is cancelled or the browser is closed at 50% completion, a 500MB file still gets saved in the target ...

c#javascriptasp.net-mvc-3htmlfile-upload

Tips for invoking a url with JavaScript and retrieving the response back to JavaScript

I am trying to make a URL call from JavaScript with a single parameter, and the URL should respond to that specific request. Here is an example of the response format: {"success":true, "result": {"token":"4fc5ef2bd77a3","serverTime":1338371883,"expireT ...

javascriptajaxhtml

A guide on iterating through an array in vue.js and appending a new attribute to each object

To incorporate a new property or array item into an existing virtual DOM element in Vue.js, the $set function must be utilized. Attempting to do so directly can cause issues: For objects: this.myObject.newProperty = "value"; For arrays: ...

javascriptvue.js

Delightful Bootstrap Tabs with Dynamic Content via Ajax

My website has a lot of tabs designed with Bootstrap. I wanted to make them responsive, so I tried using a plugin called Bootstrap Tabcollapse from https://github.com/flatlogic/bootstrap-tabcollapse (you can see a demo here: http://tabcollapse.okendoken.co ...

javascriptjqueryajaxtwitter-bootstrap

I am not encountering any errors; however, upon entering the room, my bot fails to initiate creation of a new channel

const Discord = require("discord.js") const TOKEN = "I forgot to include my token here" const { Client, GatewayIntentBits } = require('discord.js'); const { MemberFetchNonceLength } = require("discord.js/src/errors/Erro ...

javascriptnode.jsdiscord.js

Setting a default value for a select option in Angular 2

I am trying to set a default value for an option, acting as a placeholder using this method. It works in pure HTML, but when I implement it with the *ngFor attribute in Angular 2, nothing is selected. Here is the code I use in pure HTML: <select name= ...

javascriptangularangular2-forms