With ThreeJS, it's possible to incorporate more than one material into an Object3D/Mesh as stated in the documentation. You can either utilize a single Material or an array of Material:
Class declaration and constructor for Mesh TypeScript file (excerpt from ThreeJS source code):
export class Mesh<
TGeometry extends BufferGeometry = BufferGeometry,
TMaterial extends Material | Material[] = Material | Material[] // ### Here: Material[] ###
> extends Object3D {
constructor(geometry?: TGeometry, material?: TMaterial);
Here lies the issue that I'm struggling to resolve...
When applying a single Material, my Mesh renders correctly. However, when attempting to use two materials within an array, my Mesh does not display. Moreover, there are no error messages appearing in the console during rendering.
My main objective is to assign separate materials for the inner and outer parts of my object. https://i.stack.imgur.com/D4wMD.png
Below is my code snippet:
export function init(radius: number = 18.0, innerColor: number = 0xFFFFFF, outerColor: number = 0x444444) {
var obj = new Object3D();
loader.load(
objPath,
function(object){
obj = object;
const mesh = obj.children[0] as Mesh;
// WORKING:
mesh.material = new MeshPhongMaterial({color: outerColor});
// NOT WORKING: Using two materials
// mesh.material = new Array<Material>(new MeshPhongMaterial({color: outerColor}), new MeshPhongMaterial({color:innerColor}));
mesh.scale.setLength(radius)
scene.add(mesh);
},
function (error){
console.log(error)
}
);
}
Why am I unable to see my object when utilizing two materials?
I am aware of the existence of MeshFaceMaterial in previous versions, and the acceptance of material arrays by the constructor is supposedly a replacement for that in some capacity.
ThreeJS version:
r128
Any assistance would be greatly appreciated!