Appearance
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
| Member | Result |
|---|---|
path.length | Total 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.