使用gui.dat更改three.js网格的颜色

Question

I have a three.js mesh loaded from 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();

When I call the model function in my page, the model renders as expected.

I want to use dat.gui to as a lightweight interface for on the fly changes.

My first experiment is changing the color of the model.

The code I'm using is this:

            var params = {
                modelcolor: 0xff0000,  //RED
            };

            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.GUIs color picker appears fine, and I can select a color from the picker and the new hex value will display.

However, the model/mesh itself doesn't update with the newly selected colour.

I'm wondering if it's something to do with how I'm changing the color materialmodel.MeshPhongMaterial.color.set( params.modelcolor); (I've tried different ways of doing this with no luck).

I've seen a post here (one of the answers) where they're doing this using model.material.color.set(params.color) in their example. My owen material properties are defined in a variable using a THREE.MeshPhongMaterial.....

Assuming this is where I've gone wrong, how can I change the color dynamically of a nested prroperty buried in a variable like this?

Answer 1

I didn't get why did you use .listen() , possibly there's a certain reason.

In .onUpdate function you're using materialmodel , which is a material itself, and then you're setting .MeshPhongMaterial property that doesn't exist. Looks like you simply overlooked it.

Here is a working example:

 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(0, 0, 10); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var light = new THREE.DirectionalLight(0xffffff, 0.5); light.position.setScalar(10); scene.add(light); scene.add(new THREE.AmbientLight(0xffffff, 0.5)); var materialmodel = new THREE.MeshPhongMaterial({ color: 0xFF0000, specular: 0x222222, shininess: 75 }); var geometrymodel = new THREE.SphereBufferGeometry(5, 32, 16); var model = new THREE.Mesh(geometrymodel, materialmodel); scene.add(model); var params = { modelcolor: "#ff0000" }; var gui = new dat.GUI(); var folder = gui.addFolder('Model Colour'); folder.addColor(params, 'modelcolor') .name('Model Color') .onChange(function() { materialmodel.color.set(params.modelcolor); }); folder.open(); render(); function render() { requestAnimationFrame(render); renderer.render(scene, camera); } 

 body { overflow: hidden; margin: 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.min.js"></script>