用three.js进行挤压 [英] Extruding with three.js

问题描述

我想沿圆形拉伸矩形以制作3d环 我看过webgl_geometry_extrude_shapes.html示例，但无法用圆圈更改示例路径. 有人可以举一个例子吗? 预先感谢！

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!

推荐答案

我认为您正在寻找一种称为

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:

例如

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 );

在LatheGeometry构造函数中，第一个参数是您要以点数组的形式进行车床加工的路径，第二个参数是步骤数(更多的步骤，更多的细节/径向迭代)，第三个参数是m在示例中未使用)是角度-默认情况下为360，但是您也可以控制该角度.

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.

关于点，请注意它们在x轴上有一些偏移.定位您的点不仅会影响车削的正方形的大小，还会影响车床的偏移量(偏移量为0会使您得到完整的圆柱体).另外，这些点也会影响车床轴(请注意，我已经使用XZ).

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).

如果您不熟悉车床的概念，那么您可能应该在3D编辑器中发挥作用，因为它们中的大多数都支持该功能. (有点题外话，但是Illustrator在效果">"3D">旋转"下支持该操作)

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 )

这篇关于用three.js进行挤压的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！