Recently, I've been delving into Three.js and managed to create an object using the JSONLoader. The material of the object is currently grey in color.
My goal now is to allow users to change the color of the object by clicking on a button that I have added to the HTML.
<input type="button" value="Change Color" onClick="group.material.color.setHex('0xffffff')">
Upon checking DevTools, I encountered the following error message:
Cannot read property 'color' of undefined
I verified that the object does not contain the property 'color', so I understand why it did not work as expected.
Although I had a feeling it wouldn't work, I still hoped for the best. This is the snippet where the object is created:
group = new THREE.Object3D();
//load mesh
var loader = new THREE.JSONLoader();
loader.load('models/s_class.js', function( geometry ) {
mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( {color: 0x2f3a4c}) );
mesh.scale.set( 10, 10, 10 );
mesh.rotation.x = -Math.PI / 2;
mesh.position.y = 0;
group.add( mesh );
scene.add( group );
} );
Is there any way at all to simply change the color by clicking a button? Should I consider using a different Loader when building my object?
You can find my code on jsfiddle here.
Thank you in advance!!!