BufferGeometry: techniques for rendering face groupings

I have 2 different shapes and 2 sets of patterns. My primary objective is to sometimes hide a portion of the first shape (requiring 2 groups) while simultaneously displaying a section of the second shape (only needing 1 group). Prior to the r72 update, I used the following code:

1st shape:

bufCompaniesGeomNotActive.addDrawCall(0, geomCompaniesNotActive.faces.length * 3, 0);
bufCompaniesGeomNotActive.addDrawCall(0, 0, 0);

2nd shape:

bufCompaniesGeomActive.addDrawCall(0, 0, 0);

In the r72 release, addDrawCall was simply renamed to addGroup. However, the issue lies in having 2 groups for the first shape. Despite my attempts to reveal sections like before:

floor.companiesGeomNotActive.groups[0].start = 0;
floor.companiesGeomNotActive.groups[0].count = obj.startFaceIndexNotActive * 3;

floor.companiesGeomNotActive.groups[1].start = obj.endFaceIndexNotActive * 3;
floor.companiesGeomNotActive.groups[1].count = lengthNotActive - obj.endFaceIndexNotActive * 3;

I have not been successful. I discovered the method 

companiesGeomActive.setDrawRange(obj.startFaceIndexActive * 3, 3 * (obj.endFaceIndexActive - obj.startFaceIndexActive));
which works, but how can I apply ranges to multiple groups?

javascriptthree.js

Answer №1

To display a collection of faces using different materials, you can utilize a pattern similar to the one illustrated below:

geometry.clearGroups();
geometry.addGroup( start1, count1, 0 ); // materialIndex 0
geometry.addGroup( start2, count2, 1 ); // materialIndex 1

// array of materials
var materials = [
    new THREE.MeshBasicMaterial( { color: 0xff0000 } ),
    new THREE.MeshLambertMaterial( { color: 0x00ff00 } )
];

var mesh = new THREE.Mesh( geometry, materials );

Implementation based on three.js r.142

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

"Using a triangular background shape in JavaScript instead of a traditional circular

I want to add a unique effect to my site inspired by the AnimatedHeaderBackgrounds demo available at this link. My twist on this effect involves using upward-moving triangles instead of circles. I've explored various resources, including Stack Overfl ...

javascripthtmlcss

Problem with Jquery show/hide feature only resolved after refreshing the page

