Home

Index

How to use the Face3 function from three

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

three.Face3 is a JavaScript class in the Three.js library that represents a triangular face in a three-dimensional object, defined by three vertices in a specified order.

index.js

156
157
158
159
160
161
162
163
164
165
if (solid) {
  if (line.search("endsolid") > -1) solid = false
  else if(face) {
    if (line.search("endfacet") > -1) {
      face = false
      var f = new THREE.Face3(vis[0], vis[1], vis[2])
      fs.push(f)
    } else if (line.search("vertex") > -1) {
      var cs = line.substr(line.search("vertex") + 7)
      cs = cs.trim()

+ 29 other calls in file

buildZones.js

GitHub: ironbane/ironbane-client

208
209
210
211
212
213
214
215
216
217
    faceCopy, normal, color,
    faceVertexNormals = face.vertexNormals,
    faceVertexColors = face.vertexColors;


faceCopy = new THREE.Face3(face.a + vertexOffset, face.b + vertexOffset, face.c + vertexOffset);

faceCopy.normal.copy(face.normal);

if (matrixRotation) {

How does three.Face3 work?

three.Face3 works by creating a new instance of a triangular face in a three-dimensional object, defined by three vertices in a specified order. The class takes three arguments: the indices of the three vertices that define the face, and an optional array of vertex normals and a material index. These arguments are used to create a new instance of three.Face3 with the corresponding properties, such as the a, b, and c indices for the three vertices, the normal vector for the face, and the materialIndex for the material used to render the face. Once a three.Face3 object is created, it can be added to a three.Geometry object, which represents a set of vertices and faces that define a three-dimensional object. The three.Geometry object can then be rendered using a three.Mesh object, which applies materials and textures to the geometry to create a realistic representation of the object. Note that three.Face3 is a part of the Three.js library, which provides a comprehensive set of tools for creating and rendering 3D graphics in a web browser.

index.test.js

GitHub: matrix3d/patrollaya

44
45
46
47
48
49
50
51
52
53
  new THREE.Vector3(  1,  0, -1  ),
  new THREE.Vector3(  0,  0, 0.1 ),
  new THREE.Vector3(  1,  0, 0.1 )
);
geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
geometry.faces.push( new THREE.Face3( 0, 3, 4 ) );
geometry.faces.push( new THREE.Face3( 0, 4, 1 ) );

const zone = Pathfinding.createZone(geometry);
pathfinding.setZoneData(ZONE, zone);

+ 13 other calls in file

objmtlloader.js

GitHub: AVGP/spaceblaster

80
81
82
83
84
85
86
87
88
89

}

function face3( a, b, c, normals ) {

  return new THREE.Face3( a, b, c, normals );

}

var face_offset = 0;

+ 13 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const geometry = new THREE.Geometry();

geometry.vertices.push(
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(0, 1, 0),
  new THREE.Vector3(1, 0, 0)
);

geometry.faces.push(new THREE.Face3(0, 1, 2));

const material = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  wireframe: true,
});

const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

In this example, we first create a new THREE.Geometry object representing a triangle with three vertices. We then define the three vertices using THREE.Vector3 objects and add them to the geometry's vertices array. Next, we define a new THREE.Face3 object using the indices of the three vertices that make up the triangle. We then add the face to the geometry's faces array. We then create a THREE.MeshBasicMaterial object with a white wireframe color and apply it to the geometry using a THREE.Mesh object. Finally, we add the mesh to the scene to be rendered. When rendered, the resulting THREE.Mesh object will display a wireframe triangle with three vertices, created using THREE.Geometry and THREE.Face3 objects. Note that this is just a simple example, and three.Face3 can be used to define more complex geometry objects with many faces and vertices, each with their own properties and materials.

ColorTriangle.js

GitHub: mclittle/contour.js

6
7
8
9
10
11
12
13
14
15
};

draw () {
    let geometry = new THREE.Geometry();
    geometry.vertices = this.vertices;
    geometry.faces.push(new THREE.Face3(0, 1, 2));
    geometry.computeBoundingSphere();

    let material = new THREE.MeshBasicMaterial( {color: this.color.toRGBString(), side: THREE.DoubleSide} );
    let ret = new THREE.Mesh(geometry, material);

+ 12 other calls in file

transformation.js

GitHub: rendoir/feup-thesis

198
199
200
201
202
203
204
205
206
207
if ( this.drawArrowsInVertexMapping ) {
    let triangleGeometry = new THREE.Geometry();
    triangleGeometry.vertices.push(new THREE.Vector3(0,0,0));
    triangleGeometry.vertices.push(new THREE.Vector3(-0.5,-1,0));
    triangleGeometry.vertices.push(new THREE.Vector3(0.5,-1,0));
    triangleGeometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
    let triangleMesh = new THREE.Mesh( triangleGeometry, new THREE.MeshBasicMaterial( { color: 0x000000 } ) );
    
    triangleMesh.scale.set(sceneScale / 30, sceneScale / 30, 1);
    let direction = finalVertex.clone().sub(initialVertex);

+ 3 other calls in file

example.js

GitHub: ryancat/webgl-threejs-notes

37
38
39
40
41
42
43
44
45
46
  row++
}
// Adding faces
row = 0
while (row < rowCount) {
  let faceA = new THREE.Face3(row, row + 1, row + 2),
      faceB = new THREE.Face3(row + 1, row + 2, row + 3)

  planeGeometry.faces.push(faceA)
  planeGeometry.faces.push(faceB)

+ 3 other calls in file

scatter.js

GitHub: vidartf/ipyvolume

41
42
43
44
45
46
47
48
49
50
        i++;
    }
    indices[length-1] = -1-indices[length-1];// indicates end, so swap sign
    for(var j = 0; j < indices.length-2; j++) {
    //for(var j = 0; j < 1; j++) {
        var face = new THREE.Face3( indices[0], indices[1+j], indices[2+j])
        this.geo_cat.faces.push(face)
    }
}
this.geo_square_2d = new THREE.PlaneGeometry(2, 2, 1, 1)

