Adjust the texture rotation on a PlaneGeometry by 45 degrees using UV coordinates

Trying to apply a rotated texture onto a PlaneGeometry has been a bit of a challenge for me.

I have a 44x44 diamond-shaped texture that you can view here:

https://i.sstatic.net/Babx0.png

My goal is to map this diamond texture onto the plane geometry using UVs. Would it be feasible to achieve this using Three.js? Specifically, I want to map texel (0, 22) to uv (0, 0), texel (22, 0) to uv (1.0, 0), and so on. Is this possible?

Below is the code snippet I'm currently working with: https://jsfiddle.net/mxLt0bun/2/

geometry = new THREE.PlaneGeometry(1, 1);

texture = loader.load("https://i.imgur.com/DPZiMyK.png")
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;

material = new THREE.MeshBasicMaterial({
map: texture
});
mesh = new THREE.Mesh(geometry, material);

// draw edges
var geo = new THREE.WireframeGeometry(mesh.geometry);
var mat = new THREE.LineBasicMaterial({
color: 0x00FF00,
linewidth: 1
});
var wireframe = new THREE.LineSegments(geo, mat);
mesh.add(wireframe);

scene.add(mesh);
javascriptthree.js

Answer №1

To adjust the UVs of your geometry, follow these steps:

geometry = new THREE.PlaneGeometry( 1, 1 );

geometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].set( 0.5, 1.0 );
geometry.faceVertexUvs[ 0 ][ 0 ][ 1 ].set( 0.0, 0.5 );
geometry.faceVertexUvs[ 0 ][ 0 ][ 2 ].set( 1.0, 0.5 );
geometry.faceVertexUvs[ 0 ][ 1 ][ 0 ].set( 0.0, 0.5 );
geometry.faceVertexUvs[ 0 ][ 1 ][ 1 ].set( 0.5, 0.0 );
geometry.faceVertexUvs[ 0 ][ 1 ][ 2 ].set( 1.0, 0.5 );

It's recommended to use BufferGeometry as it offers better performance. Here's how you can utilize it:

geometry = new THREE.PlaneBufferGeometry( 1, 1 );

geometry.attributes.uv.setXY( 0, 0.5, 1.0 );
geometry.attributes.uv.setXY( 1, 1.0, 0.5 );
geometry.attributes.uv.setXY( 2, 0.0, 0.5 );
geometry.attributes.uv.setXY( 3, 0.5, 0.0 );

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

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 better to Vuex - manipulate store item twice, trigger new items, or perform transformations within components each time they are mounted?

I am considering performing two separate transformations on a single, large store item and then saving the results as two new store items. For instance: setEventsData: (state, data) => {...} // main huge master object // perform transformations on it an ...

javascriptvue.jsvuex

Generating unique identifiers for ng-model in AngularJS

Issue - ng-model is not generating dynamically. I have dynamic input boxes and I am attempting to create ng-model dynamically like test[1], test[2], etc. However, when inspecting the form with Firebug, all input elements only show - test[shiftnumber]. HT ...

javascripthtmlangularjsangular-ngmodel

Managing events inside a JQuery dialog box

Currently, I have successfully implemented a JQuery dialog that allows users to change their password. The functionality works smoothly as the system checks if the two passwords match and if the new password meets the minimum requirements before making an ...

javascriptjqueryeventsdialogkeyup

How can I determine the package version that is being used when requiring it in Node.js?

I am currently working on resolving an issue with a node module that does not have a package.json. The module contains references to cheerio and superagent: var log = console.log.bind(console), superagent = require('superagent'), cheerio ...

javascriptnode.jsnpmdependency-management

Tips for sending a variable to control a particular panel within an accordion in Angular 2

I have a collection of ngbpanels that are dynamically created using ngFor. I need to expand or collapse a specific panel based on certain conditions, but the ID I provide for the panel is stored in a variable. The code does not recognize the panel ID when ...

javascriptangulartypescript

Executing a command to modify the local storage (no need for an API request) using redux persist in a React Native environment

Currently, I am facing an issue where I am attempting to trigger an action in Redux sagas to assign an ID to a local store: import { call, takeEvery } from 'redux-saga/effects'; import { BENEFITS } from '../actions/types'; function* ...

javascriptreactjsreact-nativereact-reduxredux-saga

