How to apply a texture to THREE.ExtrudeGeometry?

问题

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?

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/14797407/how-to-apply-a-texture-to-three-extrudegeometry

标签

javascript

html5

canvas

three.js