I have successfully loaded an object using OBJMTLLoader and now I want to be able to manipulate its position, visibility, and opacity using the dat-gui control panel. Although I have been able to move the loaded object following this example, I am having trouble changing its visibility and opacity. It seems like I need to work with the "materials" of the loaded object. I attempted to implement the solution provided in this answer, but unfortunately, it did not work. Here is the current state of my code:
objects = [];
var loader = new THREE.OBJMTLLoader();
loader.addEventListener('load', function(event){
object = event.content;
object.traverse(function(child){
if (child instanceof THREE.mesh) {
//The child is needed for the raycaster intersection later
};
});
});
loader.load("models/Model1.obj", "models/Model1.mtl", function (object) {
objects.push(object);
scene.add(object);
parameters = {
x:0, y:2, z:0,
opacity: 1,
visible: true,
reset: function() { resetObject() }
};
var folder1 = gui.addFolder('Position');
var objectX = folder1.add(parameters, 'x').min(-200).max(200).step(1).listen();
//.............
folder1.open();
// moving model is OK. Deleted to save space...
var objectOpacity = gui.add(parameters, 'opacity').min(0).max(1).step(0.01).name('Opacity').listen();
objectOpacity.onChange(function(value){
object.material.opacity = value; });
var objectVisible = gui.addColor( parameters, 'visible').name('Visible?').listen();
objectVisible.onChange(function(value){
object.material.visible = value; });
gui.add( parameters, 'reset' ).name("Reset Object Parameters");
gui.open();
// and the required functions as in the example.
When I run the above code, the console displays the following errors:
Uncaught Failed to interpret color arguments //dat.gui.min.js:87
Uncaught TypeError: Cannot set property 'opacity' of undefined
Could someone guide me on how to properly adjust the visibility and opacity from the dat-gui panel? Thank you.