Shape lineTo animation [noob question]

Hi! After 30 hours of fighting with shape animation, I am asking you for help.

I want to change the values used in “shape.lineTo (…)” in a smooth way. This is part of my code:

  var animatedPart = 40; // I want to change this to 80
  var shape = new THREE.Shape();
  shape.moveTo( 0,0 );
  shape.lineTo( animatedPart, width );
  shape.lineTo( length, width );
  shape.lineTo( length, 0 );
  shape.lineTo( 0, 0 );
  
  var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
	box = new THREE.Mesh(geometry, material);
	box.rotation.y = Math.PI/5;
	scene.add(box);

Here is full example (above part is at 52 line):
https://codepen.io/michalkowalczyk/pen/abzWWOX

How can I do it, used ExtrudeGeometry, Shape and drawing methods like lineTo or bezierCurveTo? Is it possible?

I found the solution, maybe it will be helpful for other noobs, who starts with three.js :smiley:

Here is working example:

Explainations in few words:
I used MorphTargets!

  1. I’ve created first Shape for represent first step of my animation, and create first geom

  2. I’ve created second Shape for represent last step of my animation, and create second geom

  3. I’ve push following object to my first geom.morphTargets

    var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
    var geoShapeTwo = new THREE.ExtrudeGeometry( shapeTwo, extrudeSettings );
    geometry.morphTargets.push({vertices: geoShapeTwo.vertices})

Next I created mesh object used first geom. It gives me possibility to morph my object by change of this value: box.morphTargetInfluences[0]. Value has range from 0 to 1. If it is closer to 0 - animation will be closer to first shape. If it is closer to 1 - animation will be closer to second Shape.

For better understand just check animatedShape() method in my example.

I’m not sure, that this is fine solution. I need to check perfomance. Anyway, I hope, that this primitive animation will help someone with hard first steps in three.js.

If you have any suggestions about performance, will be grateful :slight_smile:

EDIT
Improved version 3 posts belove

Using morph targets for vertex displacement is definitely a valid approach :+1:

You could consider to move your code to BufferGeometry which will speed up the start up time of your app.

2 Likes

I wanted to add your example to the Collection of examples from discourse.threejs.org.

When I took it over, I got the error

2019-12-27_18.25.50
Looking closer, I found a very old version of three.js2019-12-27_18.29.04

A solution for the current version would be interesting. :slightly_smiling_face:

1 Like

I have improved this example a bit:

Now it works on version 110 and I used ExtrudeBufferGeometry. Thanks for finding this useful and worthy of a collection of examples :slight_smile:

1 Like

Completed

:white_check_mark: discourse.threejs.hofk.de

* discourse.threejs.hofk.de

1 Like