What is the best method to combine two BufferGeometries into a single BufferGeometry using Three.JS?

Wondering how to combine two buffer geometries into a single THREE.BufferGeometry in ThreeJS?

var mergedGeometry = null;

geometry = new THREE.CylinderGeometry(10, 10, 10);

if (mergedGeometry === null) {
    mergedGeometry = new THREE.BufferGeometry().fromGeometry(geometry);
    console.log(mergedGeometry);
}

bufferGeometry = new THREE.SphereBufferGeometry(20, 20, 20);

var mesh = new THREE.Mesh(bufferGeometry, material);

mergedGeometry.merge(mesh.geometry, mesh.matrix);

It seems like nothing is happening with mergedGeometry. How can we properly merge these geometries?

javascriptmergethree.jsbuffer-geometry

Answer №1

Interestingly, when I attempted to use merge() on a BufferGeometry, I encountered some unexpected errors. However, I discovered a workaround:

  1. Combine two Geometry objects;
  2. Transform them into a BufferGeometry;
  3. Attach them to a Mesh

Here is the solution that worked for me:

    var modelGeometry = new THREE.Geometry();

    cylGeometry = new THREE.CylinderGeometry( 10, 10, 10 );

    // if (modelGeometry == null)
    // {
    //     modelGeometry = new THREE.BufferGeometry().fromGeometry(geometry);
    //     console.log(modelGeometry);
    // }

    modelGeometry.merge(cylGeometry);

    sphereGeometry = new THREE.SphereGeometry( 20 , 20, 20 );

    modelGeometry.merge(sphereGeometry);

    bufGeometry = new THREE.BufferGeometry().fromGeometry(modelGeometry);

    var mesh = new THREE.Mesh( bufGeometry, material );

    scene.add(mesh);

Answer №2

I love dancing until the break of dawn. Mission accomplished!

totalPosArr = new Float32Array(poslen);
totalNormArr = new Float32Array(normlen);
totalUvArr = new Float32Array(uvlen);

var totalPosArray = new Array();

posIndex = 0;
normIndex = 0;
uvIndex = 0;

for (x = 0; x < shapes.length; x++)
{
    var positionArray = shapes[x].geometry.getAttribute('position').array;

    for (y = 0; y < positionArray.length; y++)
    {
        totalPosArr[y + posIndex] = positionArray[y];
    }

    posIndex += positionArray.length;


    var normalArray = shapes[x].geometry.getAttribute('normal').array;

    for (y = 0; y < normalArray.length; y++)
    {
        totalNormArr[y + normIndex] = normalArray[y];
    }

    normIndex += normalArray.length;


    var uvArray = shapes[x].geometry.getAttribute('uv').array;

    for (y = 0; y < uvArray.length; y++)
    {
        totalUvArr[y + uvIndex] = uvArray[y];
    }

    uvIndex += uvArray.length;

}

modelGeometry.addAttribute('position', new THREE.BufferAttribute(totalPosArr, 3 ));
modelGeometry.addAttribute('normal', new THREE.BufferAttribute(totalNormArr, 3 ));
modelGeometry.addAttribute('uv', new THREE.BufferAttribute(totalUvArr, 2 ));

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

Problem with the render() function in React

I am encountering an issue while trying to retrieve data from an endpoint. A error keeps popping up, mentioning that my render method contains an unexpected token. I would appreciate any assistance. Additionally, I am unsure if I am handling the brackets ...

javascriptreactjsfetch-api

PageCallbacks in .NET 1.1

Is it possible to utilize PageMethods in .NET 1.1 for making server-side method calls from the client side? Could you provide a brief explanation on how to use this feature by calling PageMethods.MyMethod(); ? ...

javascriptasp.netajaxjquery

Is there a way to delete added information using a trigger that has been inserted through ajax?

I created a function in jQuery and Ajax to add information from a separate PHP file to another file. Let's name the destination file "Homepage" and the file with the data "Template". Here is the function I used: var box = $('#infoPageContainer& ...

javascriptphpjqueryajax

Tips for updating information when a button is chosen

Hello everyone, I need some help with a form that has three select buttons. The button labeled "Distribute" is already selected when the page loads, and it contains information about full name, password, and location. How can I use JavaScript to create a c ...

javascripthtmlcss

Tips for effectively utilizing Vuelidate to display errors selectively after the user has completed input:

I have implemented a form using Bootstrap-Vue with some Vuelidation code applied to it. <b-form @submit.prevent="onSubmit"> <input type="hidden" name="_token" :value="csrf" /> <transition-group name="fade"> <b-form ...

javascriptvue.jsbootstrap-vuevuelidate

Vue.js powered search bar for exploring countries worldwide (utilizing the restcountries API)

