如何在three.js r68中制作一个矩形金字塔？答案

【问题标题】：How to make a rectangular pyramid in three.js r68?如何在three.js r68中制作一个矩形金字塔？
【发布时间】：2019-08-15 01:12:10
【问题描述】：

我在 r68 上，我正在尝试找到一个创建矩形金字塔的示例，我可以将其应用 THREE.MeshFaceMaterial() 到，大多数示例似乎已经过时并且在我当前的构建中抛出错误.

我只需要能够

纹理化每张脸
旋转它，使矩形面位于 -y 位置

提前致谢！

【问题讨论】：

您可以使用CylinderGeometry创建一个矩形金字塔。
最终是否有 5 个顶点？
试一试，如果有问题，请发布您的代码。

标签： javascript three.js geometry

【解决方案1】：

接受的答案仅适用于底边相等的金字塔。如果你想要一个矩形脚的金字塔，你可以这样做：

var geometry = new THREE.Geometry();

geometry.vertices = [
    new THREE.Vector3( 0, 0, 0 ),
    new THREE.Vector3( 0, 1, 0 ),
    new THREE.Vector3( 1, 1, 0 ),
    new THREE.Vector3( 1, 0, 0 ),
    new THREE.Vector3( 0.5, 0.5, 1 )
];

geometry.faces = [
    new THREE.Face3( 0, 1, 2 ),
    new THREE.Face3( 0, 2, 3 ),
    new THREE.Face3( 1, 0, 4 ),
    new THREE.Face3( 2, 1, 4 ),
    new THREE.Face3( 3, 2, 4 ),
    new THREE.Face3( 0, 3, 4 )
];

现在您有了一个底边为1 x 1 且高度为1 的金字塔几何图形。通过应用缩放矩阵，我们可以使这个金字塔成为任何所需的width/length/height 组合：

var transformation = new THREE.Matrix4().makeScale( width, length, height );

geometry.applyMatrix( transformation );

这也可以封装在自定义的Pyramid 几何类中，这样您就可以像这样使用它：

new THREE.Pyramid( width, length, height );

【讨论】：

【解决方案2】：

正如@WestLangley 所说，使用THREE.CylinderGeometry() 这样做是正确的方法，这就是我的做法

var geometry = new THREE.CylinderGeometry( 1, TILE_SIZE*3, TILE_SIZE*3, 4 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00 , wireframe:true} );
var cylinder = new THREE.Mesh( geometry, material );
this.scene.add( cylinder );

完美运行！

【讨论】：

【解决方案3】：

使用 ConeBufferGeometry 几何并将radialSegments更改为4

BufferGeometry 比普通 Geometry 更快

您可以调整的其他参数：

ConeBufferGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)

结果：

现场演示：

https://threejs.org/docs/#api/en/geometries/ConeBufferGeometry

【讨论】：