如何在Three.js中制作棱柱体？

Question

我正在使用 Three.js，我正在尝试制作一个金字塔，但其顶部被切掉，其底部是一个矩形，顶部也是一个矩形，但比例不同。

这是来自维基百科的图片，但我希望它允许矩形底座

我认为它的词是棱柱体，但在我的例子中，底座不是正方形，而是矩形。我想做的另一件事是让顶部不以底部为中心，这样我就可以创建像平行六面体这样的东西

• https://en.wikipedia.org/wiki/Prismatoid
• https://en.wikipedia.org/wiki/Frustum
• https://en.wikipedia.org/wiki/Parallelepiped

我研究了 CylinderGeometry 和 PolyhedronGeometry，但它们都要求底边长度相同。

制作这些形状最有效的方法是什么？

Answer 1

如果由于某种原因您不想创建这样的形状，例如在

Blender

（这对我来说似乎是最简单的解决方案）。您可以简单地手动修改面和顶点。只需调整顶点即可获得您想要的形状。取消注释顶点，您就会明白我的意思...

const vertices = [
    new THREE.Vector3(-1.5, -1, -1),
    new THREE.Vector3(1.5, -1, -1),
    new THREE.Vector3(1.5, -1, 1),
    new THREE.Vector3(-1.5, -1, 1),
    new THREE.Vector3(-1, 1, -0.5),

    // Top rectangle 
    new THREE.Vector3(1, 1, -0.5),
    new THREE.Vector3(1, 1, 0.5),
    new THREE.Vector3(-1, 1, 0.5)
];

// for example:

// vertices[1].y += 0.2;
// vertices[6].y += 0.2;
// vertices[4].y -= 0.2;
// vertices[7].y -= 0.2;

const faces = [
    [0, 1, 4],
    [1, 2, 5],
    [2, 3, 6],
    [3, 0, 7],
    [1, 0, 3],
    [3, 2, 1],
    [5, 2, 1],
    [5, 6, 2],
    [7, 6, 3],
    [7, 3, 0],
    [4, 5, 6],
    [4, 6, 7]
];

const geometry = new THREE.BufferGeometry();
const verticesArray = [];
vertices.forEach(function(vertex) {
    verticesArray.push(vertex.x, vertex.y, vertex.z);
});
geometry.setAttribute('position', new THREE.Float32BufferAttribute(verticesArray, 3));

const indices = [];
faces.forEach(function(face) {
    indices.push(face[0], face[1], face[2]);
});
geometry.setIndex(indices);

const material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true });
const pyramid = new THREE.Mesh(geometry, material);
scene.add(pyramid);