Reference to the GameObject this component is attached to This is a three.js Object3D with additional GameObject functionality
Unique identifier for this component instance, used for finding and tracking components
OptionalsourceIdentifier for the source asset that created this component. For example, URL to the glTF file this component was loaded from
Array of knots (control points) that define the spline curve.
Each element is a SplineData object containing position, rotation, and tangent information. You can directly access and modify this array, but remember to call markDirty afterwards to trigger a curve rebuild.
Best practices:
console.log(`Spline has ${spline.spline.length} knots`);
// Access first knot
const firstKnot = spline.spline[0];
console.log("Start position:", firstKnot.position);
// Modify and mark dirty
spline.spline[2].position.y += 5;
spline.markDirty();
Get the original component type name before minification (available if the component is registered in the TypeStore)
Checks if this component is currently active (enabled and part of an active GameObject hierarchy) Components that are inactive won't receive lifecycle method calls
True if the component is enabled and all parent GameObjects are active
Whether the spline forms a closed loop.
When true:
t=1 will smoothly connect back to t=0When false (default):
Changing this property marks the spline as dirty and triggers a rebuild.
const patrol = gameObject.addComponent(SplineContainer);
patrol.closed = true; // Loop back to start
// Add points in a circle
for (let i = 0; i < 8; i++) {
const angle = (i / 8) * Math.PI * 2;
patrol.addKnot({
position: new Vector3(Math.cos(angle) * 10, 0, Math.sin(angle) * 10)
});
}
The Three.js Curve object generated from the spline knots.
This is the underlying curve implementation (typically a CatmullRomCurve3) that's used for all position and tangent sampling. The curve is automatically regenerated when the spline is marked dirty.
Note: This curve is in local space relative to the SplineContainer. Use getPointAt and getTangentAt methods to get world-space results.
The generated Three.js Curve, or null if not yet built
Enables visual debug rendering of the spline curve.
When enabled, the spline is rendered as a purple line in the scene, making it easy to visualize the path during development. The debug line automatically updates when the spline is modified.
Debug visualization:
Tip: You can also enable debug visualization globally for all splines by adding ?debugsplines
to your URL.
const spline = gameObject.addComponent(SplineContainer);
spline.debug = true; // Show purple debug line
// Add some knots to see the visualization
spline.addKnot({ position: new Vector3(0, 0, 0) });
spline.addKnot({ position: new Vector3(5, 2, 0) });
spline.addKnot({ position: new Vector3(10, 0, 5) });
Checks if this component has been destroyed
True if the component or its GameObject has been destroyed
Controls whether this component is enabled Disabled components don't receive lifecycle callbacks
Gets the forward direction vector (0,0,-1) of this component's GameObject in world space
Whether the spline needs to be rebuilt due to modifications.
The spline is marked dirty when:
The curve is automatically rebuilt on the next update frame when dirty.
true if the spline needs rebuilding, false otherwise
The layer value of the GameObject this component is attached to Used for visibility and physics filtering
The name of the GameObject this component is attached to Used for debugging and finding objects
Gets the right direction vector (1,0,0) of this component's GameObject in world space
Shorthand accessor for the current scene from the context
The scene this component belongs to
Indicates whether the GameObject is marked as static Static objects typically don't move and can be optimized by the engine
The tag of the GameObject this component is attached to Used for categorizing objects and efficient lookup
Gets the up direction vector (0,1,0) of this component's GameObject in world space
Gets the rotation of this component's GameObject in world space as a quaternion
Note: This is equivalent to calling this.gameObject.worldQuaternion
Sets the rotation of this component's GameObject in world space using a quaternion
The world rotation quaternion to set
Gets the rotation of this component's GameObject in world space as Euler angles (in degrees)
Note: This is equivalent to calling this.gameObject.worldRotation
Sets the rotation of this component's GameObject in world space using Euler angles (in degrees)
The world rotation vector to set (in degrees)
Adds a knot (control point) to the end of the spline.
You can pass either a full SplineData object or a simple object with just a position. When passing a simple object, default values are used for rotation and tangents.
The spline curve is automatically marked dirty and will be rebuilt on the next update.
Either a SplineData object or an object with at least a position property
This SplineContainer for method chaining
Destroys this component and removes it from its GameObject After destruction, the component will no longer receive lifecycle callbacks
Dispatches an event to all registered listeners
The event object to dispatch
Always returns false (standard implementation of EventTarget)
OptionalearlyCalled at the beginning of each frame before regular updates. Use for logic that needs to run before standard update callbacks.
Samples a point on the spline at a given parametric position (in world space).
The parameter t ranges from 0 to 1, where:
0 = start of the spline0.5 = middle of the spline1 = end of the splineThe returned position is in world space, accounting for the SplineContainer's transform. Values outside 0-1 are clamped to the valid range.
Parametric position along the spline (0 to 1)
Optionaltarget: Vector3Optional Vector3 to store the result (avoids allocation)
The world-space position at parameter t
// Sample 20 evenly-spaced points
const points: Vector3[] = [];
for (let i = 0; i <= 20; i++) {
const t = i / 20;
points.push(spline.getPointAt(t));
}
const reusableVector = new Vector3();
for (let i = 0; i < 100; i++) {
const point = spline.getPointAt(i / 100, reusableVector);
// Use point...
}
getTangentAt to get the direction at a point
Samples the tangent (direction) vector on the spline at a given parametric position (in world space).
The tangent represents the forward direction of the curve at point t. This is useful for:
The parameter t ranges from 0 to 1 (same as getPointAt).
The returned vector is normalized and in world space, accounting for the SplineContainer's rotation.
Parametric position along the spline (0 to 1)
Optionaltarget: Vector3Optional Vector3 to store the result (avoids allocation)
The normalized tangent vector in world space at parameter t
const position = spline.getPointAt(0.5);
const tangent = spline.getTangentAt(0.5);
object.position.copy(position);
object.lookAt(position.clone().add(tangent)); // Face along the spline
let t = 0;
update() {
t += this.context.time.deltaTime * 0.2; // Speed
if (t > 1) t = 0; // Loop
const pos = spline.getPointAt(t);
const direction = spline.getTangentAt(t);
movingObject.position.copy(pos);
movingObject.quaternion.setFromUnitVectors(
new Vector3(0, 0, 1),
direction
);
}
getPointAt to get the position at a point
OptionallateCalled after all update functions have been called. Use for calculations that depend on other components being updated first.
Marks the spline as dirty, causing it to be rebuilt on the next update frame.
Call this method whenever you manually modify the spline data (knot positions, rotations, or tangents) to ensure the curve is regenerated. This is done automatically when using addKnot or removeKnot.
OptionalonCalled after the scene has been rendered. Use for post-processing or UI updates that should happen after rendering
OptionalonCalled immediately before the scene is rendered.
Current XRFrame if in an XR session, null otherwise
OptionalonCalled before an XR session is requested Use to modify session initialization parameters
The XR session mode being requested
The session initialization parameters that can be modified
OptionalonCalled when this component's collider begins colliding with another collider.
Information about the collision that occurred
OptionalonCalled when this component's collider stops colliding with another collider.
Information about the collision that ended
OptionalonCalled each frame while this component's collider is colliding with another collider
Information about the ongoing collision
Called when the component is destroyed. Use for cleanup operations like removing event listeners
Called every time the component becomes disabled or inactive in the hierarchy. Invoked when the component or any parent GameObject becomes invisible
OptionalonCalled when this component joins an XR session or becomes active in a running session
Event data for the XR session
OptionalonCalled when this component exits an XR session or becomes inactive during a session
Event data for the XR session
OptionalonCalled when the context's pause state changes.
Whether the context is currently paused
The previous pause state
OptionalonCalled when a pointer completes a click interaction with this component's GameObject
Data about the pointer event
OptionalonCalled when a pointer button is pressed while over this component's GameObject
Data about the pointer event
OptionalonCalled when a pointer enters this component's GameObject
Data about the pointer event
OptionalonCalled when a pointer exits this component's GameObject
Data about the pointer event
OptionalonCalled when a pointer moves while over this component's GameObject
Data about the pointer event
OptionalonCalled when a pointer button is released while over this component's GameObject
Data about the pointer event
OptionalonCalled when this component's trigger collider is entered by another collider
The collider that entered this trigger
OptionalonCalled when another collider exits this component's trigger collider
The collider that exited this trigger
OptionalonCalled each frame while another collider is inside this component's trigger collider
The collider that is inside this trigger
OptionalonCalled each frame while this component is active in an XR session
Event data for the current XR frame
OptionalonCalled when a field decorated with @validate() is modified.
Optionalprop: stringThe name of the field that was changed
OptionalonXRControllerCalled when an XR controller is connected or when this component becomes active in a session with existing controllers
Event data for the controller that was added
OptionalonXRControllerCalled when an XR controller is disconnected or when this component becomes inactive during a session with controllers
Event data for the controller that was removed
Removes a knot (control point) from the spline.
You can remove a knot either by its numeric index in the spline array or by passing a reference to the SplineData object itself.
The spline curve is automatically marked dirty and will be rebuilt on the next update.
Either the numeric index of the knot to remove, or the SplineData object reference
This SplineContainer for method chaining
OptionalresolveCalled when this component needs to remap guids after an instantiate operation.
Mapping from old guids to newly generated guids
Sets the position of this component's GameObject in world space using individual coordinates
X-coordinate in world space
Y-coordinate in world space
Z-coordinate in world space
Sets the rotation of this component's GameObject in world space using quaternion components
X component of the quaternion
Y component of the quaternion
Z component of the quaternion
W component of the quaternion
Sets the rotation of this component's GameObject in world space using individual Euler angles
X-axis rotation
Y-axis rotation
Z-axis rotation
Whether the values are in degrees (true) or radians (false)
OptionalstartCalled once at the beginning of the first frame after the component is enabled. Use for initialization that requires other components to be awake.
Starts a coroutine that can yield to wait for events. Coroutines allow for time-based sequencing of operations without blocking. Coroutines are based on generator functions, a JavaScript language feature.
Generator function to start
Event to register the coroutine for (default: FrameEvent.Update)
The generator function that can be used to stop the coroutine
Stops a coroutine that was previously started with startCoroutine
The routine to be stopped
The frame event the routine was registered with
OptionalsupportsXRDetermines if this component supports a specific XR mode
The XR session mode to check support for
True if the component supports the specified mode
SplineContainer manages spline curves defined by a series of knots (control points).
This component stores spline data and generates smooth curves that can be used for animation paths, camera paths, racing tracks, or any curved path in 3D space.
How It Works: The spline is defined by an array of SplineData knots. Each knot contains:
The component uses Catmull-Rom interpolation to create smooth curves between knots. The curve is automatically
rebuilt when knots are added, removed, or marked dirty, and all sampling methods return positions in world space.
Key Features:
Common Use Cases:
Example: Basic spline setup with knots
Example: Creating a closed loop spline
Example: Sampling points along a spline
Example: Dynamic knot manipulation
Example: Using with SplineWalker for animation
Debug Visualization: Add
?debugsplinesto your URL to enable debug visualization, which draws the spline curve as a purple line. You can also enable it programmatically:See
Component