如何在 three.js 中创建 3D 梯形？

Question

我正在 three.js 中制作一个小动画，其中有一些基本的 3D 模型，其中一个我正在苦苦挣扎的是“梯形”。

到目前为止，我只能在 THREE.CylinderGeometry 的帮助下创建截顶金字塔，底边始终相同。

// radiusAtTop, radiusAtBottom, height, segmentsAroundRadius, segmentsAlongHeight
const dash_geometry = new THREE.CylinderGeometry( 140, 150, 50, 4, 1 )
const dash_material = new THREE.MeshLambertMaterial(dash_settings.material)
const dash_mesh = new THREE.Mesh(dash_geometry, dash_material)

但我需要一个与图片中宽度、高度、深度不同的对象。

谁能至少给我指出正确的方向？

Answer 1

您可以创建一个梯形，底边为 1 x 1，高度为 1，如下所示：

var geometry = new THREE.CylinderGeometry( 0.8 / Math.sqrt( 2 ), 1 / Math.sqrt( 2 ), 1, 4, 1 ); // size of top can be changed

如果在继续之前旋转几何图形会更容易：

geometry.rotateY( Math.PI / 4 );

您可能想要重新计算 'flat' 着色的顶点法线：

geometry = geometry.toNonIndexed(); // removes shared vertices
geometry.computeVertexNormals(); // normals will be 'flat' normals

然后，当您创建网格时，您可以对其进行缩放：

mesh = new THREE.Mesh( geometry, material );

mesh.scale.set( width, height, depth );

three.js r.126

如何在 three.js 中创建 3D 梯形？

How to create 3D trapezoid in three.js?

3d

three.js

geometry

3d-modelling