3d - 如何在 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 );

您可能想要重新计算“平面”着色的顶点法线:

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