I have a texture applied to a mesh I can change the offset with
mesh.material.map.offset.set I can change the scaling with
mesh.material.repeat.set so my question is, how can I rotate texture inside a plane?
From This:
To this
Thanks.
use 2D canvas as a texture
demo:
https://dl.dropboxusercontent.com/u/1236764/temp/stackoverflow_20130525/index.html
example code
var camera, scene, renderer, mesh; var width = window.innerWidth; var height = window.innerHeight; scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 30, width / height, 1, 1000 ); camera.position.z = 100; renderer = new THREE.WebGLRenderer(); renderer.setSize( width, height ); document.body.appendChild( renderer.domElement ); var img = new Image(); img.onload = createMeshThenRender; img.src = 'img.jpg'; function createMeshThenRender () { var imgWidth = imgHeight = 256; var mapCanvas = document.createElement( 'canvas' ); mapCanvas.width = mapCanvas.height = 256; // document.body.appendChild( mapCanvas ); var ctx = mapCanvas.getContext( '2d' ); ctx.translate( imgWidth / 2, imgHeight / 2 ); ctx.rotate( Math.PI / 4 ); ctx.translate( -imgWidth / 2, -imgHeight / 2 ); ctx.drawImage( img, 0, 0, imgWidth, imgHeight ); var texture = new THREE.Texture( mapCanvas ); texture.needsUpdate = true; mesh = new THREE.Mesh( new THREE.PlaneGeometry( 50, 50, 1, 1 ), new THREE.MeshBasicMaterial( { map : texture } ) ); scene.add( mesh ); renderer.render( scene, camera ); } three.js does not have a UV editing utility, so you either have to edit the geometry.faceVertexUvs manually, or rotate your image in an image editing program. I'd suggest the latter.
three.js r.58
three.js r85
For those looking to actually "rotate UVs" on a Plane sitting in XY plane (default plane) using a ShapeBufferGeometry or PlaneBufferGeometry.
var planeGeo = new THREE.PlaneBufferGeometry(24,24); var planeMesh = new THREE.Mesh(planeGeo, new THREE.MeshBasicMaterial({map: yourTexture})); scene.add(planeMesh); rotateUVonPlanarBufferGeometry(45, planeMesh); function rotateUVonPlanarBufferGeometry(rotateInDeg, mesh){ if(rotateInDeg != undefined && mesh){ var degreeInRad = THREE.Math.degToRad(rotateInDeg); var tempGeo = mesh.geometry.clone(); var geo; if(tempGeo instanceof THREE.BufferGeometry){ geo = new THREE.Geometry().fromBufferGeometry(tempGeo); }else{ console.log('regular geometry currently not supported in this method, but can be if code is modified, so use a buffer geometry'); return; } // rotate the geo on Z-axis // which will rotate the vertices accordingly geo.applyMatrix(new THREE.Matrix4().makeRotationZ(degreeInRad)); // loop through the vertices which should now have been rotated // change the values of UVs based on the new rotated vertices var index = 0; geo.vertices.forEach(function(v){ mesh.geometry.attributes.uv.setXY( index, v.x, v.y ); index++; }); mesh.geometry.attributes.uv.needsUpdate = true; } }