Question

I’ve been following this tutorial: http://www.html5canvastutorials.com/webgl/html5-canvas-webgl-cylinder-with-three-js/ (or just copy&pasting it). It works very well (FF only I think), but for my “project” I need to animate the size of the Cylinder. How can this be done?

The rotation is animated like this:

three.cylinder.rotation.x += angleChange;

I’ve tried several things like size.height, .height, scale.height, scale[0] and so on, but I can’t find the correct function.

Does anyone know how this can be achieved?

Answer 1

inside the animate() function, try this:

three.cylinder.scale.set( 1, Math.abs( Math.sin( time * 0.0002 ) ), 1 );

This will scale the internal y-dimension, and leave the x- and z-dimensions unchanged. Due to the orientation of the cylinder, the y-dimension is, in this case, the length.