What is the process for creating facial geometry in threeJS using the scaledMesh output from face detection with TensorFlow in JavaScript?

I am trying to generate a 3D model of a detected face using ThreeJS and the Tensorflow library for detecting faces. However, when I utilize BufferGeometry to create the face geometry, the results are not as expected.

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

Below is the code snippet used for creating the geometry of the detected face:

(TRIANGULATION represents the scaledMesh property of the detected face object)

const verticesArr = new Float32Array(TRIANGULATION);
const geo = new THREE.BufferGeometry();
const bufferAttribute = new THREE.BufferAttribute(verticesArr, 3);
geo.setAttribute("position", bufferAttribute);
const mat = new THREE.MeshBasicMaterial({ wireframe: true });
const mesh = new THREE.Mesh(geo, mat);
scene.add(mesh);

Answer №1

To create a triangular mesh using Three.Mesh, you need an array of points called geo. Based on the image you provided, it appears that the data produced by tensorflow is actually a point cloud. In this case, utilizing the Three.Points class would be more appropriate for visualization.

const points = new THREE.Points( geo, mat);

If your goal is to render a surface mesh, there are various algorithms available for generating a mesh from a point cloud.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubles with importing/resolving components in Vue 3

Just starting out with Vue and following tutorials to learn. I've created a component called Header.vue and attempted to import it into App.vue. This is the setup: code structure Here is App.vue: <template> <Header /> </template&g ...

How can a key press be simulated without specifically targeting an element?

Is it possible to simulate a key press without targeting any specific element? I found this code snippet: var press = jQuery.Event("keypress"); press.ctrlKey = false; press.which = 75; $("whatever").trigger(press); The above code is used to simulate pres ...

Using THREE.js to generate a luminous array of spherical particles

Currently, I am working on a particle system that utilizes THREE.Points and THREE.ParticleBasicMaterial. To achieve the desired effect, all the points are being rendered as billboards using this specific .png image: https://i.sstatic.net/wlY4K.png Howev ...

Upon attempting to utilize Socket.io with Next.JS custom server, the server repeatedly restarts due to the error message "address already in

Every time I attempt to execute the refreshStock() function within an API endpoint /api/seller/deactivate, I encounter the following error: Error: listen EADDRINUSE: address already in use :::3000 at Server.setupListenHandle [as _listen2] (net.js:1318: ...

When using Codeigniter with AJAX dropdown menus, some issues may arise if form validation fails and the view gets redirected or reloaded

After the validation process fails and redirects back to the same controller index, an issue arises where the second dependent dropdown stops functioning. if (!$this->form_validation->run()) { $this->index(); } The form consi ...

Visualization of pie charts in Angular2 using Google library

Currently, I am in the process of building a web application using Angular2 that includes a Google pie chart. One of the components of the application is a Directive specifically designed for the pie chart. Below is the code snippet for the Directive: @D ...

Changing the size of a THREE.CubeGeometry during execution

Currently, I am working with Three.JS r58 and my goal is to dynamically resize a CubeGeometry object displayed on the screen. I attempted one approach where I would remove the affected cubes and add a new one with adjusted dimensions whenever resizing was ...

Issue with NodeJS SQL Login: Received error (ERR_HTTP_HEADERS_SENT): Headers cannot be set after being sent to the client

Hi there, I am fairly new to working with nodeJS and I have encountered an issue that I suspect lies within the second if statement inside "db.query..." in the code provided below. An error message showing ERR_HTTP_HEADERS_SENT]: Cannot set headers after ...

Transforming a plain text field into an input field upon clicking a button or icon using Angular/Typescript

I am a beginner with Angular 6 and I'm trying to implement functionality where clicking a button or icon will change a text field into an input field. See the snippet of code and expected output below. Thank you in advance. <div> <mat-for ...

The creation of the ESLint CLIEngine encountered some issues

Encountered an issue while setting up the ESLint CLIEngine - 'basePath' must be an absolute path Attempting to utilize eslint $ npx prettier-eslint **/*.js However, receiving the following error message: prettier-eslint [ERROR]: Encountered a ...

Having trouble with loading nested state in ui-router

Despite my efforts to find a solution online, I am stuck on a fairly basic issue. The router/index.html page I am working with appears to be correct, as there are no errors in the console. However, when the URL redirects to the login page, the entire page ...

The function loops through an array of objects and combines specific properties from the objects into a single string

I am currently working on creating a unique custom function that will loop through an array of objects and combine selected object property keys into a single string separated by commas. Let me explain using some code: var products = [ { "id": 1, ...

Tips for managing onClick code when a user selects "open link in new tab" within a React js environment

How can I ensure that my tracking code runs when a user clicks a button in my React project, even if they open it in a new tab? Is there a solution for this in React JS? Here's a simple example: var Hello = React.createClass({ render: function( ...

Require a Single Error Message When Two Fields Are Left Blank

I've been working on an asp.net contact form that includes fields for 'Tel No.' and 'Email'. I'm trying to set up one error message for when both of these fields are left blank upon form submission, but I just can't seem ...

Utilizing jQuery to detect the active tab in Bootstrap's nav-tabs

Here is the code for my Bootstrap navigation tabs: <div class="row spiff_tabs_body"> <!-- Nav tabs --> <ul class="nav nav-tabs spiff_tabs" role="tablist"> <li role="presentation" class="active" ...

"Implementing a feature in AngularJS where bootstrap modal utilizes the ENTER key press to trigger actions with two buttons,

I am working on a modal screen that allows users to create new publications and edit existing ones: <div class="modal-content"> <form role="form"> <div class="modal-header ng-scope"> <h3 class="modal-title">{{ items ...

The inability to access data from an API is a result of the lack of a functioning

I'm encountering an issue with fetching data from an API. When I try to map through my array of data, I receive an error message stating that 'map is not a function'. I fetched the data on the index page and passed it as props to the CoinLis ...

An issue has occurred: TypeError - It is impossible to access the 'forEach' property of an undefined object

Having trouble with a promise issue that I just can't seem to solve. Whenever I enter 'pizza' into the search bar and click search, the console displays an error message: TypeError: Cannot read property 'forEach' of undefined I&ap ...

Running two different wdio.config.js files consecutively

Is it possible to run two wdio.config.js files with different configurations, one after another? Here is how the first configuration file is defined in the code: const { join } = require('path'); require('@babel/register') exports.co ...

Troubleshooting: The JavaScript code is not functioning properly for the textarea field in my select form

Greetings, I have been tirelessly searching for a solution to my problem with no luck. Here is the issue at hand: I am trying to set up a message board where users can select pre-made templates from a drop-down menu filled with static HTML tags. The goal i ...