javascript - 如何在 Three.js 中挤出圆形几何体？

Question

如何在 Three.js 中挤出四分之一圆几何(THREE.CircleGeometry)？

我这样创建四分之一圆:

var circle = new THREE.Mesh( 
    new THREE.CircleGeometry( 25, 32, 0, Math.PI/2 ), 
    new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide })
);
scene.add( circle );

但我希望它不仅仅是一个平面，我刚刚找到了 THREE.ExtrudeGeometry 但不知道我是否可以将它用于我的目的或如何使用它。

Answer 1

这是一个如何拉伸(stretch)形状的示例，在本例中是沿直线拉伸(stretch)的三 Angular 形。这几乎就是 Shape 类的用途。 https://jsfiddle.net/wb412ymk/

// Create a 2D triangular shape
// The Shape() class has methods for drawing a 2D shape
var triangleShape = new THREE.Shape();
triangleShape.moveTo(-2, -2);
triangleShape.lineTo(0, 2);
triangleShape.lineTo(2, -2);
triangleShape.lineTo(-2, -2);

// Create a new geometry by extruding the triangleShape
// The option: 'amount' is how far to extrude, 'bevelEnabled: false' prevents beveling
var extrudedGeometry = new THREE.ExtrudeGeometry(triangleShape, {amount: 5, bevelEnabled: false});

// Geometry doesn't do much on its own, we need to create a Mesh from it
var extrudedMesh = new THREE.Mesh(extrudedGeometry, new THREE.MeshPhongMaterial({color: 0xff0000}));
scene.add(extrudedMesh);

这里的关键概念:

• 2D 形状可以是您可以使用 Shape 类绘制的任何形状
• ExtrudeGeometry() 可以使用 amount 选项并禁用 bevelEnabled 轻松地沿直线挤出。如果您想要复杂的挤出路径，请尝试 SplineCurve3。
• ExtrudeGeometry() 返回原始几何体，换句话说，一个 Vector3 点数组。在您使用它来构建网格和 Material 之前，它本身不会做太多事情。

阅读有关 THREE.js 文档的更多信息:

https://threejs.org/docs/#api/extras/core/Shape

https://threejs.org/docs/#api/geometries/ExtrudeGeometry