THREE.MeshFaceMaterial has been removed. Use an Array instead doesn't work


I’m trying to correct my use of the deprecated method MeshFaceMaterial. But in vain, I know there’s many topics on this post but my tries were all failures!

thx you for your help and time!

So, tried to create a plan and for each face create a colored material to bind on it :

 var geometry = new THREE.PlaneGeometry(300, 150, 5, 3);

 var materials = [];
 var green=0;
 var lenght = geometry.faces.length / 2;       
 for (var y = 0; y < lenght; ++y) {
          var j = 2 * y;
          var colorname = "rgb(200" + green  + " ,40)"
          var colorvar = new THREE.Color(colorname);
          var material = new THREE.MeshBasicMaterial({ color: colorvar, side: THREE.DoubleSide });
          geometry.faces[indexvertex].materialIndex = y;
          geometry.faces[indexvertex + 1].materialIndex = y;
          green += 15;

If i do

     var multiMaterial = new THREE.MeshFaceMaterial(materials);
     var mesh=new THREE.Mesh(geometry, multiMaterial));


It works but i 've got the warning which saying that MeshFaceMaterial is deprecated!
So after few post readings

I’ve tryed

     var multiMaterial = new THREE.MeshBasicMaterial(materials);
     var mesh=new THREE.Mesh(geometry, multiMaterial));

So i don’t have the warning anymore but now everything is white and i have those warnings…
THREE.MeshBasicMaterial: ‘10’ is not a property of this material. for each faces
any idea

Thank you again

Try it like so:

var mesh = new THREE.Mesh(geometry, materials );

Assuming materials is an array of materials.

Hi Mugen and thx you for you reply,

Unfortunately, i’have already try this solution but it’s worth…nothing appears…not even the quad…
Or it seems to appears as quickly as it disapears…


I’ve copied your code to this live example:

It seems the following line was wrong:

var colorname = "rgb(200" + green  + " ,40)";

it should be:

var colorname = "rgb(200," + green  + " ,40)"

Without this fix, you get warnings like:

THREE.Color: Unknown color rgb(20075 ,40)

yep sorry i miss it when i cleaned the code for the topic…

That’s strange because even when i display the mesh in console i can see
that the materials is correctly set, but it still doesn’t work…

In fact, even if i set your version of code directly it doesn’t works… ??? :):thinking:

EDIT: ooooooookkk…it was the Three.js version the pb!!!
So in fact it works since the beginning but wrong three.js version…

So i think the three solutions works with the good version.
sorry guys and thx you