Bad Texture Alignment on Extruded Shape Geometry

Questions
,
1

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?

TUBE GEOMETRY — OK

tube_geometry
tube_geometry.jpg1193×623 127 KB

EXTRUDED GEOMTRY — NOT OK

extruded_geometry
extruded_geometry.jpg1193×623 99.8 KB 

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

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

3

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
4

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.