Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 952
Phipps Avatar asked Sep 24 '12 11:09

Phipps


1 Answers

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

like image 107
kaipr Avatar answered Sep 19 '22 15:09

kaipr