Currently, I am tackling an issue concerning three.js and ExtrudeGeometry. The challenge at hand involves a wave-like structure composed of multiple individual frames, each being extruded using ExtrudeGeometry.
https://i.sstatic.net/juEBb.jpg
My goal is to apply a texture to each frame of the structure in a way that it wraps around seamlessly. However, due to potential incorrect UV-mapping, the texture does not display properly on the extruded edges where the surface of the wave deviates from the level. Although there are small sections where the texture aligns correctly as shown in the picture. To address this issue, I have implemented the following script for applying textures:
// Generating simple Geometry
var shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0,10 );
shape.lineTo( 100,7 );
shape.lineTo( 100,0 );
var extrudeSettings = {
steps: 2,
amount: 10,
bevelEnabled: false,
bevelThickness: 0,
bevelSize: 0,
bevelSegments: 0
};
var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
var texture = new THREE.Texture( image );
texture.wrapS = THREE.ClampToEdgeWrapping;
texture.wrapT = THREE.ClampToEdgeWrapping;
texture.repeat.set( 0.1, 0.1 );
var material = new THREE.MeshBasicMaterial( {map: texture} );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );
Any assistance provided would be highly valued! Thank you!
Edit:
To better illustrate the problem, I have created an image showing white arrows indicating how the texture should wrap around the object. Interestingly, there are very few instances where the wrapping works correctly as depicted in the image.