如何在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，但不知道是否可以用于我的目的或如何使用。

- Terrorbite

---

阅读文档时您有什么疑惑吗？http://threejs.org/docs/#Reference/Extras.Geometries/ExtrudeGeometry 应该包含您所需的所有信息。 - jered

我也不确定你的问题是什么。你是在创建一个四分之一圆形时遇到了麻烦吗？还是不知道如何从形状和路径中挤出几何体？两者都有问题吗？ - jered

请查看http://stackoverflow.com/a/34209976/1461008 - WestLangley

Answer 1

这是一个如何沿着直线拉伸一个形状的示例，本例中是三角形。这基本上就是 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类绘制的任何形状。
• 使用amount选项并禁用bevelEnabled，ExtrudeGeometry() 可以轻松沿直线拉伸。如果您需要复杂的拉伸路径，请尝试使用SplineCurve3。
• ExtrudeGeometry()返回原始几何体，换句话说，是Vector3点的数组。它本身没有太多作用，直到您使用它与Material一起构造Mesh。

在THREE.js文档中阅读更多信息：

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

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

- jered