I built a checkout page that consists of three fieldsets with unique IDs - 1, 2, and 3. I want the page to initially display only fieldset 1 while hiding fieldsets 2 and 3. Here is the jQuery code I used: $(document).ready(function(){ $("#1").show(); ...

phpjavascriptjquerycss

The best way to consistently execute setTimeout in order, regardless of the timing, is by utilizing a Promise

I have the following code snippet: var timeOne = new Promise(function(resolve,reject) { setTimeout(function(){ console.log('This is one'); }, Math.random() * 1000); }); var timeTwo = new Promise(function(resolve,reject) { s ...

javascript

Issue with dynamically passing select values to pop-up link in Firefox

My website has a select dropdown feature that triggers a confirmation pop up with the same selection when the user makes a choice. Upon clicking Submit, a new window opens with the corresponding link. Everything works smoothly in Safari, Chrome, and Opera ...

javascriptjqueryselectdropdown

Encountered an error while attempting to complete the 'send' action with 'XMLHttpRequest'

I am currently developing a Cordova application that makes use of ajax. Everything works perfectly during debugging, but once I build the release version, I encounter this error: {"readyState":0,"status":0,"statusText":"NetworkError: Failed to execute &ap ...

javascriptajaxcordova

Tips for displaying the date in 13-digit Unix Timestamp format using JSpreadSheet

I am faced with a challenge involving data that is stored in Unix Timestamp format, which I need to display as a readable date (e.g. YYYY/MM/DD) in JSpreadSheet ("jspreadsheet-ce"). Currently, the data appears as a 13-digit number and looks unattractive. ...

javascriptvue.jsunix-timestamp

Transforming the Slideshow Gallery into a fully automated gallery experience

Looking for assistance in creating an automatic rotation for this slideshow gallery. I've included the HTML, CSS, and JavaScript code for reference. As a newcomer to JavaScript, any guidance on this project would be greatly appreciated. ...

javascriptphpslideshow

Is there a way to verify the results of a Python script within a PHP webpage?

For my school project, I am creating a PHP website where I want to implement a Python code Quiz. I envision a scenario where users can input Python code in an on-page editor/IDE and the output is checked automatically using PHP If-function to determine cor ...

javascriptpythonphphtml

Utilizing libraries in JavaScript

For a while now, I've been grappling with an issue related to importing modules into my main JavaScript script. I recently installed the lodash library via npm and I'm trying to import it into my main script so that I can utilize its functionali ...

javascriptnpmimportlodash

Why does the return value of a function in Node.js and JavaScript sometimes appear as undefined?

I am completely stumped by this issue. I've been trying to figure it out, but so far, no luck.. this is the code snippet function part1(sql, controltime, headers_view, results_view, tmp){ var timerName = "QueryTime"; var request = ne ...

javascriptnode.js

The issue persists where Chrome WebAPI's chrome.webRequest.onBeforeSendHeaders is failing to modify the parameters in the outbound requests

I have been attempting to include an IP address in the X-Forwarded-For parameter within the requestHeader, but my code does not seem to be working based on the examples provided in the Chrome API. Below is the code snippet I am currently using: var reque ...

javascriptgoogle-chromegoogle-chrome-extension

The issue of child component experiencing multiple re-renders

In my application, I have a child component named Plot.js. This component accepts a prop called plot, which is an object containing a property called points that holds an array of x, y points. Additionally, there is an array named files. Each file in the f ...

javascriptreactjs

Send visitors to a different page for a brief 10-second interlude before bringing them back to where they started

Is there a way to create a temporary redirect for users to an ad page and then automatically return them to their desired page after 10 seconds? I have limited knowledge of PHP and Java, so I would appreciate any guidance or complete redirect code that co ...

javascripthttp-redirectphp

Error: The integer provided in the Stripe payment form is invalid in the

I'm encountering an error that I can't seem to figure out. I believe I'm following the documentation correctly, but Stripe is not able to recognize the value. Have I overlooked something important here? https://stripe.com/docs/api/payment_i ...

javascriptreactjsnext.jsstripe-payments

Can whitelist functionality be applied in the browser version of Babel?

While working on a project for my university, I wanted to utilize React. Since installation wasn't allowed, I had to resort to using the browser version of React. Everything was functioning well until I attempted to incorporate JSX into the browser. ...

javascriptreactjsbabeljs

What is the process for including a custom Jasmine matcher definition in Typescript?

I've been searching around for information on creating custom Jasmine matchers using TypeScript and it seems like a common issue. However, none of the solutions I've come across have worked for me. My setup includes: { "typescript": "2.3.2", ...

javascriptangulartypescripttypesjasmine

Safari CORS problem with Three.js WebGL video texture

I am facing a challenge with my vuejs nuxt static site deployed on netlify. I am attempting to utilize a mp4 video from Vimeo Pro as a video texture in three.js using the code below (simplified version) // create video dom element let video_ele = document ...

three.jssafaricorswebglvimeo

Implementing hashing with resumable.js

Looking for a way to include hashing in resumable.JS by utilizing the "fileAdded" event hook. Any suggestions on how to add hash to each chunk? ...

javascriptjqueryjquery-pluginsresumablejs

Does the image alter based on the selection in the dropdown menu?

When I utilize the Templating Example from the select2 library, everything seems to work for the first dropdown value change. The correct image is previewed as expected. However, when trying to change the value a second time, a second image is appended but ...

javascriptjquery

Telerik Nested perspective

Here is the code snippet that I am currently working on, which involves a nested grid from Telerik: I've encountered an issue with using JavaScript to locate and interact with controls named "PreviousDate" and "DateofBirth". <%@ Page Language="c# ...

javascriptasp.nettelerik