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

问题描述

我有以下代码来渲染一个简单的立方体。它有 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');

标签： three.js

您可以使用 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();

三.js r.92

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

问题描述

解决方案

推荐阅读