three.js - apply different material to extruded sh

Question

I have Three.Shape which I can apply Extrusion To get a plane I drew a square first and then apply extrusion

var squareShape = new THREE.Shape();
squareShape.moveTo( 0,0 );
squareShape.lineTo( 0, sqLength );
squareShape.lineTo( sqLength, sqLength );
squareShape.lineTo( sqLength, 0 );
squareShape.lineTo( 0, 0 );

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

now a 3D square is appearing on my browser.

Next I want to apply a image texture of 256x256 on its top face. How to do this?

Answer 1

If you look at src/extras/geometries/ExtrudeGeometry.js in THREE.js you will see these comments.

• material: // material index for front and back faces
• extrudeMaterial: // material index for extrusion and beveled faces

So for example you can say (obviously won't run directly because it is incomplete)

// The face material will be index #0.  The extrusion (sides) will be #1.
var extrudeSettings = { amount: 10, bevelEnabled: true, bevelSegments: 3, steps: 4, bevelThickness: 8, material: 0, extrudeMaterial: 1 };

And when you create your mesh you create 2 materials and assign them to your mesh.

var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ new THREE.MeshLambertMaterial( { color: color } ), new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } ) ] );

Hope this gets you on the right path.

On a side note, related to the other answer, you make want to use extrude to create something that dimensionally is similar to a square but has bevels. One example would be if you were trying to draw dice and wanted to round the edges.

Answer 2

If all you want is a cube why are you extruding? Why don't you use the CubeGeometry.