Home

Index

How to use the Mesh function from three

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

three.Mesh is a class in the Three.js library that is used to create a three-dimensional object composed of a geometry and a material.

Vectors.js

152
153
154
155
156
157
158
159
160
161
heads = BufferGeometryUtils.mergeBufferGeometries(heads);
heads.computeBoundingSphere();
heads.computeBoundingBox();

object.add(
    new THREE.Mesh(
        heads,
        new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors}),
    ),
);

117

808

+ 23 other calls in file

SSAAChunkedRender.js

GitHub: K3D-tools/K3D-jupyter

75
76
77
78
79
80
81
82
83
    stencilBuffer: true,
});

const camera2 = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
const scene2 = new THREE.Scene();
const quad2 = new THREE.Mesh(new THREE.PlaneBufferGeometry(2, 2), copyMaterial);

quad2.frustumCulled = false;
scene2.add(quad2);

115

803

How does three.Mesh work?

three.Mesh is a class in the Three.js library that represents a geometric object with a material that is used for rendering in a 3D scene. The Mesh class inherits from the Object3D class, and it is the most commonly used class in Three.js for creating 3D objects with a visual representation. It is constructed by passing in a Geometry object and a Material object as arguments, which define the shape and appearance of the object respectively. The Mesh class also provides methods for manipulating the position, rotation, and scale of the object in 3D space.

Volume.js

GitHub: K3D-tools/K3D-jupyter

200
201
202
203
204
205
206
207
208
209
});

geometry.computeBoundingSphere();
geometry.computeBoundingBox();

const object = new THREE.Mesh(geometry, material);
object.applyMatrix4(modelMatrix);
object.updateMatrixWorld();

