4

I'm aiming to map a rectangular texture onto a curved surface. The curved section of my custom, extruded, shape, geometry consists of 599 Faces (Face4) out of a total of 1800 faces. I'm trying to split my texture across these 599 curved faces.

Image 1: The black face of my custom geometry is the curved section I'm aiming to map a texture onto

Image 1: The black face of my custom geometry is the curved section I'm aiming to map a texture onto

Image 2: A rough example of what I'm trying to do

Image 2: A rough example of what I'm trying to do

Image 3: Each face is a vertical standing rectangle: faces[ i ].color.setHex( Math.random() * 0xffffff );

IMage 3: Each face is a vertical standing rectangle:  faces[ i ].color.setHex( Math.random() * 0xffffff );

Trying to get the UV coordinates of the selected faces (each face is demonstrated by image 3) and aiming to map my texture, by splitting it up, across these curved faces. Here is what I got so far:

var image = 'resources/customRectangle.png';
var texture = THREE.ImageUtils.loadTexture( image );
    texture.repeat.set(0.1, 0.1);                                           
    texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;;          

var settings = {
    amount: 14.5,
    steps : 1,
    bevelEnabled: false,
    curveSegments: 300,
    material: 0,
    extrudeMaterial: 1
    };

 var shape = new THREE.Shape();
     shape.moveTo( 90, 120 );
     shape.absarc( -30, -30, 200, 0, Math.PI * 0.27, false );
     shape.moveTo( 160, -40 );
     shape.moveTo( 90, 120 );
 var geometry = new THREE.ExtrudeGeometry( shape, settings );       

     geometry.computeBoundingBox();
 var max = geometry.boundingBox.max;
 var min = geometry.boundingBox.min;
 var offset = new THREE.Vector2(0 - min.x, 0 - min.y);
 var range = new THREE.Vector2(max.x - min.x, max.y - min.y);
 var faces = geometry.faces;
     geometry.faceVertexUvs[0] = [];


 for ( var i = 0; i < faces.length; i ++ ) {

 var face4 = faces[i].d;

 if( face4 > 0 && i < 1800 && i > 1200  ) {   // Selects curved faces   

    faces[ i ].color.setHex( 0x555555 );

var v1 = geometry.vertices[faces[i].a];
var v2 = geometry.vertices[faces[i].b];
var v3 = geometry.vertices[faces[i].c];

    geometry.faceVertexUvs[0].push([

new THREE.Vector2((v1.x + offset.x)/range.x,(v1.y + offset.y)/range.y),
new THREE.Vector2((v2.x + offset.x)/range.x,(v2.y +offset.y)/range.y),
new THREE.Vector2((v3.x + offset.x)/range.x ,(v3.y + offset.y)/range.y)

     ]);
   };
 };

    geometry.uvsNeedUpdate = true;  

var material = new THREE.MeshLambertMaterial( { map: texture } );
var mesh = new THREE.Mesh( geometry, material );
    mesh.position.x = x - 46;
    mesh.position.y = y;
    mesh.position.z = z + 20;   
    mesh.rotation.set( 1.5, 0.045, 0.59);
    object3D.add(mesh);     `

It's my first time working with UV coordinates so im not sure im creating them correctly, as well not knowing how to use the UV coordinates to map a texture, across multiple faces. Is there anyway to split a texture into multiple divisions? (shown in image 3). To formulate a result like image 2?.

I have been stuck on this for a while, searched the internet deeply and had to resort to professional assistance. I greatly appreciate any help in advance! :) Kind regards, Leon.

Leon Roe
  • 41
  • 4

0 Answers0