How to use the MeshLambertMaterial function from three

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

three.MeshLambertMaterial is a material in the Three.js library that defines the appearance of a three-dimensional object by using Lambert shading.

39
40
41
42
43
44
45
46
47
  group.add(lines[i]);
  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);
fork icon57
star icon254
watch icon10

+ 7 other calls in file

14
15
16
17
18
19
20
21
22
23
this.scene = scene
this.loadedChunks = {}
this.sectionsOutstanding = new Set()
this.renderUpdateEmitter = new EventEmitter()

this.material = new THREE.MeshLambertMaterial({ vertexColors: true, transparent: true, alphaTest: 0.1 })

this.workers = []
for (let i = 0; i < numWorkers; i++) {
  // Node environement needs an absolute path, but browser needs the url of the file
fork icon56
star icon158
watch icon4

+ 3 other calls in file

How does three.MeshLambertMaterial work?

three.MeshLambertMaterial is a class in the Three.js library that is used to define the material of a mesh. It works by using the Lambert lighting model to calculate the color of each pixel on the surface of the mesh. The Lambert lighting model calculates the color of a pixel based on the angle between the surface normal (a vector perpendicular to the surface of the mesh at that point) and the direction of the light source. The amount of light reflected by the surface is proportional to the cosine of the angle between the normal and the light direction. This produces a diffuse, or matte, appearance for the material. The MeshLambertMaterial class has several properties that can be set to customize the appearance of the material. These include the color property, which sets the base color of the material, and the emissive property, which sets the color of the material when it is self-illuminated. When a MeshLambertMaterial is applied to a mesh, each triangle of the mesh is rendered separately with the lighting calculation performed for each pixel on the triangle's surface. The result is a shaded and colored representation of the mesh that appears to be three-dimensional.

11
12
13
14
15
16
17
18
19
20
var gui = framework.gui;
var stats = framework.stats;
    var stauff = framework.stauff;
    
// Basic Lambert white
var lambertWhite = new THREE.MeshLambertMaterial({ color: 0xaaaaaa, side: THREE.DoubleSide });

// Set light
var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.color.setHSL(0.1, 1, 0.95);
fork icon31
star icon0
watch icon2

+ 15 other calls in file

20
21
22
23
24
25
26
27
28
29
  context: 'webgl',
  animate: true,
};

function createSnowManMaterial() {
  const material = new THREE.MeshLambertMaterial({
    color: 0xd0e3f0,
  });

  material.emissive.setHex(0xffffff);
fork icon9
star icon77
watch icon5

+ 29 other calls in file

Ai Example

1
2
3
4
5
6
7
// Create a new mesh
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshLambertMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);

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

In this example, we create a new mesh by defining its geometry as a box using THREE.BoxGeometry(). We then define its material using THREE.MeshLambertMaterial() and set the color property to 0xff0000, which represents red in hexadecimal format. Finally, we add the mesh to the scene using scene.add(mesh). This creates a box mesh with a red color that is shaded using the Lambert lighting model.

73
74
75
76
77
78
79
80
81
82
camera.position.z = 500

scene = new THREE.Scene()

scene.add(camera)
material = new THREE.MeshLambertMaterial({color: 0xCCCCCC, wireframe: false})

var pointLight = new THREE.PointLight(0xFFFFFF)

// set its position
fork icon6
star icon39
watch icon4

+ 14 other calls in file

17
18
19
20
21
22
23
24
25
26
self.mesh.castShadow = true;
self.mesh.receiveShadow = false;
//
var materials = [

  new THREE.MeshLambertMaterial({ color: 0x90A075 }),
  new THREE.MeshBasicMaterial({ color: 0xffffff})

];
self.mesh.material = new THREE.MultiMaterial(materials);
fork icon10
star icon33
watch icon0

107
108
109
110
111
112
113
114
115

if ( meshName !== undefined ) mesh.name = meshName;

if ( materialName !== undefined ) {

  material = new THREE.MeshLambertMaterial();
  material.name = materialName;

  mesh.material = material;
fork icon5
star icon4
watch icon2

+ 27 other calls in file

87
88
89
90
91
92
93
94
95
96
this.groundRingMesh.scale.set(this.groundRingMeshDefaultScale, this.groundRingMeshDefaultScale, this.groundRingMeshDefaultScale);
this.actorTween = { value: 0, isAnimatingIn: false, isAnimatingOut: false, state: States.Default };

const coneHeight = 0.175;
const coneGeometry = new THREE.FlatShadedGeometry(new THREE.CylinderGeometry(ringRadius * 0.35, 0, coneHeight, 6, 1));
const coneMaterial = new THREE.MeshLambertMaterial({
  // transparent: true,
  color: 'hsl(0, 0%, 35%)',
  shading: THREE.FlatShading,
  // depthTest: false,
fork icon4
star icon25
watch icon2

+ 5 other calls in file

90
91
92
93
94
95
96
97
98
99
ground.repeat.y = 15;

var planeGeo = new THREE.PlaneGeometry(1000, 1000, 10, 10);
planeGeo.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2));
var floor = new THREE.Mesh(
    planeGeo, new THREE.MeshLambertMaterial({map:ground})
);
floor.position.y = -r;
floor.receiveShadow = true;
scene.add(floor);
fork icon2
star icon51
watch icon7

+ 3 other calls in file

119
120
121
122
123
124
125
126
127
128
 * return plan
 */
initPlan() {
  const geo = new THREE.CylinderGeometry(100, 100, 0.2, 32)
  // 接收阴影的材质
  const material = new THREE.MeshLambertMaterial({ color: 0xcccccc })
  const plan = new THREE.Mesh(geo, material)
  plan.receiveShadow = true
  return plan
}
fork icon1
star icon7
watch icon2

197
198
199
200
201
202
203
204
205
206
// Skybox
cubeMesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 100, 100 ), cubeMaterial );
sceneCube.add( cubeMesh );
// Initial object
isStartingShape = true;
var material = new THREE.MeshLambertMaterial( { envMap: textureCube } );
addObject('teapot', material, '');
// Camera orbit pointer
addObject('tinyaxis', null, null);
cameraPointer = scene.getObjectByName( CAMERA_POINTERID )
fork icon75
star icon0
watch icon1

