Skip to content

Paths & Splines

Build a smooth curve through a set of control points and drive an object along it. Paths are a runtime construct – scene.createPath(...) returns a handle you query and hand to entity.followPath(...); they aren't saved in the experience.

Create a path

Pass at least two control points. The curve is a smooth spline through them:

javascript
var path = scene.createPath({
    points: [
        new Vector3(-0.6, 0, -1.2),
        new Vector3(-0.2, 0.4, -1.2),
        new Vector3(0.2, -0.2, -1.4),
        new Vector3(0.6, 0.3, -1.2)
    ]
});

createPath returns null if you pass fewer than two valid points.

Query the curve

MemberResult
path.lengthTotal arc length, in metres.
path.point(t)Position at parameter t (0…1 across the whole path).
path.pointAtDistance(d)Position at arc-length distance d (0…length) – constant-speed spacing.
path.tangent(t)Unit direction of travel at parameter t.
javascript
console.log('length', path.length.toFixed(2), 'm');

// Drop a marker every fifth of the way along, evenly spaced by distance.
for (var i = 0; i <= 5; i++) {
    var p = path.pointAtDistance((i / 5) * path.length);
    await scene.createEntity(createSphere(0.01).anchor(Anchor.position(p.x, p.y, p.z)));
}

Follow a path

entity.followPath(path, options) animates an object along the curve:

javascript
var box = await scene.createEntity(
    createBox(0.05, 0.05, 0.05).anchor(Anchor.position(0, 0, 0))
);

box.followPath(path, {
    duration: 4,
    constantSpeed: true,    // even speed regardless of control-point spacing (default true)
    alignsToTangent: true,  // nose points along the direction of travel (default false)
    timing: 'easeInOut',    // linear | easeIn | easeOut | easeInOut
    repeat: true            // true to loop, or a number of cycles
});

Anchor anywhere

followPath positions the object in world space, so the anchor you give the object only sets its starting reference – the path drives it from there.