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通过使用类似这样的模式来更改多维数据集的颜色：

interface ItemInterface {
  name: string,
  href: string,
  i18n?: string[]
}

interface LayoutHeaderItemProps extends ItemInterface{
  lang: string,
  activeHref: string,
}
function LayoutHeaderItem (props: LayoutHeaderItemProps): React.SFC{
  const {name, href, lang, activeHref, i18n} = props
  const hrefLang = /\//.test(href) ? `/${lang}` : ''
  if (!i18n.includes(lang)) return null
  return (
    <a
      className={`item${href === activeHref ? ' active' : ''}`}
      key={href}
      href={hrefLang + href}
    ><span>{name}</span></a>
  )
}

LayoutHeaderItem.propTypes = {
  lang: string,
  activeHref: string,
  name: string,
  href: string,
  i18n: array
}
LayoutHeaderItem.defaultProps = {i18n: ['cn', 'en']}

three.js r.92

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

1 个答案: