canvas - three.jsでのテクスチャ形状の押し出し

Question

Three.js で押し出された形状をテクスチャリングしようとしています。次のコードでは、曲線形状を作成し、形状を押し出し、Jpg ファイルから読み込んだジオメトリとマテリアルを使用してメッシュを作成します。ワイヤーフレームは表示されますが、テクスチャは表示されません。テクスチャのサイズは 512*512px です。

正しいアプローチを使用していますか? テクスチャを手動で UV マップする必要がありますか? 個々の四角形ではなく、押し出された面全体にテクスチャをラップしたいと思います。

var x = -50, y = 20, z = 150;
var rx = 0, ry = Math.PI/4, rz = 0;
var scale = 1;
var color = 0x00ff00;

var shape = new THREE.Shape();

shape.moveTo( x, y );
shape.quadraticCurveTo(x+50, y, x+100, y+50);
shape.quadraticCurveTo(x+50, y, x, y);      

var texture = new THREE.ImageUtils.loadTexture('images/checkerboard.jpg');        
var material = new THREE.MeshBasicMaterial({ map:texture, doubleSided:true });

/* 3D */
var extrudeSettings = { amount: 100 };
extrudeSettings.bevelEnabled = false;
extrudeSettings.steps = 1;

var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );       

//var mesh = new THREE.Mesh( geometry, material );
var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ material, new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } ) ] );
mesh.position.set( x, y, z);
mesh.rotation.set( rx, ry, rz );

scene.add( mesh );