Extruding with three.js

问题:

I'd like to extrude a rectangle along a circle to make a 3d ring I've looked at webgl_geometry_extrude_shapes.html example, but i wasn't able to change the example path with a circle. Can someone post an example? Thanks in advance!

回答1:

I think you're looking for a different kind of 'extrusion' called a Lathe. You'd need to create a path with points describing an offset rectangle which you'd then pass to LatheGeometry and plug into your Mesh instance:

e.g.

var pts = [
            new THREE.Vector3(150,0,50),//top left
            new THREE.Vector3(200,0,50),//top right
            new THREE.Vector3(200,0,-50),//bottom right
            new THREE.Vector3(150,0,-50),//bottom left
            new THREE.Vector3(150,0,50)//back to top left - close square path
           ];
var mesh = new THREE.Mesh( new THREE.LatheGeometry( pts, 12 ), new THREE.MeshLambertMaterial( { color: 0x2D303D, wireframe: true, shading: THREE.FlatShading } ));
mesh.position.y = 150;
mesh.overdraw = true;
mesh.doubleSided = true;

scene.add( mesh );

In the LatheGeometry constructor, the first parameter is the path you want to lathe as an array of points, the second is the number of steps (the more steps, the more detail/radial iterations) and the third (which I'm not using in the example) is the angle - by default it goes 360, but you can also control that.

Regarding the points, notice they are offset a bit on the x axis. Positioning your points will affect not only the size of the square being lathed but also the lathe offset (an offset of 0 should get you a full cylinder). Also, the points will affect the lathe axis (notice I've used XZ).

If you're not familiar with the concept of lathes you should probably have a play in a 3D editor as most of them support the feature. (A bit off topic, but this operation is kind of supported in Illustrator under Effects > 3D > Revolve )