/*

115

803

+ 3 other calls in file

primitives.js

GitHub: PrismarineJS/prismarine-viewer

12
13
14
15
16
17
18
19
20
21
    points.push(p.x, p.y, p.z)
  }

  const line = new MeshLine()
  line.setPoints(points)
  return new THREE.Mesh(line, material)
} else if (primitive.type === 'boxgrid') {
  const color = primitive.color ? primitive.color : 'aqua'

  const sx = primitive.end.x - primitive.start.x

163

+ 5 other calls in file

Ai Example

1
2
3
4
5
6
7
// create a Mesh using a BoxGeometry and a MeshBasicMaterial
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);

// add the Mesh to the scene
scene.add(mesh);

In this example, we create a new BoxGeometry and MeshBasicMaterial to define the shape and appearance of our Mesh, respectively. We then pass these objects to the THREE.Mesh constructor to create a new Mesh. Finally, we add the Mesh to our scene using the scene.add method.

entities.js

GitHub: PrismarineJS/prismarine-viewer

37
38
39
40
41
42
43
44
45
46
47
48
  }


  const geometry = new THREE.BoxGeometry(entity.width, entity.height, entity.width)
  geometry.translate(0, entity.height / 2, 0)
  const material = new THREE.MeshBasicMaterial({ color: 0xff00ff })
  const cube = new THREE.Mesh(geometry, material)
  return cube
}


class Entities {

163

+ 3 other calls in file

worldrenderer.js

GitHub: PrismarineJS/prismarine-viewer

43
44
45
46
47
48
49
50
51
52
  geometry.setAttribute('normal', new THREE.BufferAttribute(data.geometry.normals, 3))
  geometry.setAttribute('color', new THREE.BufferAttribute(data.geometry.colors, 3))
  geometry.setAttribute('uv', new THREE.BufferAttribute(data.geometry.uvs, 2))
  geometry.setIndex(data.geometry.indices)

  mesh = new THREE.Mesh(geometry, this.material)
  mesh.position.set(data.geometry.sx, data.geometry.sy, data.geometry.sz)
  this.sectionMeshs[data.key] = mesh
  this.scene.add(mesh)
} else if (data.type === 'sectionFinished') {

158

+ 3 other calls in file

3.js

GitHub: mattdesl/codevember

77
78
79
80
81
82
83
84
85
86

const rings = newArray(3).map((_, i) => {
  const mat = material.clone()
  mat.uniforms.ring.value = i
  mat.uniforms.color.value.set(colors[i % colors.length])
  return new THREE.Mesh(geometry, mat)
})

let analyser, sampleRate, fftSize
if (audio && AudioContext) {

242

vignette.js

GitHub: edankwan/Constraint

28
29
30
31
32
33
34
35
36
37
        transparent: true,
        depthWrite: false,
        depthTest: false
    });

    mesh = exports.mesh = new THREE.Mesh( geometry, material );
    mesh.frustumCulled = false;
    mesh.renderOrder = 1024;

}

115

+ 3 other calls in file

bisweb_orthogonalviewerelement.js

GitHub: bioimagesuiteweb/bisweb

269
270
271
272
273
274
275
276
277

var wd=this.internal.imagespa[0] * 4;


if (!this.internal.simplemode) {
    this.internal.origin=new THREE.Mesh(bisCrossHair.createcrosshair(wd,this.internal.imagespa[0],false), 
                              new THREE.MeshBasicMaterial( {color: 0xffffff, wireframe:false}));
    subviewer.getScene().add(this.internal.origin);
}

+ 38 other calls in file

index.js

GitHub: ASSERT-KTH/ci-hackathon

259
260
261
262
263
264
265
266
267
268
    position[2] - 3)
spotLight.target  = targetObject;
spotLight.target.updateMatrixWorld()


bulbLight.add(new THREE.Mesh(bulbGeometry, bulbMat));
//bulbLight.position.set(...position);
spotLight.castShadow = true;
lightHelper = new THREE.SpotLightHelper( spotLight );
//scene.add( lightHelper );

+ 5 other calls in file

index.js

GitHub: avin/generative

190
191
192
193
194
195
196
197
198
199
// ---------------------------------------------
// Земля
// ---------------------------------------------
{
  const geometry = new THREE.PlaneGeometry(200, 200, 100, 100);
  const plane = new THREE.Mesh(geometry, floorMaterial);
  plane.rotation.x = -Math.PI * 0.5;
  scene.add(plane);

  const shadowPlane = new THREE.Mesh(geometry, new THREE.ShadowMaterial({ opacity: 0.5 }));

+ 11 other calls in file

render.js

GitHub: hobuinc/usgs-lidar

793
794
795
796
797
798
799
800
801
var matbg = new THREE.MeshBasicMaterial({
	color: 0xffffff,
	side: THREE.DoubleSide
});
var gbg = new THREE.PlaneGeometry(w / 4, h / 4);
var mbg = new THREE.Mesh(g, matbg);

m.position.set(w - (w  / 4) + (w / 8) - 10, ( h / 4) - (h / 8) + 10, 0); // much math to account for plane having its origin right in the middle
mbg.position.set(w - (w  / 4) + (w / 8) - 10, ( h / 4) - (h / 8) + 10, -1); // much math to account for plane having its origin right in the middle

110

+ 4 other calls in file

block.js

GitHub: whos-evan/kazwire

85
86
87
88
89
90
91
92
93
94
	);
	this.material = new THREE.MeshToonMaterial({
		color: this.color,
		shading: THREE.FlatShading
	});
	this.mesh = new THREE.Mesh(geometry, this.material);
	this.mesh.position.set(this.position.x, this.position.y, this.position.z);
}

getAxis() {

147

MeshStandard.js

GitHub: K3D-tools/K3D-jupyter

63
64
65
66
67
68
69
70
71
72
}

geometry.computeBoundingSphere();
geometry.computeBoundingBox();

object = new THREE.Mesh(geometry, material);

interactionsHelper.init(config, object, K3D);

object.applyMatrix4(modelMatrix);

116

806

Scene.js

GitHub: K3D-tools/K3D-jupyter

439
440
441
442
443
444
445
446
447
448

        line.setGeometry(new Float32Array(vertices), true, widths, colors);
        line.geometry.computeBoundingSphere();
        line.geometry.computeBoundingBox();

        plane.obj = new THREE.Mesh(line.geometry, material);

        this.gridScene.add(plane.obj);
    }, this);
}, this);

116

804

FlowFieldObject3D.js

GitHub: vaalentin/2015

40
41
42
43
44
45
46
47
48
49
  inTweens.push(this.getInTween(lines[i]));
}

var triangleGeometry = new THREE.TetrahedronGeometry(3);
var triangleMaterial = new THREE.MeshLambertMaterial({ shading: THREE.FlatShading });
var triangleMesh = new THREE.Mesh(triangleGeometry, triangleMaterial);

var follow = this.getFollow(triangleMesh, subs);

for (var k = 0, l = follow.meshes.length; k < l; k++) {

253

+ 7 other calls in file

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

2387
2388
2389
2390
2391
2392
2393
2394
2395
2396
) {
  // .isSkinnedMesh isn't in glTF spec. See .markDefs()
  mesh =
    meshDef.isSkinnedMesh === true
      ? new THREE.SkinnedMesh(geometry, material)
      : new THREE.Mesh(geometry, material);

  if (
    mesh.isSkinnedMesh === true &&
    !mesh.geometry.attributes.skinWeight.normalized

+ 14 other calls in file

t.js

GitHub: 52black/scratch-vm

1349
1350
1351
1352
1353
1354
1355
1356
1357
1358

		mesh = new THREE.Points( buffergeometry, createdMaterials[ 0 ] );

	} else {

		mesh = new THREE.Mesh( buffergeometry, createdMaterials[ 0 ] );

	}

}

+ 37 other calls in file

OBJLoader.js

GitHub: NydusOne/gcode-composer

749
750
751
752
753
754
755
756
757
758
		buffergeometry.addGroup( sourceMaterial.groupStart, sourceMaterial.groupCount, mi );

	}

	var multiMaterial = new THREE.MultiMaterial( createdMaterials );
	mesh = ( ! isLine ? new THREE.Mesh( buffergeometry, multiMaterial ) : new THREE.LineSegments( buffergeometry, multiMaterial ) );

} else {

	mesh = ( ! isLine ? new THREE.Mesh( buffergeometry, createdMaterials[ 0 ] ) : new THREE.LineSegments( buffergeometry, createdMaterials[ 0 ] ) );

+ 43 other calls in file

zincObject.js

GitHub: alan-wu/ZincJS

80
81
82
83
84
85
86
87
88
89
ZincObject.prototype.checkAndCreateTransparentMesh = function(options) {
  if (this.isGeometry && this.morph.material && this.morph.material.transparent) {
    if (!this.secondaryMesh) {
      let secondaryMaterial = this.morph.material.clone();
      secondaryMaterial.side =  THREE.FrontSide;
      this.secondaryMesh = new THREE.Mesh(this.morph.geometry, secondaryMaterial);
      this.secondaryMesh.renderOrder = this.morph.renderOrder + 1;
      this.secondaryMesh.userData = this;
      this.secondaryMesh.name = this.groupName;
    }

+ 29 other calls in file

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About