颜色叠加答案

【问题标题】：Superimposing of color颜色叠加
【发布时间】：2015-01-02 13:23:30
【问题描述】：

我想用鼠标将立方体涂成红色。但因此绿色立方体（左侧）变成了黑色，而不是红色。白色立方体（右侧）正常着色。该怎么办？例如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;
    }

}

【问题讨论】：

我认为这根本不是题外话，并且有一个完整的可验证示例。
@beiller 我认为问题在于代码未包含在帖子正文中。不接受仅提供代码链接，因为链接可能会中断。
我会在重新打开后立即发布答案......同时，答案是：最终颜色是材料颜色的组件乘积（0x00ff00）和面部颜色（0xff0000），结果为黑色（0x000000）。
是的，我明白了。有好的决定吗？好吧，我等着 =)

标签： three.js

【解决方案1】：

在您的示例中，最终颜色是材料颜色 (0x00ff00) 和面颜色 (0xff0000) 的组件乘积，结果为黑色 (0x000000)。

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

three.js r.69

【讨论】：

【解决方案2】：

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

尝试使用点光源而不是半光，看看是否会有所不同。

【讨论】：

不，用另一个替换灯没有帮助。在vertexColors: THREE.VertexColors 的帮助下，我部分解决了一个问题。但最好知道是否有一般的决定。