Updating Material in Three.js during Execution

Question

Updating Material in Three.js during Execution

I've got some .js files that were exported from Blender, and I'm loading them using THREE.JSONLoader();

In my callback function:

var callback   = function( geometry ) { createMesh(geometry);

For loading the file:

loader.load( "Models/sculp.js", callback );

This is my method for creating meshes:

function createMesh(geometry){

    inArr[id] = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xbbbbbb} ) );
    inArr[id].scale.set( 100, 100, 100 );
    scene.add( inArr[id] );
    id++;
}

Now, I want to be able to change the material of objects at runtime by using my keyboard (to alter color and opacity).

How can I achieve this interactive functionality?

javascript 3d webgl three.js

Answer 1

Answer №1

When creating a new material for each mesh, it is assumed that only one mesh's color needs to be changed within the inArr array. To achieve this, a selection mechanism may be necessary. However, modifying the color of the material itself is relatively straightforward:

var onKeyPress = function(event) {
  if (event.keyCode == 67) { // Press 'c' key
    object.material.color.setHex(0xff0000); // Options include setHSV and setRGB as well
  }
};
document.addEventListener('keydown', onKeyPress, false);

The variable object represents the specific mesh to be altered. For reference, a list of key codes can be accessed at:

Answer 2

When creating a new material for each mesh, it is assumed that only one mesh's color needs to be changed within the inArr array. To achieve this, a selection mechanism may be necessary. However, modifying the color of the material itself is relatively straightforward:

var onKeyPress = function(event) {
  if (event.keyCode == 67) { // Press 'c' key
    object.material.color.setHex(0xff0000); // Options include setHSV and setRGB as well
  }
};
document.addEventListener('keydown', onKeyPress, false);

The variable object represents the specific mesh to be altered. For reference, a list of key codes can be accessed at:

Updating Material in Three.js during Execution

Answer №1

Similar questions

Exploring the Access Method for a Different Addon

calculation of progress bar advancement

What causes a function loss when using the spread operator on window.localStorage?

Difficulty arises in AngularJS Material when attempting to access the same object value using ng-model and ng-change

Incorporating external JavaScript libraries in Jint

javascript issue with setting the id attribute on a select option

Unable to remove data once it exceeds 10 entries while using AJAX, jQuery, and JavaScript/PHP

The login button has dual functionality, redirecting users to different pages based on their login status. First-time logins will be directed to an agreement page, while returning users will be

Restrict the number of rows in a real-time search JSON data by utilizing the $.each method

Capturing HTML form values and storing them in my JavaScript data object

ASP.NET file uploads using Ajax - handler unable to detect uploaded files

Pause for a moment before commencing a fresh loop in the FOR loop in JavaScript

Simulating an ES6 module that returns a factory function for moment.js

Is the `visibility: hidden` property not functioning as expected?

CSS struggles after implementing conditional checks in return statement for an unordered list

The head.js feature similar to "Modernizr" does not recognize ms-edge

Exploring the World of Angularjs 2

What is preventing Foundation 5 from initializing JavaScript components properly?

What is preventing the audio from playing in Safari?

Custom container width causes animation to crash when scrolling