CODEWITHSUNDEEP
javascriptthree.js
user499054
user499054

Reputation:

Rotate texture 45 degrees on PlaneGeometry using UV mappings

I'm trying to map a rotated texture onto a PlaneGeometry.

Essentially, I have a 44x44 diamond texture that looks like this:

example image

I would like to map the diamond in the image onto my plane geometry using UVs. Is this possible to do using Three.js? In essence, map texel (0, 22) to uv (0, 0), texel (22, 0) to uv (1.0, 0), and so forth?

Here's the code that I'm using: 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);

Upvotes: 1

Views: 806

Answers (1)

WestLangley
WestLangley

Reputation: 104843

You can modify the UVs of your geometry like so:

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 );

BufferGeometry is more efficient. You might as well use 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 );

three.js r.83

Upvotes: 5

Related Questions