Three.js - Change Material on Runtime

Question

I have some .js files exported from Blender and load them with THREE.JSONLoader();

my callback:

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

my loading:

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

my create method:

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 change my material on runtime by using my keyboard (changes color and opacity).

How can I do that?

Answer 1

As you create a new material for each mesh I assume you only want to change the color of one mesh and not of all in the inArr array, and you probably need some sort of select for that. But changing the color of the material alone is quite easy:

var onKeyDown = function(event) {
  if (event.keyCode == 67) { // when 'c' is pressed
    object.material.color.setHex(0xff0000); // there is also setHSV and setRGB
  }
};
document.addEventListener('keydown', onKeyDown, false);

object is the mesh you want to change. Key codes can be found here: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes