CODEWITHSUNDEEP
javascript3dwebglthree.js
Phipps
Phipps

Reputation: 355

Three.js - Change Material on Runtime

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?

Upvotes: 30

Views: 61192

Answers (1)

kaipr
kaipr

Reputation: 636

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

Upvotes: 49

Related Questions