# Lambert Material Morph Option Threejs Docs

**URL:** <https://discourse.threejs.org/t/lambert-material-morph-option-threejs-docs/5549>\
**Category:** Questions\
**Tags:** morph-targets, animation\
**Created:** [December 31, 2018, 10:53am UTC](https://discourse.threejs.org/t/lambert-material-morph-option-threejs-docs/5549 "2018-12-31T10:53:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![andul007](https://avatars.discourse-cdn.com/v4/letter/a/c5a1d2/32.png) [@andul007](https://discourse.threejs.org/u/andul007)\
**Post date:** [December 31, 2018, 10:53am UTC](https://discourse.threejs.org/t/lambert-material-morph-option-threejs-docs/5549/1 "2018-12-31T10:53:30Z")

</div>

Hi.

I’m trying to understand / replicate the animation of expanding and shrinking vertices in the morph targets section. If you go to: [https://threejs.org/docs/#api/en/materials/MeshLambertMaterial](https://threejs.org/docs/#api/en/materials/MeshLambertMaterial)  
and click on the **morph targets check box** in controls, you will see what I’m talking about.

It goes from this  
 ![15%20AM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/3c2ea8942a14754940161c5e201005c7a798371d.png)  
to this  
 ![44%20AM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/d38fc906417d257b805f90dca747204654485e52.png)  
and repeats

From looking at the source code on that page, I think I understand that the `generateMorphTargets()` function has a lot to do with it

```auto
function generateMorphTargets( mesh, geometry ) {

	var vertices = [], scale;

	for ( var i = 0; i < geometry.vertices.length; i ++ ) {

		vertices.push( geometry.vertices[i].clone() );

		scale = 1 + Math.random() * 0.3;

		vertices[vertices.length - 1].x *= scale;
		vertices[vertices.length - 1].y *= scale;
		vertices[vertices.length - 1].z *= scale;

	}

	geometry.morphTargets.push( { name: 'target1', vertices: vertices } );

}

```

but then in the `render()` section of the source code i don’t understand where `mesh.morphTargetInfluences` is coming from. Here’s what I mean:

```auto
		var render = function () {

				requestAnimationFrame( render );

				var time = Date.now() * 0.001;

				mesh.rotation.x += 0.005;
				mesh.rotation.y += 0.005;

				if ( prevFog !== scene.fog ) {

					mesh.material.needsUpdate = true;
					prevFog = scene.fog;

				}

				if ( mesh.morphTargetInfluences ) {

					mesh.morphTargetInfluences[0] = ( 1 + Math.sin( 4 * time ) ) / 2;

				}

				renderer.render( scene, camera );

			};

```

I would greatly appreciate your help! I just want to learn how to replicate the morph targets effect shown on the threejs docs page for lambert materials! If anyone could provide their code and an explanation for how they did it, I would really appreciate it!

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [December 31, 2018, 11:14am UTC](https://discourse.threejs.org/t/lambert-material-morph-option-threejs-docs/5549/2 "2018-12-31T11:14:14Z")

</div>

Hi!  
Maybe it would be better to start from something basic? 🙂  
[https://threejs.org/examples/?q=morph#webgl\_morphtargets](https://threejs.org/examples/?q=morph#webgl_morphtargets)

---

<div class="post-metadata">

**Author:** ![andul007](https://avatars.discourse-cdn.com/v4/letter/a/c5a1d2/32.png) [@andul007](https://discourse.threejs.org/u/andul007)\
**Post date:** [December 31, 2018, 12:18pm UTC](https://discourse.threejs.org/t/lambert-material-morph-option-threejs-docs/5549/3 "2018-12-31T12:18:33Z")

</div>

I appreciate the quick response but I think I understand the more basic morph target tutorial. Could you explain how to do the more complicated stuff?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [December 31, 2018, 1:03pm UTC](https://discourse.threejs.org/t/lambert-material-morph-option-threejs-docs/5549/4 "2018-12-31T13:03:20Z")

</div>

I have made this example not very long ago 🙂  
[https://jsfiddle.net/prisoner849/1np2uc4v/](https://jsfiddle.net/prisoner849/1np2uc4v/)

---

<div class="post-metadata">

**Author:** ![andul007](https://avatars.discourse-cdn.com/v4/letter/a/c5a1d2/32.png) [@andul007](https://discourse.threejs.org/u/andul007)\
**Post date:** [December 31, 2018, 1:47pm UTC](https://discourse.threejs.org/t/lambert-material-morph-option-threejs-docs/5549/5 "2018-12-31T13:47:37Z")

</div>

I just got it! Thanks! I just had to initialize the array for morphTargetInfluences before I started working on it

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [January 1, 2019, 9:28am UTC](https://discourse.threejs.org/t/lambert-material-morph-option-threejs-docs/5549/6 "2019-01-01T09:28:40Z")

</div>

This is the example that you should be looking at for morph targets since it uses buffer geometry:

[https://threejs.org/examples/?q=morph#webgl\_buffergeometry\_morphtargets](https://threejs.org/examples/?q=morph#webgl_buffergeometry_morphtargets)