如何确定渲染网格的最终颜色？

Question

我们在初始化材料时给出颜色。我们还指定了一个颜色，同时初始化环境和方向光源。如何确定网格的最终颜色。

当我改变材料的颜色时，我看不出网格的最终颜色有什么变化。然而，呈现的颜色的网格是变化的，而我改变了光源的颜色(环境或方向)。

所以

1)在初始化材料时指定颜色的用途是什么？

2)如何确定网格的最终颜色？

darkMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
darkMaterialL = new THREE.MeshLambertMaterial( { color: 0xffff00 } );
darkMaterialP = new THREE.MeshPhongMaterial( { color: 0xffff00 } );

var ambientLight = new THREE.AmbientLight(0x00ff00);
var light = new THREE.PointLight(0x000000);
light.position.set(0,150,100);

scene.add(ambientLight);
scene.add(light);

以上是我使用的灯和材料。

Answer 1

我给你写了一个小提琴，让你看一看：http://jsfiddle.net/fnR4E/

var camera, scene, renderer;
var geometry    = new Array();
var material    = new Array();
var mesh        = new Array();
var light;
var angle = 0.1;

init();
render();

function init() {
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 5;
    camera.position.y = 5;

    scene = new THREE.Scene();

    geometry[0] = new THREE.SphereGeometry(1, 8, 6, 0, Math.PI * 2, 0, Math.PI);
    geometry[1] = new THREE.SphereGeometry(1, 8, 6, 0, Math.PI * 2, 0, Math.PI);
    geometry[2] = new THREE.SphereGeometry(1, 8, 6, 0, Math.PI * 2, 0, Math.PI);

    material[0] = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    material[1] = new THREE.MeshLambertMaterial({ ambient: 0xffffff, color: 0x00FF00 });
    material[2] = new THREE.MeshPhongMaterial({ ambient: 0xffffff, color: 0xdddddd, specular: 0xFFFFFF, shininess: 15 });

    mesh[0] = new THREE.Mesh(geometry[0], material[0]);
    mesh[1] = new THREE.Mesh(geometry[1], material[1]);
    mesh[2] = new THREE.Mesh(geometry[2], material[2]);

    var ambientLight = new THREE.AmbientLight(0x007700);
    var light = new THREE.PointLight(0xFFFFFF);
    light.position.set(0, 2, 0);

    scene.add(ambientLight);
    scene.add(light);

    mesh[0].position.set(-2, 0, 0);
    mesh[2].position.set(2, 0, 0);

    scene.add(mesh[0]);
    scene.add(mesh[1]);
    scene.add(mesh[2]);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
}

function render() {
    requestAnimationFrame(render);

    camera.position.x = 5 * Math.cos(angle);
    camera.position.z = 5 * Math.sin(angle);

    camera.lookAt(new THREE.Vector3(0, 0, 0));

    angle += 0.01;

    renderer.render(scene, camera);
}

第一个网格是使用MeshBasicMaterial，本质上意味着它是由材料颜色单独照明，为了证明您可以将ambientLight和光的值更改为任何您想要的，它不会影响这个网格的渲染颜色。

下面两个网格(第一个是MeshLambertMaterial，第二个是MeshPhongMaterial)使用这两个灯。关于每一种阴影模型(Lambertian和Phong)背后的理论的更多阅读，请查阅维基百科的以下优秀文章：

reflectance model

下面是对正在发生的事情的更“实用”的解释(但您可能至少希望参考下面讨论的方程式的wiki文章)：

ambientLight被乘以材料的‘环境’值，以产生网格环境颜色。这种颜色只能使用到材料的漫射颜色所指定的数量。例如，如果材料环境值为0xFFFFFF，而AmbientLight为0x00F00，则网格具有完全绿色的环境光--但是，如果材料的漫射颜色(“颜色”)没有绿色通道(例如，0xFF00FF)，那么网格上就没有环境光。或者，如果有一个漫射颜色0x007700 (完全绿色通道的一半)，那么你将看到周围的光线在物体上的颜色0x007700。

漫射色用材料的颜色值来表示。这是被感知到的网格颜色。在Lambert和BlinnPhong阴影模型中，这种颜色被与光矢量法向的顶点或碎片的点乘积相乘。本质上，这意味着一个顶点或碎片越直接亮起--它就越接近整个漫射颜色。一个根本不被光源直接照亮的顶点或碎片是黑色的。AmbientLight源不包括在此点积计算中。

注:在此点积计算中不考虑遮挡网格。只考虑光源与顶点或碎片之间的角度。

最后，MeshPhongMaterial使用了一个名为specular的附加属性。这是反射光，在一个网格上产生“闪亮”点。这来自于计算反射角度与正常从光源。物质性质“镜面”决定了这个反射点的颜色。同样，AmbientLight光源不包括在此照明计算中。

注:同样，在此计算中不考虑遮挡网格。

解决了这个问题。