Creating a Prismoid Shape Using Three.js

Question

Creating a Prismoid Shape Using Three.js

Currently, I am utilizing Three.js and my objective is to construct a pyramid shape with its apex removed. The base of the pyramid should be a rectangle instead of a square, while the top should also be a rectangle, but not in equal proportions.

Here is an image from Wikipedia for reference, although I am aiming to customize it to accommodate rectangle bases:

https://i.sstatic.net/jtNthKLF.png

I believe the term for this modified shape is Prismoid, except in my design the base will be rectangular rather than squared. Additionally, I intend to have the apex positioned off-center from the base to create shapes like Parallelepiped.

My exploration led me to CylinderGeometry and PolyhedronGeometry, however, both necessitate that all sides of the base are of equal length.

What method would you recommend as the most efficient approach to creating these complex shapes?

javascript three.js 3d geometry

Answer 1

Answer №1

In case you prefer not to generate a shape using tools like Blender (which is the method I find simplest), you have the option to manually adjust vertices and faces to achieve the desired shape. Experiment with the vertices by uncommenting them to visualize the changes...

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

// Sample adjustments:

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

Answer 2

In case you prefer not to generate a shape using tools like Blender (which is the method I find simplest), you have the option to manually adjust vertices and faces to achieve the desired shape. Experiment with the vertices by uncommenting them to visualize the changes...

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

// Sample adjustments:

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

Answer 3

Answer №2

After much effort and a complex process, I successfully resolved this issue with the help of @Łukasz D. Mastalerz!

Below is the code snippet:

function createGeometry(width, depth, height, widthTop, depthTop, posTop = new THREE.Vector3(0, 0, 0)) {
    // Function logic here...
}

To begin, define the positioning of vertices in the vertices array.
Next, establish the faces in the indices array, ensuring adherence to the right-hand rule for point declaration.
The most challenging part was configuring the UVs in the uvs array. Assign two float values between 0 and 1 to each point in every triangle, without using indexing, requiring the use of toNonIndexed().

Once done, combine all elements to create a prismoid geometry that can handle parallelepipeds as well.

Answer 4

After much effort and a complex process, I successfully resolved this issue with the help of @Łukasz D. Mastalerz!

Below is the code snippet:

function createGeometry(width, depth, height, widthTop, depthTop, posTop = new THREE.Vector3(0, 0, 0)) {
    // Function logic here...
}

To begin, define the positioning of vertices in the vertices array.
Next, establish the faces in the indices array, ensuring adherence to the right-hand rule for point declaration.
The most challenging part was configuring the UVs in the uvs array. Assign two float values between 0 and 1 to each point in every triangle, without using indexing, requiring the use of toNonIndexed().

Once done, combine all elements to create a prismoid geometry that can handle parallelepipeds as well.

Creating a Prismoid Shape Using Three.js

Answer №1

Answer №2

Similar questions

Issue with Date Picker not properly storing selected date in MySQL database

Guide to arranging components in two columns using VueJS Vuetify Grid

405 status code returned for CORS request

Adding the classname "active" in ReactJS can be achieved by utilizing the `className` attribute within

Using Typescript to iterate through an array of objects and modifying their keys using the forEach method

Click the div to fold it

Updating the text of one option within a selected option using jQuery while iterating through each element in a function

Creating custom methods or functions within imported models in Sequelize: A guide

Obtain the input elements and attach a click event to them

In Angular 8 Router, the original parent route will remain unchanged even when navigating to a route with a different parent route

Guide on integrating the reload feature in a React Native Expo app for production environments

Ways to retrieve the value of a field using ng-change

Inform the PHP backend that the browser has been closed by the frontend Angular application

I included an onPress prop where I am triggering a handleEvent function, but unfortunately no output is being displayed within the method

Troubleshooting the 'npm ERR! ERESOLVE could not resolve' and 'peer dependency' issues: A guide to fixing the ERESOLVE error in npm

Finding your way to a particular section within a webpage through an external source

Is it considered fundamentally inappropriate to call $scope.$digest within $scope.$on?

Issue with Laravel: unable to send data through ajax requests

Using lambda expressions to sort through an array of objects in React

Why does the process of joining and replacing elements in a character array using the JavaScript functions stop when it reaches the "<" character?