javascript - THREE.js 使用多个 BoxGeometries 时保持单一颜色。一切都是不变的

Question

简单的程序，以特定的高度和特定的颜色在特定的位置显示条形。 Three.js 新手，正在学习该框架。

当我运行脚本来加载栏位置、颜色、灯光、相机和控件时。我发现 Box 颜色是恒定的，基本网格体因此我尝试使用 MeshPhongMaterial 也是恒定的。所以我需要一点帮助。

// Begin 
function plotRF(bar_data){
    // Bar Data
    this.bars = bar_data
    // Call the canvas for screan sizing 
    this.canvas = document.getElementById("BarCanvas")

    // create the scene
    scene = new THREE.Scene();

    // Define the camera
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 8000 );
    camera.position.z = 500;
    camera.position.y = 500;
    //camera.rotation.x = 90 * Math.PI / 180;

    // Set the render engine
    var renderer = new THREE.WebGLRenderer({ canvas: BarCanvas });
    // Set the render size
    renderer.setSize( this.canvas.width, this.canvas.height);

    // Add some Lights
    this.add_lights()
    // Add controls
    controls = new THREE.OrbitControls( camera, renderer.domElement );

    // Define Geometry 
    //this.coords()
    this.add_bars();

    var render = function () {
        requestAnimationFrame( render );   
        renderer.render(scene, camera);
    };

    render();
};


plotRF.prototype.add_bars = function(){

    // Bar height
    var multiplier = 20;

    // Bar Size
    var lw = 5;

    // loop through the Javascript data
    for (i = 0; i< this.bars.length; i++){
        var geo = new THREE.BoxGeometry( lw, lw, this.bars[i][0]*multiplier );
        //geo.add(
        var rfcolour = this.colorTable(this.bars[i][0]);
        var mat = new THREE.MeshPhongMaterial( {
                    color: rfcolour,
                    emissive: 0x072534,
                    side: THREE.DoubleSide,
                    shading: THREE.FlatShading} );
        //mat.wireframe = true;
        cube = new THREE.Mesh( geo, mat );
        cube.position.x = this.bars[i][1]/10;
        cube.position.y = this.bars[i][2]/10;
        cube.position.z = this.bars[i][0]*multiplier/2;
        scene.add( cube );
        console.log("bar added, x:" + this.bars[i][1] +", y:" + this.bars[i][2] + ", RF:" + this.bars[i][0]) ;
    }       
};

plotRF.prototype.colorTable = function(RF){

    if (RF < 1 ) {
        return new THREE.Color(255,0,0);
    } else if (RF < 1.2) {
        return new THREE.Color(240,50,50);
    } else if (RF < 1.4) {
        return new THREE.Color(230,100,100);
    } else if (RF < 1.6) {
        return new THREE.Color(220,150,150);
    } else if (RF < 1.8) {
        return new THREE.Color(210,200,200);
    } else if (RF < 2.0) {
        return new THREE.Color(200,220,220);
    } else if (RF < 3.0) {
        return new THREE.Color(150,220,220);
    } else {
        return new THREE.Color(100,240,240);
    }

plotRF.prototype.add_lights = function(RF){

    var lights = [];
    lights[ 0 ] = new THREE.PointLight( 0xffffff, 0.8, 500 );
    lights[ 1 ] = new THREE.PointLight( 0xffffff, 0.8, 500 );
    lights[ 2 ] = new THREE.PointLight( 0xffffff, 0.8, 500 );

    lights[ 0 ].position.set( 0, 2000, 0 );
    lights[ 1 ].position.set( 1000, 2000, 1000 );
    lights[ 2 ].position.set( - 1000, - 2000, - 1000 );

    scene.add( lights[ 0 ] );
    scene.add( lights[ 1 ] );
    scene.add( lights[ 2 ] );
}

下面是常量颜色图。请注意，颜色注册正确，THREE.Color 函数中的 R、G、B 值正确。

Answer 1

您必须像 documentation 中所述设置颜色，例如:

return new THREE.Color("rgb(255, 0, 0)"); // red