Trying to incorporate both a phong material and a shader area light onto my .obj model has proven to be problematic. I attempted using an array within Meshface material to load both materials, but the model vanishes completely when both are applied simultaneously.
The situation works fine when either one is used individually, but combining them seems to cause the issue. Is there any workaround for this problem?
Check out the DEMO here:
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);
// More code follows...
// The main problematic section of the code
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; // Using faceMaterial here causes the object to disappear
child.castShadow = true;
child.receiveShadow = true;
}
}
});
scene.add(object4);
});
// More code continues...
Area light reference:http://jsfiddle.net/hh74z2ft/1/
The desired outcome is similar to the image provided in the link below, where the chandelier should also be illuminated similarly to the torusknot while maintaining the phong characteristics (phongness).
[]2