Hello, if been going crazy to figure out how to animate an ExtrudeGeometry in three.js that follows an arc (quarter cricle). I’ve been able to increase extrusion via the “amount” value for extrudeSettings in real time and to extrude along a spline via THREE.CatmullRomCurve3 path. BUT not figuring how to smoothly in/decrease extrusion along an arc path.
Any ideas how i could achieve that? thanks one million!
Ps. i tried darwing an ellipse curve via “new THREE.EllipseCurve” and getting its points by “new THREE.Path( circle.getPoints( 10 ) )” to add them stepwise into an CatmullRomCurve3 but failed.
I don’t think this will work well - geometries are not generally intended to be changed in real-time.
One possibility though might be to use ExtrudeBufferGeometry (you should be using BufferGeometry over Geometry anyway in general), create the full geometry and then set the .drawrange to control how much of it is rendered. Depending on how the vertices are created in the geometry this might work.
Just as looeee said, the extrusion in THREE isn’t made for realtime, to get a visually smooth grow you could also do it with shaders, adding a vertex attribute wich stores the length position of the vertices along the spline. You could then scale or fade it along the spline, but using drawRange as looeee suggested might be easier for you, if it visually fits your needs.
Thanks for the replies! To use .setDrawRange sounds very instersting. Might be much more powerfull in performance. Anybody has an example sketch for it?
Meanwhile actually figured how to do it with .extrudeBufferGemoetry. I first figured to draw an ellipse path from scratch (since 2DVectorpath is not supported) and used a variable for the EndAngle. changing that results in live Extrution via .extrudeBufferGemoetry:
function ellipsePath(){
radius = 1;
degreesStart = 0;
degreesEnd = variable;
radiansStart = (degreesStart * Math.PI) / 180;
radiansEnd = ((degreesEnd) * Math.PI) / 180;
//getpoints for the curve and make it a path CURVE
ringPath = new THREE.Curve();
ringPath.getPoint = function (t) {
// trace the arc as t ranges from 0 to 1
var segment = (radiansStart - radiansEnd) * t;
return new THREE.Vector3(radius * Math.cos(segment), radius * Math.sin(segment), 0);
};
}
It’s a bit slow with many steps, but it wokrs for now.
You should be careful with generating geometry with those in realtime, it’s not only the performance/speed, but also the memory ramps up very quickly, the GC doesn’t catch up or there might be minor memory leaks which grow into big ones, this can cause a crash soon or later, on mobile earlier.
For drawRange you only need to set drawRange.count to the number of faces * 3, but visually it means each triangle will popup one after the next, with a higher amount of steps and speed this should look smooth.
I understand, sounds like something to worry about. Will it also fill up RAM if i delete the mesh each time its redrawn with scene.remove(); befor drawing it again, and only during extrusion animation ?
because thats how i did it for now and it seems to work quite okay.
But not sure with more added to the scene, obviously…
@Fyrestar I tried to set the Range via .setDrawRange but seems not to work:
//make extrudebuffergeometry out of an previously defined shape + extrudesettings
geometry1 = new THREE.ExtrudeBufferGeometry( shape1, extrudeSettings );
//set the range to 3 starting from index
geometry1.setDrawRange( {start: 0, count: 3} );
what am i doing wrong?
the shape draws fine without .setDrawRange but disappears when it’s set…
also setting:
geometry1.drawRange.count = 6;
results in non display of the mesh. even though console.log returns “infinity” as standart for geometry1.drawRange.count and it correctly returns the right set value after setting it.
EDIT:
I actually found that .setDrawRange(); will draw the vertices step by step only by very high values.
For example when using a STAR shape, it draws only each edge one after another, starting by a value like 100 to 300, even though steps are set to 10 in the extrudeSettings…
Therefor, when setting drawRange.count to under 100 it results in non display.
Simpler than the shader approach might be to create lots of geometries, each the representing one ‘growth step’ then combine them into one. If each original geometry has a specific number of vertices then you can just increment drawrange by that number each time.
Or you could keep them separate and control the visibility of each - in this case you might want to look into instancing for best performance.
