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

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

我写了的jsfiddle给你看看：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）使用两个灯光。有关各阴影模型（朗伯和海防）背后的理论补充阅读检查出这些优秀的维基百科文章：

http://en.wikipedia.org/wiki/Lambertian_reflectance http://en.wikipedia.org/wiki/Phong_reflection_model

这里是正在发生的事情更“实用”的解释（但您可能至少要参考下面讨论的等式的wiki文章）：

ambientLight乘以材料的“环境”值以生成网格环境颜色。这种颜色只能达到由材质的漫反射颜色指定的量。例如，如果材料环境值为0xFFFFFF且AmbientLight为0x00FF00，则网格具有完全绿色的环境光 - 但是，如果材质的漫反射颜色（'颜色'）包含NO绿色通道（例如0xFF00FF），则不存在施加到网格的环境光。或者，如果存在0x007700的漫反射颜色（全绿色通道的一半），则会在颜色0x007700的对象上看到环境光。

漫反射颜色由材质的“颜色”值表示。这是网格的感知颜色。在Lambert和BlinnPhong着色模型中，该颜色乘以光矢量的顶点或片段法线的点积。实质上，这意味着顶点或片段越直接点亮 - 越接近完全漫反射的颜色。光源根本不直接点亮的顶点或片段是黑色的。 AmbientLight光源不包含在此点积计算中。

注：遮挡网格是而不是占这个点积计算。只考虑光源与顶点或片段之间的角度。

最后，MeshPhongMaterial使用了一个名为specular的附加属性。这是在网格上产生“闪亮”点的反射光。这是通过计算来自光源的相对于法线的反射角。材质属性“高光”决定了这个反射点的颜色。 AmbientLight光源再次不包含在此光照计算中。

注意：再次，遮挡网格是而不是占这个计算。

修复了这个问题。