如何使用dat.GUI更改几何颜色？

Question

我有以下代码来呈现一个简单的多维数据集。它具有dat.GUI控件来更改旋转，我也想添加一个颜色转换器。最终，我希望具有更复杂的几何形状，并希望能够更改多个元素的颜色。

$(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);


    });

我已经能够添加GUI来更改颜色，但是我不知道如何将GUI绑定到立方体颜色。

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

Answer 1

您可以使用dat.GUI来更改立方体的颜色，方法是使用类似这样的模式：

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