Bad Texture Alignment on Extruded Shape Geometry

Applying same texture on Tube Geometry and Extruded Shape Geometry created with Ellipse result different. Texture on Tube Geometry is correct but not on Extruded Shape Geometry. Any solution?



var points = myCurvePoints; // calculated sine wave curve points
var path = new THREE.CatmullRomCurve3(points);
var ellipse = new THREE.EllipseCurve( 0, 0, xTubeRadius, yTubeRadius, 0, 2 * Math.PI, false, 0 );
var shape = new THREE.Shape(ellipse.getPoints( 8 ));
var geometry = new THREE.ExtrudeGeometry( shape, {
    steps: 8,
    extrudePath: path
} );

var loader = new THREE.TextureLoader();
var bumpTexture = loader.load( "bump.png", function (tex) {
    tex.wrapS = THREE.RepeatWrapping;
    tex.wrapT = THREE.RepeatWrapping;
    tex.repeat.set(4, 1);
    tex.anisotropy = 16;
    tex.needsUpdate = true;
var material = new THREE.MeshStandardMaterial( {
    color: 0xffffff,
    side: THREE.DoubleSide,
    bumpMap: bumpTexture,
    bumpScale: 0.01,
    roughness: 1,
    metalness: 0,
    transparent: true,

var mesh = new THREE.Mesh( geometry, material );

It’s not guaranteed that both geometry generators produce the same result. Why not just using TubeGeometry?

Purpose of the Extruded geometry is to have control on the shape of the tube. Tube geometry only offers circular cross section. I need the elliptical cross section.

1 Like

Okay, I see what you mean. Unfortunately, the uv algorithm in ExtrudeGeometry is very trivial. More advanced approaches were suggested here:

However, this feature request is not yet implemented.