Как создать трехмерную трапецию в three.js?

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.computeFlatVertexNormals();

Затем, когда вы создаете сетку, вы можете масштабировать ее:

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

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

three.js r.91