Update a separate React component in response to the interaction with a different React component

Currently, I am working with a react component named Interest Category that showcases an initial set of Interest categories. Another react component called CreateInterestCategoryDialog, which functions as a modal, is responsible for creating a new entity I ...

javascriptreactjsmaterial-ui

Values returned by XmlHttpRequest

When it comes to returning data from an XmlHttpRequest, there are several options to consider. Here's a breakdown: Plain HTML: The request can format the data and return it in a user-friendly way. Advantage: Easy for the calling page to consume ...

javascriptajax

Steer clear of 405 errors by implementing AJAX in combination with Flask and JINJA templ

Hey there, I'm fairly new to backend work so please bear with me. I've been doing some research but haven't found the answer yet. Currently, I'm working on an application that fetches search results from a 3rd party API. I'm tryi ...

javascriptpythonajaxflaskjinja2

Locating function definitions in etags using Emacs

I find syntax check in js2-mode to be quite effective. However, there are times when I wish to name a function "delete" or "new" even though it may not be the best practice. Js2-mode often flags this as an error. Is there a way to use built-in keywords as ...

javascriptnode.jsemacssyntaxjslint

Break up every word into its own separate <span>

I am currently facing an issue with displaying an array of strings in HTML using spans. These spans are wrapped inside a contenteditable div. The problem arises when a user tries to add new words, as the browser tends to add them to the nearest existing sp ...

javascriptangulartypescript

Mocking a named class-export in TypeScript using Jest

I have a node module that exports several classes, including one called Client, which I utilize to create clients with various APIs as methods. I'm currently attempting to test my module, which has a dependency on this node module, using Jest. Howeve ...

javascriptnode.jstypescriptunit-testingjestjs

Create a complete duplicate of a Django model instance, along with all of its associated

I recently started working on a Django and Python3 project, creating a simple blog to test my skills. Within my project, I have defined two models: class Post(models.Model): post_text = models.TextField() post_likes = models.BigIntegerField() post_ ...

javascriptpythondjangopython-3.xcopy

"Utilizing a Handlebars Helper to Evaluate if Two Values (v1 and v2) are Equal, and Displaying Content from

To make the actual call, I require something along these lines: <script id="messagesTemplate" type="text/x-handlebars-template"> {{#each messages.messages}} {{#each to}} {{#ifCond username messages.sessionUserName}} <h1> ...

javascriptexpresshelperhandlebars.js

The Cross-Origin Request has been blocked due to the Same Origin Policy prohibiting access to the remote resource. The reason for this is that the CORS preflight response was unsuccessful

SERVERSIDE // Establishing Headers app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE"); res.header("Access-Control-Allow-Headers ...

javascriptvue.jsexpresscors

Generating text upon clicking by utilizing vue apex charts dataPointIndex

Is there a way to populate a text area on click from an Apex chart? The code pen provided below demonstrates clicking on the bar and generating an alert with the value from the chart. Instead of displaying this value in an alert, I am looking to place it o ...

javascriptvue.jsvuejs3bootstrap-vueapexcharts

Why is it necessary to use 'this.' to reference a function inside a Component in React?

class First extends React.Component{ handleClick(){ alert('handle click'); } render(){ return <div> <button onClick={this.handleClick}>click</button> </div>; } } Explo ...

javascriptnode.jsreactjsreact-native

Issue with Date Picker not properly storing selected date in MySQL database

My goal is to save the datepicker date to MySQL by selecting the date format using JavaScript. I have verified that the date format appears correct as YYYY-MM-DD when logging to the console. However, when I try to execute an INSERT query to MySQL, the date ...

javascriptmysqlnode.jsexpressejs

Why can my JavaScript server code read "2011" but not "20,11" when both are formatted as strings?

Currently, I am trying to establish a connection between Storm and JavaScript through redis. While the redis aspect of the connection is functioning correctly, I am encountering an issue when attempting to publish tuples (essentially Strings). Even though ...

javascriptexpressredissocket.ioapache-storm

When errors occur while printing HTML through an Ajax request, it can hinder the functionality of other JavaScript code

I recently conducted an interesting experiment on my website. The concept involved sending an AJAX request to a PHP file, which then retrieved a random website by using various random words for search queries on Google. The retrieved website content was th ...

javascriptphpjqueryhtmlajax