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

Questions
1

Hi,

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 });
          materials.push(material);
          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));

Capture%20du%202019-04-11%2011-02-42

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));

Capture%20du%202019-04-11%2011-03-03
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

2

Try it like so:

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

Assuming materials is an array of materials.

3

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…

:confused:

4

I’ve copied your code to this live example: https://jsfiddle.net/nrzeyj2m/

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)

5

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

6

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…

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