How to use the MeshFaceMaterial function from three

Find comprehensive JavaScript three.MeshFaceMaterial code examples handpicked from public code repositorys.

three.MeshFaceMaterial is a deprecated class in the Three.js library that allows assigning materials to individual faces of a mesh object.

blueprint3d.js

GitHub: 2022-SMHRD-IS-AI1/MyPlace

11682
11683
11684
11685
11686
11687
11688
11689
11690
11691

var loaderCallback = function(geometry, materials) {
  var item = new item_types[itemType](
    model,
    metadata, geometry,
    new THREE.MeshFaceMaterial(materials),
    position, rotation, scale
  );
  item.fixed = fixed || false;
  items.push(item);

+ 13 other calls in file

three.js

GitHub: rikrik527/shan

110
111
112
113
114
115
116
117
118
var sphereModel;
//load the json files and provide callback functions (model to scene)
var loader = new THREE.JSONLoader();

loader.load(testing, function( geometry , materials){
    var materials = new THREE.MeshFaceMaterial(materials);
    model = new THREE.Mesh(geometry,materials);
    model.scale.set(0.5,0.5,0.5);
    scene.add(model);

How does three.MeshFaceMaterial work?

The three.MeshFaceMaterial class in the Three.js library creates a material that sets the faces of a mesh to different materials based on the indices of the faces. It takes an array of materials as input and assigns each material to a corresponding face of the mesh based on the index of the face. It is deprecated in recent versions of Three.js and replaced by three.MultiMaterial.

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const material1 = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const material2 = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const material3 = new THREE.MeshBasicMaterial({ color: 0x0000ff });

const materials = [material1, material2, material3];

const geometry = new THREE.BoxGeometry(1, 1, 1);

// set material index for each face
geometry.faces[0].materialIndex = 0;
geometry.faces[1].materialIndex = 1;
geometry.faces[2].materialIndex = 2;
geometry.faces[3].materialIndex = 0;
geometry.faces[4].materialIndex = 1;
geometry.faces[5].materialIndex = 2;

const faceMaterial = new THREE.MeshFaceMaterial(materials);

const cube = new THREE.Mesh(geometry, faceMaterial);

In this example, we create three different MeshBasicMaterial materials with different colors, and then we create a MeshFaceMaterial from an array of these materials. We then create a BoxGeometry and set the material index for each face. Finally, we create a Mesh object from the geometry and the face material. The result is a cube with each face using a different material.

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About