Utilizing a specific set of 3D coordinates to position a Polygon in ThreeJS

Question

Utilizing a specific set of 3D coordinates to position a Polygon in ThreeJS

Creating a polygon (wall) in 3D space using Three.JS has been quite challenging for me.

I need to add thickness to my wall, which is why I want to utilize ExtrudeGeometry. Additionally, the number of points can vary from three to infinite, ruling out a simple BoxGeometry.

Take a look at this example: https://i.sstatic.net/QB4sj.png

Assuming the given points are always on the same plane and moving clockwise from bottom left, here are the coordinates of the green points:

[
  [1, 0, -1],
  [1, 3, -1],
  [5, 3, -4],
  [5, 0, -4],
]

The challenge arises because Shape works with 2D points. In a 2D plane, it looks like this:

const shape = new THREE.Shape();
shape.lineTo(0, 0);
shape.lineTo(0, 5);
shape.lineTo(5, 5);
shape.lineTo(5, 0);

const geometry = new THREE.ExtrudeGeometry(shape, { steps: 1, depth: 1 });
const material = new THREE.MeshStandardMaterial();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

The current solution involves rotating the points to a 2D plane, creating the shape, and then rotating the geometry back. This method feels overly complicated, especially if rotation about multiple axes is required.

Is there a simpler way to position a polygon in 3D space based on a set of three or more points?

javascript three.js

Answer 1

Answer №1

At the beginning of this discussion, you can find the initial part of the answer: as mentioned by @prisoner849 in the comment.

Prior to utilizing reverseQuaternion, it's important to note that when creating a Shape, the Z coordinate of each point in the ShapeGeometry defaults to 0. This is because the Shape constructor utilizes Vector2[] values instead of Vector3[]. Therefore, after applying the quaternion for the first time, the Z coordinate needs to be updated:

const tempPoints = [];
points.forEach(p => {
  tempPoints.push(p.clone().applyQuaternion(quaternion));
});
const z = tempPoints[0].z; // z coordinate will remain constant for all points
const shape = new Shape(tempPoints); // although they are treated as Vector2[] values, not Vector3[] values

... proceed to apply this updated Z value to each vertex:

const geometry = new ShapeGeometry(shape);
const position: Float32BufferAttribute = geometry.attributes['position'];
for (let i = 0; i < position.array.length; i++) {
  position.setZ(i, z);
}
position.needsUpdate = true;

... finally, don't forget to use reverseQuaternion on the geometry or mesh containing the geometry in order to achieve the correct positioning of your mesh.

Answer 2

At the beginning of this discussion, you can find the initial part of the answer: as mentioned by @prisoner849 in the comment.

Prior to utilizing reverseQuaternion, it's important to note that when creating a Shape, the Z coordinate of each point in the ShapeGeometry defaults to 0. This is because the Shape constructor utilizes Vector2[] values instead of Vector3[]. Therefore, after applying the quaternion for the first time, the Z coordinate needs to be updated:

const tempPoints = [];
points.forEach(p => {
  tempPoints.push(p.clone().applyQuaternion(quaternion));
});
const z = tempPoints[0].z; // z coordinate will remain constant for all points
const shape = new Shape(tempPoints); // although they are treated as Vector2[] values, not Vector3[] values

... proceed to apply this updated Z value to each vertex:

const geometry = new ShapeGeometry(shape);
const position: Float32BufferAttribute = geometry.attributes['position'];
for (let i = 0; i < position.array.length; i++) {
  position.setZ(i, z);
}
position.needsUpdate = true;

... finally, don't forget to use reverseQuaternion on the geometry or mesh containing the geometry in order to achieve the correct positioning of your mesh.

Utilizing a specific set of 3D coordinates to position a Polygon in ThreeJS

Answer №1

Similar questions

The expo-location feature is failing to accurately record and store all of the positions within the array

Leveraging Node.js to establish a connection between two pug files

Accordion is having trouble expanding fully

Error in Asp.net: 'test' is not defined in Microsoft JScript runtime

Creating an event emitter instance

Trigger a keypress event following the activation of a button

Guide on looping through an array of objects and eliminating each item using JavaScript

What is the reason for needing to refresh when submitting form data in a Node application with an HTTP POST

The quality of Three.js models is subpar

PDF Embed Whitelist

There seems to be an issue with the bootstrap datepicker as it is throwing an error stating that $(

The synchronization of sessions between Socket.IO and Express is proving to be a challenge as

Getting a user's group name from Azure Active Directory in an Angular application - a step-by-step guide

The TextGeometry and PointCloud components work together to create dynamic

What is the best way to import code snippets from THREE.js examples?

How can we enable a sitemap for web crawlers in a nodejs/express application?

Cyber-election platform

Once an item is added, the table vanishes into thin air

What is the best way to merge two sets of data in JavaScript?

I aim to cross-reference words within a matrix, yet I struggle to pinpoint every word in all eight directions in the matrix