39
40
41
42
43
44
45
46
47
renderer.render(scene, orthoCamera);
var plane = new THREE.Mesh(new THREE.PlaneGeometry(camScale * width / height, camScale * 1), material);
orthoCamera.add(plane);
plane.position.set(0, 0, -1);

var chromeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff, envMap: cubeCamera.renderTarget.texture });
plane.material = chromeMaterial;

setTimeout(function () {
fork icon2
star icon13
watch icon5

+ 9 other calls in file

36
37
38
39
40
41
42
43
44
45
        if(options.opacity < 1){
                materialSettings.opacity = options.opacity;
                materialSettings.transparent = true;
        }

        material = new THREE.MeshLambertMaterial(materialSettings);

}
//custom material
else {
fork icon2
star icon11
watch icon4

+ 5 other calls in file

48
49
50
51
52
53
54
55
56
57
  steps: points.length * divisions,
  bevelEnabled: false,
  extrudePath: extrudePath
}
let geometry = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings)
let material = new THREE.MeshLambertMaterial({ color: matColor.getHex(), wireframe: false })
let mesh = new THREE.Mesh(geometry, material)
this.points = points
this.extrudePath = extrudePath
this.length = points.length
fork icon0
star icon5
watch icon3

77
78
79
80
81
82
83
84
85
meshPlanet.rotation.z = tilt;
scene.add( meshPlanet );

// clouds

var materialClouds = new THREE.MeshLambertMaterial( {

  map: textureLoader.load( "/app/components/asteroids/earth_clouds_1024.png" ),
  transparent: true
fork icon0
star icon3
watch icon5

141
142
143
144
145
146
147
148
149
};

makeFlower(scale) {
    var geometry = new THREE.LatheGeometry(points);
    geometry.scale(0.05, 0.05, 0.05);
    var material = new THREE.MeshLambertMaterial( {color: 0xcccccc, emissive: this.flower_color} );
    var flower = new THREE.Mesh( geometry, material );

    this.scene.add(flower);
fork icon35
star icon0
watch icon2

+ 5 other calls in file

185
186
187
188
189
190
191
192
193
194

### 2.11 Birds
利用类似的技术,我们从Three.js的Example中找了一些飞鸟的js模型加入到我们的天空中。
```
loader.load("models/animated/stork.js", function (geometry) {
    var material = new THREE.MeshLambertMaterial({
        color: 0xffaa55,
        morphTargets: true,
        vertexColors: THREE.FaceColors
    });
fork icon16
star icon20
watch icon3

132
133
134
135
136
137
138
139
140
console.log('oldMesh');
if ((newMesh !== undefined) && (oldMesh !== undefined)) {
  console.log('doing it new!');
  var sub = newMesh.subtract(oldMesh);
  var diffMesh = sub.toMesh();
  diffMesh.material = new THREE.MeshLambertMaterial({color: 0x00FF00,
                           transparent: true, side: THREE.DoubleSide, opacity: 0.4});
  diffMesh.position.set(0, -0.25, 0);
  scene.add(diffMesh);
fork icon2
star icon13
watch icon1

+ 7 other calls in file

16
17
18
19
20
21
22
23
24

//base or custom?
var groupDetect = options.groups || baseGroupDetect;

//base
var base = options.material || new THREE.MeshLambertMaterial({
color: 0xffffff,
shading: THREE.FlatShading
});
fork icon2
star icon11
watch icon4

97
98
99
100
101
102
103
104
105
106


// Put in the floor
var floor = new THREE.Mesh(
  new THREE.CubeGeometry(world.dimensions * world.tileSize, world.dimensions * world.tileSize, world.tileSize),
  new THREE.MeshLambertMaterial({color: 0x4F4F4F})
);
floor.receiveShadow = true;
floor.castShadow = true;
floor.position.x = (world.dimensions*world.tileSize)/2;
fork icon0
star icon1
watch icon2

+ 3 other calls in file

Other functions in three

Sorted by popularity

function icon

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