CODEWITHSUNDEEP
javascriptthree.jsgeometry
Rohan Deshpande
Rohan Deshpande

Reputation: 694

How to make a rectangular pyramid in three.js r68?

I'm on r68 and I'm trying to find an example of someone creating a rectangular pyramid which I can apply THREE.MeshFaceMaterial() to, most of the examples seem fairly out of date and throw errors with my current build.

I just need to be able to

Thanks in advance!

Upvotes: 2

Views: 9895

Answers (3)

Wilt
Wilt

Reputation: 44316

The accepted answer works only for pyramids with a base that has equal sides. In case you want a pyramid with a rectangular foot you can do like this:

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 )
];

Now you have a pyramid geometry with a square base of 1 x 1 and a height of 1. By applying a scaling matrix we can make this pyramid to any desired width/length/height combination:

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

geometry.applyMatrix( transformation );

This can also be wrapped in a custom Pyramid geometry class so you can use it like this:

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

Upvotes: 12

Hitesh Sahu
Hitesh Sahu

Reputation: 45052

Use ConeBufferGeometry geometry and change radialSegments to 4

BufferGeometry are faster than normal Geometry

Other parameters you can tweak:

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

Result:

enter image description here

Live Demo:

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

Upvotes: 3

Rohan Deshpande
Rohan Deshpande

Reputation: 694

As @WestLangley stated, using a THREE.CylinderGeometry() to do this is the correct way, here's how I did mine 

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 );

Works perfect!

Upvotes: 6

Related Questions