Loaded into my three.js mesh is an STL file:
var loader = new THREE.STLLoader();
var materialmodel = new THREE.MeshPhongMaterial(
{
color: 0xFF0000,
specular: 0x222222,
shininess: 75
}
);
function model()
{
loader.load( 'models/stl/binary/model.stl', function ( geometry ) {
var meshMaterial = materialmodel;
var model = new THREE.Mesh( geometry, meshMaterial );
model.scale.set( 0.02, 0.02, 0.02 );
model.castShadow = true;
model.receiveShadow = true;
model.geometry.center();
scene.add(model);
render();
} );
}
model();
Upon calling the model function in my page, the rendering of the model happens as expected.
I aim to incorporate dat.gui as a simple interface for real-time changes.
My initial attempt involves altering the color of the model.
The code snippet utilised looks like this:
var params = {
modelcolor: 0xff0000,
};
var gui = new dat.GUI();
var folder = gui.addFolder( 'Model Colour' );
folder.addColor( params, 'modelcolor' )
.name('Model Color')
.listen()
.onChange( function() { materialmodel.MeshPhongMaterial.color.set( params.modelcolor); } );
folder.open();
DAT.GUI's color picker functions correctly, allowing me to select a hex value which displays accordingly. However, the model/mesh fails to update with the chosen color.
I am contemplating whether the issue lies in how I am changing the color using
materialmodel.MeshPhongMaterial.color.set( params.modelcolor);I recently came across a post here (in one of the answers) where the user employs
model.material.color.set(params.color)