Is it possible to incorporate faces from an array into a THREE.BufferGeometry?

My task is to create a Mesh using a BufferGeometry. Right now, my geometry is handled by a worker.

Worker: To begin with, I start by creating a Three.Geometry and then proceed to build my bufferGeometry before sending the data back to the main thread.

1.) The first step involves converting my geometry into a THREE.BufferGeometry

var bufferGeometry = new THREE.BufferGeometry().fromGeometry ( geometry );

2.) Following that, I obtain the BufferAttributes

var attributePosition = bufferGeometry.getAttribute(name);//name = position, color, normal)

3.) Then, I create a bufferArray

bufferArrayPosition.push(attributePosition);

4.) Finally, I send these arrays back to the main thread

postMessage([bufferArrayColor, bufferArrayNormal, bufferArrayPosition]);

Main-Thread: In the main thread, I reconstruct my bufferGeometry and convert it back to a THREE.Geometry

//receive messages from web worker
    worker.onmessage = function (e) {
        alert(e.data);

        var bufferGeometry = new THREE.BufferGeometry();
        var geometry = new THREE.Geometry();

        for (var i = 0; i < e.data[0].length; i ++){
            bufferGeometry.addAttribute('color', e.data[0][i].array, 3); 
            bufferGeometry.addAttribute('normal', e.data[1][i].array, 3);
            bufferGeometry.addAttribute('position', e.data[2][i].array, 3);

            var t = new THREE.Geometry().fromBufferGeometry(bufferGeometry);
            material.side = THREE.DoubleSide;
            mesh.push(new THREE.Mesh(t, material));
            Scene.scene.add(mesh[i]);
        }

    };

Unfortunately, the triangulate faces get lost in the process! All I have are standard face indices like (0,1,2), (3,4,5), ... This happens after some triangulation in the worker thread. The original faces still exist in the THREE.Geometry before the conversion to bufferGeometry (step 1).

How can I retain these faces in the bufferGeometry?

Answer №1

Two variations of buffer geometries exist:

  • Indexed Buffer Geometry:

    In indexed buffer geometries, positions are stored in the position buffer attribute, while indexes are stored in the index buffer attribute. Positions can be reused within an indexed buffer geometry.

  • Non-indexed (also referred to as triangle soup)

    In a non-indexed array, there is no index attribute; all positions are stored in the position buffer attribute, and every three consecutive points in the position attribute form one individual triangle.

If your original buffer geometry is indexed, you must ensure that your triangle definitions (i.e., the index array from the index attribute) are also sent back to the main thread to recreate the buffer geometry.

You can retrieve it from the buffer geometry using the getIndex method like this:

indexAttribute = bufferGeometry.getIndex();

UPDATE

Here is a fiddle illustrating geometry versus buffer geometry for a basic square.

// Information to send to the main thread from your worker:
positions = bufferGeometry.attributes['position'].array;
indices = bufferGeometry.index.array;

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

Ways to verify whether a callback function supplied as a parameter in Javascript has any arguments

My task involves implementing the following: doSomething .then(success) .catch(failure); The success and failure functions are callbacks that will receive their value at runtime (I am developing a module). Therefore, I need to ensure that the fa ...

Modifying the input field value in React

I've been attempting to modify the value of an input field after selecting an item from the SelectField in the MaterialUI library. Despite my efforts, I have not yet succeeded. However, based on my research, everything I have written appears to be cor ...

Endless Loop: AngularJS app.run() Promise caught in infinite cycle

I have a situation in my AngularJS app where I am using app.run() to check if a user is logged in before displaying the site to restrict access to non-registered users. Initially, I faced issues with the isLoggedIn function returning false when reloading t ...

Dynamically setting the default selection in a dropdown menu

When choosing a default value from a dynamically populated dropdown using JSON data, I attempted to use regCtrl.screeningTypeList[0] without success. <select ng-init="regCtrl.user.screeningType.screeningTypeId=regCtrl.screeningTypeList[0]" ng-model="re ...

Unable to transmit form information using HTML/JavaScript/Express Node application

I'm facing a challenge in developing an app that allows me to input event information and then display it on a map. I'm encountering difficulties at the initial stage when it comes to saving the data. Even though Chrome's Inspect tool indica ...

