Nodes/WAS Node Suite v3/Three Custom Update
ComfyUI Node Runs on cloud

Three Custom Update

Per-frame JavaScript when an animation node isn't enough

By WASasquatch·Created 3 years ago·Updated 4 days ago· 1,844
Three Custom Update
  • object
  • animated
javascriptobject.rotation.y += delta * 0.5;

Three Animate Transform handles the classic motions - spin, bob, pulse - with widgets. Then you want an orbit that's actually an ellipse, or a sine wave that travels along the surface, or a flocking wobble, and widgets give out. Three Custom Update is the frame-by-frame escape hatch: a javascript body that runs once per drawn frame, handed the object it's supposed to move.

The scope you get is the interesting part. object is the thing to move (the node wraps rather than changes it, same as the animation node). time is seconds since the viewer started, and delta is seconds since the last frame - that pair is the whole game. THREE is in scope for anything you need to construct, and ctx is a little pocket you can stuff things into between frames, for state that has to survive across the animation.

The default body is the cleanest possible demonstration of why delta exists:

object.rotation.y += delta * 0.5;

Because delta is real elapsed time, that rotation advances 0.5 radians per second no matter whether your monitor runs at 30 fps or 144. Write object.rotation.y += 0.5 without it and the object spins at the mercy of your frame rate - faster on a gaming monitor, slower on a laptop. The rule of thumb the tooltip gives you: scale anything time-based by delta, and your motion stays the same speed everywhere. If you want motion keyed to a beat rather than to real time, time is your clock (object.position.y = Math.sin(time) * 0.5 is a hover that needs no delta at all).

Nothing is returned - the body mutates object (or whatever it needs) and the animated output carries the wrapped result to Three Group or Three Scene's root. It's the right tool when Three Animate Transform's rotate/bob/pulse vocabulary runs out, and it composes with the rest of the suite: animate a subtle code-driven wobble on top of a widget-driven turntable by feeding one into the other.

The standing warning applies in full: this code runs in your browser on every frame, with the reach of any frontend extension. Only run workflows whose custom JavaScript you trust. A misbehaving body here doesn't just fail once - it runs every single frame until you stop the viewer, so keep the bodies short and test them live before you queue a long render.

Installing it

Part of WAS Node Suite v3 - ComfyUI Manager search WAS Node Suite v3, or clone:

cd ComfyUI/custom_nodes
git clone https://github.com/WASasquatch/was-node-suite-comfyui.git

Restart; needs ComfyUI 0.14.0+ / Python 3.10+. If the Three menu is missing, set features.threejs: true in <ComfyUI user dir>/was-node-suite/config.yaml.

If it looks wrong

Motion that speeds up and slows down with your GPU load is a missing delta multiply. Motion that doesn't happen at all usually means the body errors on the first frame - check the browser console rather than the ComfyUI log, since that's where the error lives.

CategoryWAS Suite/Three

Inputs (2)

NameTypeDefaultDescription
objectTHREE_OBJECTThe object the code moves. It is wrapped rather than changed.
javascriptSTRINGobject.rotation.y += delta * 0.5;A body run each frame, as `object.position.y = Math.sin(time) * 0.5;`. Nothing is returned.

Outputs (1)

NameTypeDescription
animatedTHREE_OBJECTThe moving object, for Three Group or the root socket on Three Scene.