THREE.JS Texture Mapping sur ExtrudeGeometry

Question

Je travaille sur un problème avec trois.js y ExtrudeGeometry . J'ai une structure en forme de vague qui est faite de plusieurs cadres individuels. Chacun d'entre eux est extrudé à l'aide de ExtrudeGeometry .

J'aimerais appliquer une texture à chaque image de la structure qui est "enveloppée" autour de la structure. Pour une raison quelconque (peut-être un mauvais UV-mapping ?), la texture ne s'affiche pas correctement sur les bords extrudés où la surface ondulée n'est pas de niveau. (Il y a quelques minuscules sections dans l'image où la texture s'enroule correctement). J'utilise le script suivant pour appliquer les textures :

// create some 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 );

Toute aide est très appréciée ! A la vôtre !

Edit :

J'ai créé cette image pour mieux illustrer le problème. Les flèches blanches montrent comment la texture est censée envelopper l'objet. A certains endroits très rares, c'est le cas !

Answer 1

Jetez un coup d'œil à cet exemple https://threejs.org/examples/?q=geome#webgl_geometry_shapes

à la ligne 70, il y a un commentaire qui indique que texture.repeat doit être réglé sur (0.008, 0.008).