What is the process for reversing the texture application direction on a CylinderGeometry object?

Is it possible to reverse the orientation of texture mapping on a CylinderGeometry object?

var obj = new THREE.Mesh(
    new THREE.CylinderGeometry(20, 15, 1, 20),
    new THREE.MeshLambertMaterial({color: 0x000000}) //the material is later changed to the correct
);

Your assistance in this matter would be greatly appreciated. Thank you!

Answer №1

This custom function is effective:

        var invertTextureOnCylinderGeometry = function(obj) {
            var faceVertexes = obj.geometry.faceVertexUvs[0];
            var faceVertexesLength = faceVertexes.length;
            var divisionT = 1 / (faceVertexesLength * 0.25);
            faceVertexes.map(function(face, index) {
                if (index < 0.5*faceVertexesLength) {
                    var thisIndexDivision = [
                        Math.floor(index/2) * divisionT,
                        Math.ceil((index+divisionT)/2) * divisionT
                    ];
                    if (index % 2) {
                        face[0].set(1, thisIndexDivision[0]);
                        face[1].set(1, thisIndexDivision[1]);
                        face[2].set(0, thisIndexDivision[1]);
                    } else {
                        face[0].set(0, thisIndexDivision[0]);
                        face[1].set(1, thisIndexDivision[0]);
                        face[2].set(0, thisIndexDivision[1]);
                    }
                }
            });
            obj.geometry.uvsNeedUpdate = true;
        };

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

Is it possible in Javascript to verify if a different script has been triggered?

I recently created a pop-out menu for a website using HTML and Javascript. The menu currently has a button that opens a div container with a close button inside it. While the buttons are functioning properly in hiding the div, the elements within the div d ...

Using NodeJS Script in conjunction with Express and setInterval

Feeling stuck and unable to find clear answers for the best solution. I have a Node.js app that serves APIs with MongoDB as the database. I created a setInterval within the request to update the data every 30 seconds. This was done to prevent the Node.js ...

What is the correct way to start a typed Object in TypeScript/Angular?

As I delve into the world of Angular and TypeScript, I am faced with a dilemma regarding how to initialize an object before receiving data from an API request. Take for instance my model: //order.model.ts export class Order { constructor(public id: num ...

Alter the color of a single character using JQuery, all while keeping the HTML tags unchanged

I'm currently working on iterating through the DOM using JQuery in order to change the color of every occurrence of the letter m. Here is what I have so far: $(document).ready(function(){ var m = "<span style='color: red;'>m</span& ...

Developed a new dynamic component in VUE that is functional, but encountered a warning stating "template or render function not defined."

I'm currently working on a dynamic markdown component setup that looks like this <div v-highlight :is="markdownComponent"></div> Here's the computed section: computed: { markdownComponent() { return { temp ...

Adjusting the date format within an AJAX success callback: alter how the date is displayed

Attempting the following code: var second_date = moment(currentdate).format('DD-MM-YYYY'); The result is: Uncaught Reference Error: moment is not defined. success: function(response){ var len = 0; if(response != n ...

Analyze the length of time and provide a percentage of similarity

Is it possible to compare two durations and calculate the percentage of similarity? Suppose I have a reference duration, as well as a second duration that needs to be compared with the first one. There is an 8% tolerance level, meaning that the second du ...

When running Rollup, a syntax error occurs due to the use of the "import" syntax in an internal Rollup file using Javascript

I am working on a nodeJS/express application with a rollup bundler. My rollup configuration file defines a command in the package.json like this: "build": "env ROLLUP_OPTIONS='prod' rollup --config configs/rollup.config.js". However, when I run " ...

Saving data to a database using jQuery Ajax when multiple checkboxes are checked

Looking for a solution to store checkbox values into a database using jQuery Ajax to PHP. https://i.sstatic.net/tdjm9.png To see a live demo, click here. The image above illustrates that upon checking certain checkboxes and clicking Update, the checkbox ...

Troubleshooting the sidebar pin-unpin problem using Jquery and CSS

I have created a single side panel that allows me to toggle between opening and closing the sidebar by hovering on it. I can also pin and unpin the sidebar by clicking on the pin image. Now, I want to open the sidebar onClick instead of onHover and remove ...

Store text in a table format in your local storage

I need help figuring out how to save product and price information to local storage when an "add to cart" button is pressed. Can someone provide guidance on how to do this? Here is the code I currently have: body> <!-- Header--> ...

After the Parent Component has successfully mounted, the Child Component will render

I am currently working with a third party library that has a unique prop allowing the user to pass in a string which is used to retrieve a DOM element and return its bottom value. <Sticky bottomBoundary="#some-id"> <MyChildComponentMightBeANa ...

Ensuring draggable div remains fixed while scrolling through the page

I am currently working on creating a draggable menu for my website. The menu is functional and can be moved around the page as intended. However, I have encountered an issue where the menu disappears when scrolling down the page due to its position attrib ...

Ensure all fields are valid prior to performing an update

I'm currently faced with the challenge of validating my form data before executing an AJAX update. Essentially, what I want to achieve is to validate the input data in the form before triggering the ajax update function. I'm unsure about where to ...

Struggling with css margins and div image constraints, seeking guidance and tips for resolution

Struggling with creating a dynamic gallery that works smoothly in jsfiddle but encounters multiple issues when integrated into WordPress. The main problem is the excessive stretching of margins between image titles and meta-data, leading to misalignment an ...

Converting JSON data into clickable URL links and retrieving information upon clicking

I have a dataset in JSON format. As I iterate through it, I'm inserting selected values into an HTML link element as shown below: getPatchList: function() { $.ajax({ url: "/returneddata" }).done(function(r ...

How can Node / Javascript import various modules depending on the intended platform?

Is there a way to specify which modules my app should import based on the target platform in TypeScript? I am interested in importing different implementations of the same interface for a browser and for Node.js. In C++, we have something like: #ifdef wi ...

react-navigation hook for navigating

Currently, I am utilizing the react-navigation hook and instead of repeating the hook in various components, my goal is to pass navigation as a prop. const navigation = useNavigation(); ... <MyButton resetLocation={resetLocation} navigation= ...

Error animation on client-side validation not resetting correctly

Incorporated a form validation and error display system utilizing TransitionGroup for animations. The flag issueVisible manages the visibility of the error message, while determineField() aids in identifying the field related to the error. The issue arise ...

jquery sequential fade effect

I am trying to make each div fade in one by one. Visit this link for reference <div id="w"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> $(function() { $(&a ...