How to change geometry color with dat.GUI?

问题

I have the following code to render a simple cube. It has dat.GUI controls to change rotation, and I want to add a color changer also. Eventually, I want to have a more complex geometry and want to be able to change the color of more than one element.

$(function(){
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, .1, 500);
        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(0xdddddd);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;
        renderer.shadowMapSoft = true;

        var axis = new THREE.AxisHelper(10);
        scene.add (axis);

        var grid  = new THREE.GridHelper(50, 5);
        var color = new THREE.Color("rgb(255,0,0)");
        grid.setColors(color, 0x000000);

        scene.add(grid);

        var cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
        var cubeMaterial = new THREE.MeshLambertMaterial({color:0x80ff});
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        var planeGeometry = new THREE.PlaneGeometry(30,30,30);
        var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);

        plane.rotation.x = -.5*Math.PI;
        plane.receiveShadow = true;

        scene.add(plane);

        cube.position.x += 0.001;
        cube.position.y = 2.5;
        cube.position.z = 2.5;

        scene.add(cube);



        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.castShadow = true;
        spotLight.position.set (15,30,50);

        scene.add(spotLight);

        camera.position.x = 40;
        camera.position.y = 40;
        camera.position.z = 40;

        camera.lookAt(scene.position);



        var guiControls = new function(){
            this.rotationX = 0.001;
            this.rotationY = 0.001;
            this.rotationZ = 0.001;

        }

        var datGUI = new dat.GUI();
        datGUI .add(guiControls, 'rotationX', -30*Math.PI/180, 30*Math.PI/180);
        datGUI .add(guiControls, 'rotationY', -30*Math.PI/180, 30*Math.PI/180);
        datGUI .add(guiControls, 'rotationZ', -30*Math.PI/180, 30*Math.PI/180);





        render();
        function render() {
            cube.rotation.x = guiControls.rotationX;
            cube.rotation.y = guiControls.rotationY;
            cube.rotation.z = guiControls.rotationZ;


            requestAnimationFrame(render);
            renderer.render(scene,camera);

        }

        $("#webGL-container").append(renderer.domElement);
        renderer.render(scene,camera);


    });

I have been able to add a gui to change color, but I cannot figure out how to bind the gui to the cube color.

var gui = new dat.GUI();
var folder = gui.addFolder('folder');
var params = {};
params.color = [255, 0, 255];
folder.addColor(params, 'color');

回答1:

You can use dat.GUI to change the color of your cube by using a pattern like this one:

var params = {
    color: 0xff00ff
};

var gui = new dat.GUI();

var folder = gui.addFolder( 'MATERIAL' );

folder.addColor( params, 'color' )
      .onChange( function() { cube.material.color.set( params.color ); } );

folder.open();

three.js r.92

来源：https://stackoverflow.com/questions/50440427/how-to-change-geometry-color-with-dat-gui

标签

three.js