Guide on modifying cube material dynamically in WebGL at runtime

Currently, I am utilizing three.js to create animations. My goal is to dynamically modify the material of a cube mesh. Below is an example:

// Create cube geometry 
var material1 = [new THREE.MeshBasicMaterial({color:0xBEE2FF}),.....];
var geometry = new THREE.CubeGeometry(50, 50, 50,0,0,0,material1 );
var cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());

// ...

var material2 = [new THREE.MeshBasicMaterial({color:0xFFFFFF}), ...];
cube.geometry.materials = material2;

When using the CanvasRenderer, everything works as expected. However, upon switching to WebGL Renderer, an error is thrown: Uncaught TypeError: Cannot read property 'map' of undefined

Is there a way to update the material of a cube during runtime while using WebGL?

javascriptthree.js

Answer №1

If you are dealing with a code fragment, pinpointing the cause of an error can be tricky. However, it's important to note that altering materials which rely on the presence or absence of a texture can pose challenges. It's recommended to keep all your materials consistent in type. Additionally, remember to set the material.needsUpdate flag to true.

For more comprehensive information and examples on updating elements using WebGLRenderer, refer to the Three.js wiki.

https://github.com/mrdoob/three.js/wiki/Updates

Furthermore, here is a fiddle demonstrating a similar concept to what you may be attempting: http://jsfiddle.net/2FZU7/51/

EDIT: The fiddle has been updated for three.js r.58

Answer №2

" tag, it appears that there is a confusion between 'materials' and 'material' in reference to your cube object. Ensure that you are appropriately setting 'material' when working with your cube. Here is an example code snippet showcasing the correct usage: 
cube.material = material2;
material.map = texture;
material.needsUpdate = true;

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

Different method for navigating in JavaScript

Currently, I'm in the process of developing a control panel using js and npm. I've run into an issue where I need to reset midway through the code without starting anew. Essentially, what I want is for the system to return to the menu after execu ...

javascriptnpm

Having trouble with deploying Node.js to Heroku? Feel like your 'git push her

After successfully running my app locally, I encountered an issue when trying to deploy it to Heroku. The deployment process just hangs indefinitely and only displays one public file on the website with an error message stating: "https://analogy-alley.hero ...

javascriptnode.jsherokuwebpackbundle

steps for retrieving final outcome from forkJoin

I am currently working with an array of userIds, such as: ['jd', 'abc']. My goal is to loop through these userIds and retrieve full names using an API. Ultimately, I aim to transform the initial array into [ {userId: 'jd', nam ...

javascriptangularrxjs

Could you break down the concept of the for/in loop for me?

/* Follow the instructions provided to implement each function. The parameters of a function that reference `cart` pertain to an object structured like this: { "Gold Round Sunglasses": { quantity: 1, priceInCents: 1000 }, "P ...

javascriptfor-in-loop

Is it considered poor form to send as many as 100 ajax requests when loading a webpage?

My table can display up to 100 rows, sometimes even more. Is it considered a bad practice to loop through all these rows and send an AJAX post request to fetch data? I am hesitant to do this during the page load as it may significantly slow down the loadin ...

javascriptjqueryajax

Converting time from 00:00:01 to a format of 8 minutes and 49 seconds in Angular

Is there a way to transform a time value from 00:00:01 (not a date object) into a format showing 8 minutes and 49 seconds? Even after consulting the Angular 'date pipe' documentation, I couldn't find a solution to this issue. ...

javascriptangulartypescriptdatefilterdate-pipe

Exploring the differences between client-side and server-side data manipulation

Recently, I discovered how to access local variables from Express in client-side JavaScript: Check out this helpful thread on StackOverflow However, this discovery has brought up a new challenge for me... Now I am unsure about which data manipulation tas ...

javascriptnode.jsexpress

Elements with v-for directive failing to display

I am attempting to incorporate a component using v-for. The data source infoTexts is structured as an Object where the locale code serves as the key and the corresponding message is the value. For example: { nl: 'Text in Dutch', fr: &apo ...

javascriptvue.jsvuejs2

Drawing images on a Canvas using specified coordinates: A step-by-step guide

https://i.stack.imgur.com/YkibI.jpg I've been trying to position images on specific coordinates, but I'm having trouble getting the shapes and angles right. Currently, only the top left corner is matching correctly. var _width, _height; var im ...

javascripthtmlimagehtml5-canvas

Creating an HTML form to collect user data and then automatically saving it to an Excel file stored in a shared Dropbox account

I am looking to extract data from a user form on a website and then automatically save it as an Excel file in a designated Dropbox account once the user clicks submit. Instead of receiving multiple emails every time the form is filled out, I would like t ...

javascripthtmlexcel

Loading GLTF model via XHR may take an infinite amount of time to reach full completion

I am attempting to load a GLTF model of a piano using XHR and showcase the loading progress on a webpage. The model is being loaded utilizing the Three.js library. On a local server, everything works perfectly - the loading percentage is shown accurately, ...

javascriptthree.js

Which is causing the block: the event loop or the CPU?

example: exports.products = (req, res) => { let el = 1; for (let i = 0; i < 100000000000000; i++) { el += i; } console.log(el); ... ... ... res.redirect('/'); }; If I include a loop like this in my code, which resour ...

javascriptnode.jsexpress

AngularJS controller encounters a scoping problem within a callback function

I have created an angular application with a simple login form that can be viewed on this JSFiddle. HTML Code: <form data-ng-app="jsApDemo" data-ng-controller="loginCtrl"> <label for="username">Username:</label> <input type=" ...

javascriptangularjsangularjs-scopeng-controller

Tabulator - Using AJAX to retrieve a JSON document

I am currently working on importing a json file from an Azure blob container using Azure Data Factory. Despite closely following the documentation and researching various resources on Stack Overflow, I am facing challenges with making the ajax request fun ...

javascriptjsonajaxazure-data-factorytabulator

Tips for navigating through pagination indexes with Angular 6

Hey there, I'm currently working on a project where I need to automatically click through each pagination index. Initially, only the first index can be clicked. After that, the following page indexes are not clickable. Here's the code snippet: ...

javascriptjqueryangular

Where can I find the link to access three.js on the internet?

Currently working on a JavaScript application within Google App Engine using three.js, but struggling to find the URL for online inclusion in my document. Uploading the entire large-sized three.js package is not ideal, so I'm looking for a way to obta ...

javascriptjquerythree.js

A promise is given when a value triggers a function

Having a problem with my code in the second function. When I log inside the function, it works fine. But when I assign a variable and call the function, it returns a pending promise instead of true or false. const mongoose = require('mongoose') c ...

javascriptnode.jsmongodbmongoose

Completely different method for transmitting an array to NodeJS through AJAX

Recently, I've encountered difficulties when sending arrays to NodeJS using AJAX. It seems that whenever I try to send it with JSON, the error function is always triggered. Despite seeking explanations, I haven't found a satisfactory answer. The ...

javascriptajaxnode.js

With NodeJs, Mongoose refrains from storing any data in the database

Recently, I encountered a puzzling issue with my code designed to store superhero names and powers in a database. Despite all the connections functioning correctly, I faced an unexpected challenge. When running mongod, I utilized the --dbpath C:/nodeproje ...

javascriptnode.jsmongodbexpressmongoose

Is it possible to use just one <map> tag for multiple images in jQuery or JavaScript?

I have multiple images on my website <img usemap="#slideMap_branches" src="branches.png" width="890" height="270" alt="Slide 4"> <img usemap="#slideMap_order" src="order.png" width="890" height="270" alt="Slide 2"> <img usemap="#slideMap_c ...

javascriptjqueryhtml