如何確定渲染網格的最終顏色？

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光源再次不包含在此光照計算中。

注意：再次，遮擋網格是而不是佔這個計算。

修復了這個問題。