Converting a threejs animation from WebGL to Canvas

I have attempted to modify this threejs example (currently utilizing WebGLRenderer) to function with the CanvasRenderer: Here is the outcome of my efforts: After changing the renderer from WebGLRenderer to CanvasRenderer, I am facing an issue. Instead of ...

Ensuring User Information Persistence in React Upon Successful Login

I am developing a small application using React with PHP as the back-end. Within my database, I have two types of users - admin and student. Upon user login, I store their information in session storage like this ( user: { username:'abcxyz123', r ...

Saving functions in the localStorage API of HTML5: A step-by-step guide

I have encountered an issue while trying to store an array in local storage using JSON.stringify. The array contains functions (referred to as promises) within an object, but it seems that when I convert the array to a string, the functions are removed. Su ...

My goal is to monitor every action (button) that users take while using the PDF viewer

Each browser displays the view differently, and I am interested in monitoring specific user actions such as button presses on a PDF viewer. I am currently setting up an iframe and configuring its attributes. Is there a way to achieve this? ...

What is the best way to extend a class in NestJS from another class?

I've encountered an issue while attempting to extend a class service from another class service in NestJS and utilize DI to load it in a third service. The error message I'm receiving from Nest is: Error: Nest can't resolve dependencies of ...

Alter the shape of the semi-circle to be more elongated and ellipt

Check out my jsfiddle: http://jsfiddle.net/c4upM/103/ I have managed to create a gray arc and a blue/green arc. My goal is to make these arcs more Elliptic, like this: However, my attempts have not been successful so far. I came across this example: h ...

Is there a way to prevent a link from activating when I click on one of its internal elements?

Within a div nested inside an "a" tag (specifically in Link within next.js), there is another div labeled as "like." When clicking anywhere within the main div, the intention is for it to redirect to the destination specified by the "a" tag. However, if th ...

Mapping routes in ExpressJS

I am interested in developing a programmatic route generator. Within my project, I have a module called ./utils/crud.js structured as follows: const express = require('express'); const router = express.Router(); module.exports = function (Mode ...

Checking if the current time falls within a specific time range, without taking the year into account, using Javascript

I am looking to add a special feature using JavaScript. I would like to change the background images of my webpage to ones related to Christmas during the holiday week, and have it repeat every year. How can I determine if the current date and time fall ...

What is the best way to retain checkbox states after closing a modal?

I have a modal that includes multiple checkboxes, similar to a filter... When I check a checkbox, close the modal, and reopen it, the checkbox I clicked on should remain checked. (I am unsure how to achieve this :/) If I check a checkbox and then click t ...

A guide to building a dynamic form slider that showcases variable output fields with Javascript

I'm interested in creating a Slider Form that shows different output fields when sliding, using Javascript. Something like this: https://i.sstatic.net/3Isl4.png Could anyone provide suggestions on how to achieve this or share any links related to so ...

Struggling with Angular 8: Attempting to utilize form data for string formatting in a service, but encountering persistent page reloading and failure to reassign variables from form values

My goal is to extract the zip code from a form, create a URL based on that zip code, make an API call using that URL, and then display the JSON data on the screen. I have successfully generated the URL and retrieved the necessary data. However, I am strug ...

Incorrectly modifying the _locals property while rendering a MySQL result in Express/Node.js leads to the error: "Cannot assign to read only property '_

I am currently using Handlebars to display data retrieved from a MySQL query. The route is set up as shown below: var query = "SELECT col1, col2, col3 FROM table WHERE section >= " + start + " AND section <= " + end + " ORDER BY col1 ASC"; connecti ...

Tips for creating a targeted AJAX POST request using jQuery

When a user types and hits enter in a text box, a jQuery ajax post request is triggered. However, I want this ajax call to only trigger when the user types a specific message. I attempted to achieve this by using the following code: if(input == "Hello") ...

How to add 1 to the final element in a JavaScript

I'm currently working on a task that involves incrementing the last element in an array using pop() and push(). However, I'm facing an issue where the original values are being retained after I try to increment the popped array. The objective is ...