path - 用 three.js 挤压

Question

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

Answer 1

我认为您正在寻找一种称为车床的不同类型的“挤压” 。您需要使用描述偏移矩形的点创建一个路径，然后将其传递给 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 构造函数中，第一个参数是您想要作为点数组车削的路径，第二个参数是步数（步数越多，细节/径向迭代越多），第三个参数（我没有使用在示例中）是角度 - 默认情况下它是 360，但您也可以控制它。

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

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