Tips for combining Meshes and Textures seamlessly

I am faced with a situation where I have multiple meshes, each with its own unique texture. My goal is to combine these meshes into one:

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

Surprisingly, this process works seamlessly.

However, when I attempt to place the merged mesh into the scene, the information regarding the individual textures on each mesh is lost:

mergedGeo.computeFaceNormals();
group = new THREE.Mesh( mergedGeo, new THREE.MeshBasicMaterial({ color: parseInt("ffffff", 16) }));
group.matrixAutoUpdate = false;
group.updateMatrix();
scene.add( group );

At the time of writing, I am utilizing Revision 68.

javascriptthree.js

Answer №1

Ensure that each face is assigned the correct material index.

To merge your geometries, follow this pattern and increase the materialIndexOffset by one each time, starting from 0:

mergedGeo.merge( mesh.geometry, mesh.matrix, materialIndexOffset );
...

Next, create an array of materials:

var materials = [];
materials.push( material1 );
materials.push( material2 );
....

Finally, build your mesh:

mesh = new THREE.Mesh( mergedGeo, new THREE.MeshFaceMaterial( materials ) );

Version: three.js r.68

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

Is it possible to use velocity js to add a gradient color effect to text content?

Can I use velocity js to apply gradient color to text? I've looked at https://css-tricks.com/snippets/css/gradient-text/ My specific need is to dynamically add a changing gradient using js. Thank you in advance. ...

javascripthtmlcssvelocity.js

Encountering an Error when Integrating Pusher (real-time data library) with Next.js: PusherRequestError - Unexpected status code 400

I encountered an issue while trying to integrate Pusher into my Next.js application due to Vercel's restriction on websockets in their serverless functions. The error message I keep receiving after running the program with Pusher is: error - unhandled ...

javascriptwebsocketnext.jspushervercel

What is the process for customizing a form in the "add event" feature of wdCalender?

I am looking to customize the form in wdCalendar to add events with fields like first name and last name instead of "what". I need to modify the quickadd function in jquery.calendar.js, which is triggered when a user clicks on the calendar to add an event. ...

javascriptjqueryajaxcalendar

Unable to establish a local dependency link with npm

Attempting to connect my local project testabc123 to myproject using the usual method: cd testabc123 npm link cd ../myproject npm link testabc123 However, encountering an error message: npm ERR! code E404 npm ERR! 404 Not Found - GET http://registry.npmjs ...

javascriptnpmnpm-link

Using jQuery to modify the CSS of a div located outside of an iframe

Currently, I am developing a straightforward script. Firstly, here is all of the code that I have: <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> function SuperWebF1() { $("#outerd ...

javascriptjqueryhtmlcssiframe

Combining Asynchronous and Synchronous Operations in a Function: Using Cache and Ajax Requests in JavaScript

I am currently exploring how to combine two different types of returns (async / sync) from a function that is structured like this : retrieveVideo(itemID){ let data = localStorage.getItem(itemID) if ( data ) { return data; } else{ axios.ge ...

javascriptreactjsaxiosarchitectural-patterns

No results appearing in the output section

While developing a website using React, I encountered an error that said useState is defined but never used in the navbar component. To address this, I made changes to my ESLint configuration in the package.json file: "rules": { "eqeqe ...

javascriptreactjscreate-react-appeslint

Issue with AJAX loading functionality not functioning properly in Internet Explorer

For a project, I have a portfolio that I need to create. The front page consists of a div with a loader which determines the screen size upon landing and selects the content to be pulled in using ajax. The reason for this approach is due to the simplicity ...

javascriptajaxinternet-explorerjquery

What is the significance of authors stating "AngularJS compiles the DOM"?

Currently, I am diving into the book Lukas Ruebbelke's AngularJS in Action, The author emphasizes throughout the text that, In AngularJS, a view is essentially the modified version of HTML after it has been processed by AngularJS. I'm struggli ...

javascriptangularjs

Inject a directive attribute dynamically into an element using another directive, and ensure the initial directive is set to 'active.'

Let me explain in more detail. I am utilizing the tooltip directive from the UI Bootstrap suite, which allows me to attach a tooltip to an input element like this: <input type="text" ng-model="inputModel" class="form-control" placeholder=" ...

javascriptangularjstwitter-bootstrapangularjs-directive

Leverage the power of express-session in your NextJS project

Currently, I am working on developing a login system using NextJS and MySQL. I am looking to implement sessions for user login, but I am unsure of how to integrate express-session with NextJS. Can anyone provide guidance on whether express-session can be ...

javascriptnode.jsexpressnext.jsexpress-session

How can I ensure that my shader size matches the world coordinates in TREE.JS / GLSL?

Why is it so challenging to align shader particle size with world coordinates? verts.push(new THREE.Vector3(-2.0, 0.0, 0.0)); colors.push(0.0, 1.0, 0.0); size.push(1.0); var geometry = new THREE.BufferGeometry().setFromPoints(verts); geometry.addAttribu ...

three.js3dglslshaderscale

Combining two arrays of objects using JavaScript

I am working with two arrays of objects that look like this: objects [ { countMedias: 2 }, { countMedias: 1 }, { countMedias: 3 }, { countMedias: 1 }, { countMedias: 2 } ] listePlayliste [ { nom_playlist: 'bbbb' }, { nom_playlist: &apo ...

javascriptarraysjsonobjectmerge

Show the loader animation until the browser's loading icon stops spinning

My website receives a high volume of traffic and pulls data from several servers to display on the page. It typically takes 3-4 minutes for the entire page to finish loading. Here is a preview of some of the partial page data: https://i.sstatic.net/br4sr. ...

javascriptphpjqueryhtml

Ways to expand the capabilities of Google Analytics for tracking AJAX requests and more, as recommended by the H5BP documentation

I need assistance with installing the Google Analytics enhancements mentioned in the extend.md file of H5BP (https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/extend.md). The documentation mentions using a specific code snippet for optimized Googl ...

javascriptjqueryajaxgoogle-analyticshtml5boilerplate

steps for setting up an endless scroll masonry grid

I have incorporated masonry js to display content on my website. Now, I am interested in adding infinite scrolling functionality using this script. I came across a demo that showcases this feature. However, I am struggling to figure out how to implement ...

phpjavascriptjquery

Is it a usual technique to retrieve dynamic content using PhoneGap?

Recently, I've been utilizing phonegap for creating mobile applications on various platforms. I've noticed the need to use AJAX calls within JavaScript to fetch dynamic content. I'm curious, is it a standard practice in HTML5 apps to retrie ...

javascriptajaxcordovamobiledynamic

What is the best way to update a JSON object in a file using the file system module in Node.js?

Recently, I've been learning about read and write operations using the 'fs' module in Node.js. Here's my specific situation: I have a file containing data structured like this: [ { "Pref":"Freedom", "ID":"5545" }, { "Pref" ...

javascriptnode.jsfs

Transferring Information between a Pair of Controllers

Currently, I am utilizing angular version 1.x and faced with the challenge of sharing data between two controllers. In my mainctrl, I am working with the above model. The radiotmplt.radiohead=='IRU600v3' is utilized in firstctrl. Unfortunately, ...

javascripthtmlcssangularjs

Updating controller variables when the route changes in AngularJS

I'm new to the AngularJS scene and I've encountered a challenge. My goal is to have the selected tab change dynamically based on the URL changes. Here's my JavaScript code: app.config(function($routeProvider, $locationProvider){ $rou ...

javascriptangularjsangularjs-directiveangularjs-scopeangular-routing