Enhancing Octahedron Geometry in Three.js: Incorporating Materials Array

Is it possible to apply different materials to each face of a THREE.OctahedronGeometry? I have successfully done this with box objects, but when I try with THREE.OctahedronGeometry, I only see the first material on all faces. How can I achieve this with different materials on each face?

        var geometry = new THREE.OctahedronGeometry(1, 0);

        var materials = [
            new THREE.MeshPhongMaterial( { color: 0x050505, dithering: true } ),
            new THREE.MeshPhongMaterial( { color: 0xeeeeee, dithering: true } ),
            new THREE.MeshPhongMaterial( { color: 0x060606, dithering: true } ),
            new THREE.MeshPhongMaterial( { color: 0xeeeeee, dithering: true } ),
            new THREE.MeshPhongMaterial( { color: 0x050505, dithering: true } ),
            new THREE.MeshPhongMaterial( { color: 0xeeeeee, dithering: true } ),
            new THREE.MeshPhongMaterial( { color: 0x070707, dithering: true } ),
            new THREE.MeshPhongMaterial( { color: 0xeeeeee, dithering: true } )
        ];

        var someMesh = new THREE.SceneUtils.createMultiMaterialObject( geometry , materials );

        someMesh.castShadow = true; //default is false
        someMesh.receiveShadow = true; //default
        scene.add( someMesh );
javascriptthree.js

Answer №1

To enable multi-material support in any THREE.BufferGeometry, you can define groups within the geometry. Here's an example:

var geometry = new THREE.OctahedronBufferGeometry(5, 0);

geometry.clearGroups(); // clear any existing groups
geometry.addGroup(0, 3, 0); // first 3 vertices use material 0
geometry.addGroup(3, 3, 1); // next 3 vertices use material 1
geometry.addGroup(6, Infinity, 2); // remaining vertices use material 2

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

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

If you are working with THREE.Geometry and need multi-material support, specify a material index for each face. Check out this resource for more information: link to resource.

If your goal is simply to have different colors on each face, consider using face-colors or vertex colors with a single material for better performance. This is a separate optimization technique to keep in mind.

Current version of three.js being used is r.89

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 Node.js to send a response only after every promise has been resolved

I am currently working on a NodeJS Express route where I have encountered an issue. In this route, a function is called multiple times, each returning a Promise. The values from these Promises are then added to an Array and sent back to the client using re ...

javascriptjsonnode.jsexpress

Vue JS: dynamic reactive structure

