用 three.js 挤压答案

【问题标题】：Extruding with three.js用 three.js 挤压
【发布时间】：2012-07-08 23:58:07
【问题描述】：

我想沿圆形挤出一个矩形来制作一个 3d 环我查看了 webgl_geometry_extrude_shapes.html 示例，但我无法用圆圈更改示例路径。有人可以发布一个例子吗？提前致谢！

【问题讨论】：

使用挤压创建环的另一种方法是创建一个 4 面圆环，如下所示：geometry = new THREE.TorusGeometry( 50, 10, 4, 64 );
谢谢，但是这样平面不在环面的外部/内部。

【解决方案1】：

我认为您正在寻找另一种称为Lathe 的“挤压”。您需要使用描述偏移矩形的点创建一个路径，然后将其传递给 LatheGeometry 并插入您的 Mesh 实例：

例如

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，但您也可以控制它。

关于点，请注意它们在 x 轴上有一点偏移。定位您的点不仅会影响被车削的正方形的大小，还会影响车床偏移量（偏移量为 0 应该让您获得一个完整的圆柱体）。此外，这些点会影响车床轴（注意我使用的是 XZ）。

如果您不熟悉车床的概念，您可能应该玩一下 3D 编辑器，因为它们中的大多数都支持该功能。（有点跑题了，但这个操作在 Illustrator 中的 Effects > 3D > Revolve 下有点支持）

【讨论】：