Phong上的.obj模型中的材質對three.js中的區域光線沒有反應

Question

我試圖在我的.obj模型中添加phong材質以及着色器Area light，但是我嘗試使用Meshface材質使用數組加載當我這樣做時，這兩種材料都會完全消失。

當我使用它們中的任何一個而不是兩個都在一起時，場景有效，是否有解決此問題的方法？

這裏是DEMO：

CODE：

// area light 
var lightColor = 0xffffff; 
var lightIntensity = 1; 

var geometry = new THREE.PlaneGeometry(100, 50); 

var material = new THREE.MeshBasicMaterial({ 
    color: lightColor, 
    transparent: true, 
    opacity: 0.7, 
    side: THREE.FrontSide 
}); 

areaLight = new THREE.Mesh(geometry, material); 

areaLight.position.set(0, 25, -25); 
areaLight.rotation.set(0, 0, 0); 
areaLight.scale.set(1, 1, 1); 
scene.add(areaLight); 


var Black = new THREE.MeshPhongMaterial({ 
     color: 0x000000, 


    }) 
    // wireframe hack 
areaLight.add(new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ 
    wireframe: true 
}))); 

// areaLight verts 
var vertices = areaLight.geometry.vertices; 
var verts = []; 
verts.push(vertices[0]); 
verts.push(vertices[1]); 
verts.push(vertices[3]); 
verts.push(vertices[2]); 

// uniforms 
var uniforms = { 
    color: { 
     type: "c", 
     value: new THREE.Color(0xaaaadd) 
    }, 

    lightColor: { 
     type: "c", 
     value: areaLight.material.color 
    }, 
    lightIntensity: { 
     type: "f", 
     value: lightIntensity 
    }, 
    lightverts: { 
     type: "v3v", 
     value: verts 
    }, 
    lightMatrixWorld: { 
     type: "m4", 
     value: areaLight.matrixWorld 
    } 
}; 

// attributes 
var attributes = {}; 

// material 
var material = new THREE.ShaderMaterial({ 
    attributes: attributes, 
    uniforms: uniforms, 
    vertexShader: document.getElementById('vertex_shader').textContent, 
    fragmentShader: document.getElementById('fragment_shader').textContent, 
    shading: THREE.SmoothShading 
}); 


var onError = function(xhr) {}; 
THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader()); 
var mtl1Loader = new THREE.MTLLoader(); 

mtl1Loader.setBaseUrl('neavik/newmail/'); 
mtl1Loader.setPath('neavik/newmail/'); 
mtl1Loader.load('chandelier.mtl', function(materials) { 

    materials.preload(); 

    var objLoader = new THREE.OBJLoader(); 
    objLoader.setMaterials(materials); 

    objLoader.setPath('neavik/newmail/'); 
    objLoader.load('chandelier.obj', function(object4) { 

     object4.castShadow = true; 
     object4.receiveShadow = true; 
     object4.updateMatrix(); 
     object4.position.set(40, 28, 40); //(0,-5,0.5); 
     object4.scale.x = 0.09; 
     object4.scale.y = 0.05; 
     object4.scale.z = 0.09 



     var mats = []; 
     mats.push(new THREE.MeshPhongMaterial({ 
      color: 0x000000 
     })); 
     mats.push(material); 
     var faceMaterial = new THREE.MeshFaceMaterial(mats); 



     object4.traverse(function(child) { 
      if (child instanceof THREE.Mesh) { 
       if (child.material.name == "chandelier_Outside") { 

        child.material = Black; // When i use faceMaterial here the object disappears 
        child.castShadow = true; 
        child.receiveShadow = true; 
       } 


      } 


     }); 
     scene.add(object4); 
    }); 
}) 

// plane geometry 
var geometry = new THREE.PlaneGeometry(200, 200); 
geometry.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2)); 

// plane 
mesh = new THREE.Mesh(geometry, material); 
mesh.position.y = -0.1; 
scene.add(mesh); 

// torus knot 
var geometry = new THREE.TorusKnotGeometry(10, 4, 256, 32, 1, 3, 1); 

// mesh 
mesh = new THREE.Mesh(geometry, material); 
mesh.position.set(0, 28, 0); 
scene.add(mesh); 

} 

的主要問題部分

var mats = []; 
     mats.push(new THREE.MeshPhongMaterial({ 
      color: 0x000000 
     })); 
     mats.push(material); 
     var faceMaterial = new THREE.MeshFaceMaterial(mats); 



     object4.traverse(function(child) { 
      if (child instanceof THREE.Mesh) { 
       if (child.material.name == "chandelier_Outside") { 

        child.material = Black; // When i use faceMaterial here the object disappears 
        child.castShadow = true; 
        child.receiveShadow = true; 
       } 


      } 


     }); 
     scene.add(object4); 
    }); 
}) 

區光參考：http://jsfiddle.net/hh74z2ft/1/

預期的結果是類似於此圖像即即使枝形吊燈也應該照亮這個圖像沒有phongness [] 2

Answer 1

不幸的是，如果我正確地理解了你的話，這是行不通的。

材質（除其他外）定義給定的三角形片段如何着色。任何給定的三角形總是隻能有一種材料。面部材質用於處理要用不同材質渲染不同面部的情況，但每個三角形仍然只有一種材質。

three.js中有一個名爲multiMaterial的概念（看看THREE.SceneUtils.createMultiMaterialObject()）。但是，這隻會創建具有相同幾何和不同材質的多個網格，因此每個三角形都將渲染兩次，每次渲染一次。

現在的問題是AreaLight的實現有它自己的概念，如何表示光（通過着色器制服），這與phong材質的工作方式完全不同。因此，即使你以某種方式在物體上添加了phong材質以獲得鏡面反射，phong素材也不知道如何處理面光源（它甚至不知道有光線在場景中）。

爲了獲得您喜歡的行爲，您需要爲片段着色器添加鏡面反射項（表面的鏡面反射的計算公式），並且可能需要一些制服來控制其行爲。這是一件非常複雜的事情，特別是對於區域燈光（如果它很容易，我們已經在three.js中）。

但是，根據該領域的最新研究，有一些工作正在完成，您可能需要查看this issue和demo here。還有這個here的拉請求。