I am looking for a way to dynamically update the color property of an object using dat.GUI(). It is straightforward when working with objects created using three.js geometry. However, I am facing some challenges as I am working with imported objects (.obj & .mtl). Specifically, I need to update the property outside the loader.load function. Can anyone provide guidance on how to achieve this?
edit:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( 'obj/Cube/' );
mtlLoader.load( 'cube.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'obj/Cube/' );
objLoader.load( 'cube.obj', function( object ) {
object.traverse( function( child ) {
if ( child instanceof THREE.Mesh ) {
child.castShadow = true;
child.material.color.set( 0x00ff00 ); // change color without dat.GUI
}
} );
companion = object;
scene.add( object );
});
});
gui = new dat.GUI();
parameters =
{
color: "#ff0000",
visible: true,
};
var objColor = gui.addColor( parameters, 'color' ).name('Color (Diffuse)').listen();
objColor.onChange(function(value) // onFinishChange
{ companion.material.color.setHex( value.replace("#", "0x") ); });
gui.open();
updateColor(companion);
function updateColor(obj)
{
obj.material.color.setHex( parameters.color.replace("#", "0x") ); //I need to use the property here.
}