How to apply a texture to THREE.ExtrudeGeometry?

Question

var arcShape = new THREE.Shape();
arcShape.moveTo( 50, 10 );
arcShape.absarc( 10, 10, 40, 0, Math.PI*2, false );

var map1 = new THREE.ImageUtils.loadTexture( 'moon.jpg' );
var geometry = new THREE.ExtrudeGeometry( arcShape, extrudeSettings );
var new3D = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: map1 } ) );
new3D.receiveShadow = true;
obj3Dmassive.add( new3D );

Texture (512x512): http://f3.s.qip.ru/cMfvUhNj.png

Result: http://f3.s.qip.ru/cMfvUhNh.png

How to fill a texture figure?

see http://stackoverflow.com/questions/7919516/using-textures-in-three-js — Rachel Gallen, Feb 10 '13 at 12:48

score 2 · Answer 1 · answered Apr 04 '14 at 15:48

If you just have a straight extrusion path, you can apply textures to extruded shapes without the need for a custom UV generator. e.g.

var extrudeSettings = {
                bevelEnabled: false, 
                steps: 1,
                amount: 20, //extrusion depth, don't define an extrudePath
                material:0, //material index of the front and back face
                extrudeMaterial : 1 //material index of the side faces            
            };

var geometry = shape.extrude(extrudeSettings);

var mesh = new THREE.Mesh(geometry, 
    new THREE.MeshFaceMaterial([materialFace, materialSide]));

This is handy for cookie-cutter type shapes.

score 1 · Accepted Answer · edited May 23 '17 at 12:22

EDIT: Answer outdated. See Extruding multiple polygons with multiple holes and texturing the combined shape instead.

You are lucky. What you are trying to do has been done in the following example:

https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_extrude_uvs2.html

You have to specify your own UV generator function. This example shows you how to do that.

Remember, this is just an example. It may not be correct -- or easy to implement in your case.

How to apply a texture to THREE.ExtrudeGeometry?

2 Answers2

Linked