颜色叠加 [英] 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;
    }

}

推荐答案

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

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

three.js r.69

这篇关于颜色叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！