用 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!

推荐答案

我认为您正在寻找一种称为 车床.您需要使用描述偏移矩形的点创建一个路径，然后将其传递给 LatheGeometry 并插入您的 Mesh 实例:

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 中的 Effects > 3D > Revolve 下有点支持)

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屋！