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 );

但我希望它不仅仅是一架飞机，我只是发现了三个.ExtrudeGeometry但不知道我是否可以将它用于我的目的或如何使用。

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类
ExtrudeGeometry（）可以使用amount选项轻松地沿直线挤出并禁用bevelEnabled。如果需要复杂的拉伸路径，请尝试SplineCurve3。
ExtrudeGeometry（）返回原始几何体，换句话说，返回Vector3点的数组。在您使用它与材料一起构造网格之前，它本身并没有太大作用。

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

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

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

如何在Three.js中挤出圆几何？

1 个答案: