如何在three.js r68中制作矩形金字塔?

Roh*_*nde 2 javascript geometry three.js

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

我只需要能够

  • 纹理每个面孔
  • 旋转它使矩形面位于-y位置

提前致谢!

Wil*_*ilt 9

上述答案仅适用于具有相等边的基座的金字塔.如果你想要一个长方形的金字塔,你可以这样做:

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 )
];    
Run Code Online (Sandbox Code Playgroud)

现在你有一个金字塔几何体,其正方形底部1 x 1和高度为1.通过应用缩放矩阵,我们可以将此金字塔设置为任何所需的width/ length/ height组合:

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

geometry.applyMatrix( transformation );
Run Code Online (Sandbox Code Playgroud)

这也可以包装在自定义Pyramid几何类中,以便您可以像这样使用它:

new THREE.Pyramid( width, length, height );
Run Code Online (Sandbox Code Playgroud)


Roh*_*nde 5

正如@WestLangley所说,使用a 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 );
Run Code Online (Sandbox Code Playgroud)

作品完美!