叠加颜色

Question

我想通过鼠标绘制立方体红色。但是绿色立方体（左边）不是红色，而是黑色。白色立方体（右侧）正常着色。该怎么办？ 例如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;
    }

}

Answer 1

我怀疑你的照明模型是导致这种情况的原因。如果你尝试绘制白色立方体的暗边，你也会看到黑色面孔。白色ffffff和绿色00ff00之间有很大差异。由于半光，你的白色立方体甚至呈现蓝色。

尝试使用点光源而不是半光，看看它是否有所作为。

Answer 2

在您的示例中，最终颜色是材质颜色（0x00ff00）和面部颜色（0xff0000）的分量产品，导致黑色（0x000000）。

因此，当您有面部颜色时，最好将材质颜色设置为白色。

three.js r.69