Despite successfully loading the API country data (as evidenced by the console.log() entry and the accompanying picture of my work desk), the country information does not display when hovering the mouse cursor over the search bar field (expecting a dropdow ...

javascriptvue.jssearchbarcountries

JavaScript validation controls do not function properly when enabled on the client side

Following the requirements, I have disabled all validation controls on the page during the PageLoad event on the server side. When the submit button is clicked, I want to activate the validations and check if the page is valid for submission. If not, then ...

asp.netjavascriptasp.net-2.0

Exploring the Utilization of FormData and form.serialize within the Data Parameter of Ajax Jquery

My form includes a multiupload uploader for files, structured like this : <div class="col-md-4"> <div class="form-group"> <label class="control-label col-md-3">Location</label> <div class="col-md-9"> <?php ...

javascriptphpjqueryajax

Converting date format from d-mmm-yyyy to yyyy-mm-d using Angular 2

How can I convert the date format from d-mmm-yyyy to yyyy-mm-d using Angular 2's datepipe? I need to change dates like 1-Nov-2019 to 2019-11-1 or 15-Dec-2018 to 2018-12-15 It's essential that I achieve this transformation using the built-in fun ...

javascriptangulartypescriptdate

Inquiries about the jQuery Button Timer

Currently experimenting with jQuery to create a timer. Everything seems to be in place and the Stop Timer button is functioning properly. However, I'm facing issues with the Start Timer and Reset Timer buttons as they are not working as expected. Seek ...

javascripthtmljquery

JavaScript's Math.round function does not always produce accurate results

After adding the specified line within the function, the code seems to encounter issues. parseLocalFloatCnt: num = Math.round(num*1.2); Is there a solution available for this problem? Your help is much appreciated. <!DOCTYPE html> <html> < ...

javascriptjqueryhtml

What is the most efficient way to retrieve key pair values of separate elements in an array with just one API request?

The API I am working with returns an array of elements, each containing multiple key-value pairs. An example of a similar API response can be seen here: , where an array of poems is returned. [ { "title": "...." "content": "..." "url" : "..." } ...

javascripthtml

Incorporate a horizontal scrollbar feature within an HTML section

Currently, I am in the process of learning vue js and would like to create a layout that includes two sections. The first section should occupy 3 grids on the screen, be fixed, and not scrollable, with a division into 4 vertical parts. The second section s ...

javascripthtmlcssvue.jsscrollbar

Connect the mileage tracker to a Datalist or grid view component

I recently downloaded the Odometer Sample from , however, I am facing an issue where only the first element in the Datalist is getting the Odometer display, while others are not displaying it. Here is the snippet of code: <script type="text/javascript" ...

javascriptjqueryasp.netvisual-studio-2010css

Display a delete icon when hovering over a Chip component from Material-ui

Recently, I've been exploring ways to implement the on-hover functionality for a chip. What I'm looking for is when I hover over a chip in an array of chips, it should display a delete icon. Below is the code snippet I've been working on: ...

javascriptreactjsmaterial-ui

Converting an array of date strings to a single string in JavaScript

Here is the JSON format I received with dynamic data: {"range":["2018-07-23T16:03:26.861Z","2018-07-23T16:03:26.861Z"]} Now, I need to convert this into the following format: range(20180723,20180723) Below is my code snippet : var data:Date[] = {"rang ...

javascriptangulartypescript

Guide to presenting a personalized date format in an Angular table by utilizing the gantt-tooltip attribute

How can I customize the date format displayed in the tooltip to only show the month and day (e.g. Sep 01) within an Angular Gantt table? Currently, the date is being shown in the default format "MMM DD, HH:mm". Can anyone assist me in resolving this issue ...

javascriptangularjs

Is there a way to transpile a dependency within the node_modules directory when using Nuxt 2?

I have come across challenges when transpiling node_modules with Nuxt, but the latest version of Nuxt (2.0) seems to have addressed this issue by introducing a transpile option in the nuxt.config.js file. https://nuxtjs.org/api/configuration-build/#transp ...

javascriptvue.jsbabeljsnuxt.jsnuxt-edge

Collapse dropdown menus upon clicking outside of them

As a newcomer to coding, I'm trying to figure out how to create multiple dropdown menus where each one collapses when you click outside of it. I've been struggling with the code I wrote for weeks now - I want to have 3 dropdown menus but only one ...

javascriptjqueryhtmlcss

Typescript implementation for structuring JSON response data from API calls

As a beginner in Typescript, I am eager to create a straightforward weather application using Firebase functions. One of the initial steps involves making an API call to fetch the current temperature of a particular city. Upon making the API call, the JSO ...

javascriptjsonfirebasegoogle-cloud-firestore