236

map.js

GitHub: hiromi-mi/esolang-battle

63
64
65
66
67
68
69
70
71

if (index === 0) {
        geometry.faces.push(new THREE.Face3(0, 1, 2));
} else if (index === 1) {
        geometry.faces.push(new THREE.Face3(0, 1, 2));
        geometry.faces.push(new THREE.Face3(0, 2, 3));
        geometry.faces.push(new THREE.Face3(0, 3, 4));
}
geometry.computeFaceNormals();

+ 7 other calls in file

STLLoader.js

GitHub: TimothyStiles/meshdiff

232
233
234
235
236
237

}

length = geometry.vertices.length;

geometry.faces.push( new THREE.Face3( length - 3, length - 2, length - 1, normal ) );

gcode_reader.js

GitHub: lyxnter/DuetWebControl

1512
1513
1514
1515
1516
1517
1518
1519
1520
1521

var fbbr;
var fbbl;

if (dx < 0) {
	ftrr = new THREE.Face3(iv, iv + 5, iv + 4);
	fbrr = new THREE.Face3(iv, iv + 1, iv + 5);

	ftll = new THREE.Face3(iv + 2, iv + 6, iv + 7);
	fbll = new THREE.Face3(iv + 2, iv + 7, iv + 3);

+ 101 other calls in file

STLLoader.js

GitHub: jstortoise/threejs-shadow

214
215
216
217
218
219
220
221

    }

    length = geometry.vertices.length;

    geometry.faces.push(new THREE.Face3(length - 3, length - 2, length - 1, normal));

}

index.js

GitHub: Troveup/HEMesh

163
164
165
166
167
168
169
170
171
172
173
174
    });


    var a = index++;
    var b = index++;
    var c = index++;
    geo.faces.push( new THREE.Face3(a,b,c) );
}


function addFaceToGeometry(face, geo) {
    var f = face.edge.loopEdges(function(edge){

+ 29 other calls in file

ColladaLoader.js

GitHub: isjackwild/deconstruction

3036
3037
3038
3039
3040
3041
3042
3043
3044
3045

	faces.push( new THREE.Face3( vs[0], vs[1], vs[2], ns, cs.length ? cs : new THREE.Color() ) );

} else if ( vcount === 4 ) {

	faces.push( new THREE.Face3( vs[0], vs[1], vs[3], ns.length ? [ ns[0].clone(), ns[1].clone(), ns[3].clone() ] : [], cs.length ? [ cs[0], cs[1], cs[3] ] : new THREE.Color() ) );

	faces.push( new THREE.Face3( vs[1], vs[2], vs[3], ns.length ? [ ns[1].clone(), ns[2].clone(), ns[3].clone() ] : [], cs.length ? [ cs[1], cs[2], cs[3] ] : new THREE.Color() ) );

} else if ( vcount > 4 && options.subdivideFaces ) {

+ 43 other calls in file

game.js

GitHub: lukedawilson/battlezone

52
53
54
55
56
57
58
59
60
61
  new THREE.Vector3(1, 0, 0),
  new THREE.Vector3(0.5, 1, 0.5))
geometry.faces.push(
  new THREE.Face3(0, 2, 1),
  new THREE.Face3(0, 3, 2),
  new THREE.Face3(1, 4, 0),
  new THREE.Face3(2, 4, 1),
  new THREE.Face3(3, 4, 2),
  new THREE.Face3(0, 4, 3))
const transformation = new THREE.Matrix4().makeScale(width, height, width)

+ 11 other calls in file

Game.js

GitHub: twalk4821/kelsiWorld3D

182
183
184
185
186
187
188
189
190
191
  new THREE.Vector3(-1, -1, 0),
  new THREE.Vector3(-1, 0, 0),
  new THREE.Vector3(-.5, -.5, 1)
];
bowLeftGeom.faces = [ 
  new THREE.Face3(0, 1, 2),
  new THREE.Face3(0, 2, 3),
  new THREE.Face3(1, 0, 4),
  new THREE.Face3(2, 1, 4),
  new THREE.Face3(3, 2, 4),

+ 47 other calls in file

mug.js

GitHub: bag-man/CS32310-Advanced-Graphics

33
34
35
36
37
38
39
40
41

let holes = []
  , triangles = THREE.ShapeUtils.triangulateShape(geometry.vertices, holes)

for (var i = 0; i < triangles.length; i++) {
  geometry.faces.push(new THREE.Face3(triangles[i][0], triangles[i][1], triangles[i][2]))
}

return geometry

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About