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?
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.
If all you want is a cube why are you extruding? Why don't you use the CubeGeometry.
