Superimposing of color | 易学教程

问题

I want to paint cubes red color by means of a mouse. But thus the green cube (at the left) becomes not red, but black. The white cube (on the right) is colored normally. What to do? example here

// init
var material = new THREE.MeshLambertMaterial({
    color: 0x00ff00,
    side: THREE.DoubleSide,
    vertexColors: THREE.FaceColors
});

var geometry = new THREE.BoxGeometry(100, 100, 100, 4, 4, 4);

var Cube = new THREE.Mesh(geometry, material);
Cube.position.x = -100;
scene.add(Cube);
objects.push(Cube);

var material = new THREE.MeshLambertMaterial({
    color: 0xffffff,
    side: THREE.DoubleSide,
    vertexColors: THREE.FaceColors
});
var geometry = new THREE.BoxGeometry(100, 100, 100, 4, 4, 4);

var Cube = new THREE.Mesh(geometry, material);
Cube.position.x = 100;
scene.add(Cube);
objects.push(Cube);

document.addEventListener('mousedown', onDocumentMouseDown, false);

// 

function onDocumentMouseDown(event) {

    var vector = new THREE.Vector3(
        (event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
    vector.unproject(camera);
    raycaster.set(camera.position, vector.sub(camera.position).normalize());


    var intersects = raycaster.intersectObjects(objects);

    if (intersects.length > 0) {
        var index = intersects[0].faceIndex;
        // change the color of the closest face.
        intersects[0].face.color = color;
        intersects[0].object.geometry.colorsNeedUpdate = true;
    }

}

回答1:

In your example, the final color is the component-wise product of the material color ( 0x00ff00 ) and the face color ( 0xff0000 ), which results in black ( 0x000000 ).

For that reason, when you have face colors, it is a good idea to set the material color to white.

three.js r.69

回答2:

I suspect your lighting model is the cause of this. If you try painting the dark sides of the white cube, you will also see black faces. There is a large difference between white ffffff and green 00ff00. Your white cube even appears blue due to the hemi light.

Try using a point light instead of your hemi light and see if it makes a difference.

来源：https://stackoverflow.com/questions/27506997/superimposing-of-color

标签

three.js