Trilateration of three-dimensional points using K vertices on each face

Question

Trilateration of three-dimensional points using K vertices on each face

I'm currently working on a project using Three.js and I have a set of 3D points in the form of (x, y, z) coordinates, as well as a series of faces. Each face consists of K points and can be either convex or concave in shape. Despite consulting the documentation for Three.js, I haven't been able to find a suitable solution for my needs. One potential approach could involve triangulating these shapes, although I have yet to come across a straightforward 3D triangulation algorithm.

Alternatively, I could explore an option like this :

var pointsGeometry = new THREE.Geometry();

pointsGeometry.vertices.push(new THREE.Vector3(10, 0, 0));
pointsGeometry.vertices.push(new THREE.Vector3(10, 10, 0));
pointsGeometry.vertices.push(new THREE.Vector3(0, 10, 0));
pointsGeometry.vertices.push(new THREE.Vector3(1, 3, 0));
pointsGeometry.vertices.push(new THREE.Vector3(-1, 3, 0));
pointsGeometry.vertices.push(new THREE.Vector3(10, 0, 0));

var material = new THREE.MeshBasicMaterial({color: 0x00ff00});

var mesh = new THREE.Shape/ShapeGeometry/Something(pointsGeometry, material);
group.add(mesh);

scene.add(group);

There are numerous shapes that combine to create a closed surface in this manner.

Any recommendations or insights would be greatly appreciated.

Thank you for your time. Have a wonderful day.

javascript three.js geometry shapes triangulation

Answer 1

Answer №1

There are two ways to achieve the desired outcome, as you rightly pointed out:

One option is to utilize a 3D triangulation algorithm (which is not provided by Three.js).
Alternatively, you can use the 2D triangulation algorithm typically used for Three.js Shape objects and apply some transformations to each face of the geometry.

Although the second method may seem promising, upon trying it out, I discovered that it is not as straightforward as anticipated. It is somewhat similar to what Paul-Jan mentioned:

Here's a breakdown of the process for each face of your geometry:

Calculate the centroid of the face.
Determine the face normal.
Create the matrix of the face.
Project the 3D points onto the 2D plane of the face.
Construct the geometry (triangulated using the Shape triangulation algorithm).
Apply the face matrix to the newly created geometry.
Create a Mesh and add it to an Object3D (attempting to merge all geometries into one might fail with the ShapeBufferGeometry).

You can view an example of this in action on this fiddle.

Ensure you pay attention to the winding order of your vertices or set the THREE.Material.side to THREE.DoubleSide to prevent faces from being culled.

Answer 2

There are two ways to achieve the desired outcome, as you rightly pointed out:

One option is to utilize a 3D triangulation algorithm (which is not provided by Three.js).
Alternatively, you can use the 2D triangulation algorithm typically used for Three.js Shape objects and apply some transformations to each face of the geometry.

Although the second method may seem promising, upon trying it out, I discovered that it is not as straightforward as anticipated. It is somewhat similar to what Paul-Jan mentioned:

Here's a breakdown of the process for each face of your geometry:

Calculate the centroid of the face.
Determine the face normal.
Create the matrix of the face.
Project the 3D points onto the 2D plane of the face.
Construct the geometry (triangulated using the Shape triangulation algorithm).
Apply the face matrix to the newly created geometry.
Create a Mesh and add it to an Object3D (attempting to merge all geometries into one might fail with the ShapeBufferGeometry).

You can view an example of this in action on this fiddle.

Ensure you pay attention to the winding order of your vertices or set the THREE.Material.side to THREE.DoubleSide to prevent faces from being culled.

Answer 3

Answer №2

It may be beneficial to revisit the Three.js documentation, with a specific focus on the Shape object. The code example provided utilizes the `bezierCurveTo` method, however, by employing the `lineTo` method as suggested in the documentation, it is possible to generate concave polygons (including holes) by inputting sequences of points.

Answer 4

It may be beneficial to revisit the Three.js documentation, with a specific focus on the Shape object. The code example provided utilizes the `bezierCurveTo` method, however, by employing the `lineTo` method as suggested in the documentation, it is possible to generate concave polygons (including holes) by inputting sequences of points.

Trilateration of three-dimensional points using K vertices on each face

Answer №1

Answer №2

Similar questions

VueJS Components experiencing issues with displaying images

New patch request received in Google Sheets, replacing the existing post request

Discover the process of selecting an item from a list and viewing it on a separate page with the help of AngularJS and Ionic technology

Navigating the translation URL in a Node.js Express app

Is there a way to prevent the omission of zeros at the end in JavaScript when using Number.toString(2)?

Sending data from a React application to a Node.js server using Axios

Plotting only the initial and final point on Google Maps using API

Showing Stationary Pictures at Full Size in OpenLayers

Using callback functions to handle parameters in GET requests

Why is the time input field in AngularJS programmed to expect a date instead?

Having trouble deciphering the JSON data structure in JavaScript

The Node API is unresponsive when using Postman or accessing through the browser, as it is not returning any status code. However, no errors are displayed when

Creating an image gallery with animated effects: A step-by-step guide

Javascript is handling the JSON Request flawlessly, however, when using Nodejs, an error is encountered with a status

FilterService of PrimeNg

Using CSS3 translate will result in children becoming relatively positioned

Error in AngularJS: Unable to access property 'get' as it is undefined

What are the steps to execute a filter operation on a table by utilizing two select box values with jQuery?

When using Express.js for file uploading, it is important to first verify that a file has been sent, set a maximum file size limit, and ensure

Refusing to include two values due to the presence of a comma in JavaScript