As I delved into understanding the basics of reactivity and its syntax, I encountered an interesting problem. Take a look at this code snippet: const app = Vue.createApp({ data: dataFunction, methods: {method1: methodImpl} }) var dataObj = { tit ...

javascriptvue.jsmethodssyntax

Activate the Jquery-ui Tooltip with a click event

Here is the code I'm using: function DrawTipsProgress(postid, ajaxurl) { var data = { action: 'ajax_action', post_id: postid } jQuery('#dashicon-' + postid).on("click", function () { jQuery.p ...

javascriptjqueryajaxjquery-uijquery-ui-tooltip

Guide to implementing a datepicker on a webpage using Laravel

I am having trouble displaying the datepicker using the code below in my Laravel 4.2 application on Firefox. Is there a better way to display datepickers? Are there any CDNs available for this purpose? <table class="table table-striped"> <t ...

javascriptjquerylaravel-4datepicker

What is the best way to initiate actions once the form has been successfully processed?

Could someone assist me with creating a form that hides after submission and displays a thank you message instead? I've tried the code below, but it seems that the action isn't being executed once the form is submitted. It's as if the ' ...

javascriptphpjqueryajaxforms

What could be the reason why I am unable to load the ejs file?

https://i.stack.imgur.com/91bPg.png Issue: Unable to find the "index.ejs" view in the views directory ...

javascriptnode.jsexpressejs

Can JavaScript be used to dynamically assign events to elements on a webpage?

I am currently using the following code: if ( $.support.touch == true ) { $(window).on('orientationchange', function(event){ if ( full == false ) { self.hideAllPanels("7"); } }); } else { $(window).on(&apo ...

javascriptjqueryeventsdynamicevent-handling

What is the purpose of being able to include additional scripts within package.json files?

I am attempting to include a new script in the package.json file under the scripts section. For instance, I have the following: { "scripts": { "delete": "rm -f wwwroot/*.js wwwroot/*.css wwwroot/*.html wwwroot/*.map" "watch": "npm run delete; parc ...

javascriptjsonnpmpackage.jsonnpm-scripts

NG-show does not function properly with Angular validation messages when there are two input fields present

I have created a form with two modes: 'Create' and 'Edit'. Depending on the mode selected, specific div content is displayed in different areas of the layout. The content of the div includes an input field and validation messages relate ...

javascriptangularjs

Troubleshooting the "missing checks.state argument" error in AUTH0 debugging

I recently launched my new NextJs blog application at on Vercel, but I'm encountering some issues with getting auth0 to function properly. Upon clicking the login button located in the top right corner of the screen, users are redirected to auth0 to ...

javascriptoauth-2.0next.jsauth0

Calling Ajax in JavaScript

Trying to fetch a value in JavaScript using an Ajax Call, The code being used is as follows: <script> var value = $.ajax({ type:"GET", url:"get_result.php", data:"{'abc':" + $abc + "}", }); alert(val ...

javascriptajax

Drop-down options disappear upon refreshing the page

Code snippet for sending value to server using AJAX in JavaScript In my script, the status value may vary for each vulnerable name. When selecting a status option and storing it in the database through AJAX, the selected value is lost after refreshing th ...

javascriptphphtmlajaxdropdown

JS function to reverse a string

Not to worry, I've managed to figure out how to reverse a string (a one-word string at least). > function reverse(s){ > return s.split("").reverse().join(""); } Is there a way to reverse a string in this manner: "Dady come home" -> "yd ...

javascriptarraysstringreverse

Retrieve information from a local API using Next.js

While working with Next.js api today, I encountered an issue. I needed to fetch data from my internal API in getStaticProps. However, the documentation advises against fetching local API directly in getStaticProps and instead suggests importing the functio ...

javascriptreactjsnext.js

What is the best way to determine if an item qualifies as an Angular $q promise?

In my project, I have an existing API library that is not Angular-based. This library contains a method called .request which returns promises using jQuery.Deferred. To integrate this with Angular, I created a simple service that wraps the .request method ...

javascriptangularjspromise

The dialog box is not taking up the full width of the browser window

I'm facing an issue with a dialog box that only occupies a portion of the browser width, despite having a width set to 100%. The backdrop, however, extends across the entire width. //App.js import React from "react"; import ConfirmationDial ...

javascriptcssreactjsmaterial-ui

A guide on serializing multiple objects returned from a loop using JSON.stringify

My MVC code involves adding multiple travelers objects to the travelers array generated in a loop, and then using JSON.stringify on them. return amadeus.booking.flightOrders.post( JSON.stringify({ 'data':{ 'type ...

javascriptnode.jsjsonobject

Custom control unable to display MP3 file

Hey, I came across this awesome button that I am really interested in using: https://css-tricks.com/making-pure-css-playpause-button/ I'm currently facing two issues with it. First, I can't seem to play the sound. I've placed the mp3 file ...

javascripthtmlcssmp3

Gather all dropdown items using WebdriverIO and store them in an array

Within my application, there is a dropdown that resembles the following - <select> <option value="1">Volvo</option> <option value="2">Saab</option> <option value="3">Mercedes</option> <option value="4"& ...

javascriptnode.jsseleniumwebdriver-io

Unable to play GSM extension files on a web browser due to compatibility issues

I've been attempting to play an audio file with a (.gsm) extension using <audio>, object tags, and JavaScript. <script> var myAudio = new Audio(); // creating the audio object myAudio.src = "test.gsm"; // assigning the audio file t ...

javascripthtmlaudio