The context is the main object that holds all the data and state of the Needle Engine.
It can be used to access the scene, renderer, camera, input, physics, networking, and more.

Example

import { Behaviour } from "@needle-tools/engine";
export class MyScript extends Behaviour {
start() {
console.log("Hello from MyScript");
this.context.scene.add(new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial()));
}
}

Implements

  • IContext

Constructors

Properties

alias: string

An alias for the context

animations: AnimationsRegistry

access animation mixer used by components in the scene

Deprecated

AssetDataBase is deprecated

connection: NetworkConnection

access networking methods (use it to send or listen to messages or join a networking backend)

domElement: HTMLElement

The <needle-engine> web component

hash?: string

used to append to loaded assets

isManagedExternally: boolean = false

When the renderer or camera are managed by an external process (e.g. when running in r3f context). When this is false you are responsible to call update(timestamp, xframe.
It is also currently assumed that rendering is handled performed by an external process

isPaused: boolean = false

set to true to pause the update loop. You can receive an event for it in your components. Note that script updates will not be called when paused

mainCameraComponent: Camera = undefined

The main camera component of the scene - this camera is used for rendering

maxRenderResolution?: Vec2

Clamps the renderer max resolution. If undefined the max resolution is not clamped. Default is undefined

name: string

The name of the context

physics: Physics

access physics related methods (e.g. raycasting). To access the phyiscs engine use context.physics.engine

post_render_callbacks: Function[] = []

called every frame after rendering (after all component events)

post_setup_callbacks: Function[] = []

callbacks called once after the context has been created

pre_render_callbacks: ((frame) => void)[] = []

called every frame before rendering (after all component events)

Type declaration

    • (frame): void
    • Parameters

      • frame: XRFrame

      Returns void

pre_update_callbacks: Function[] = []

called every frame at the beginning of the frame (after component start events and before earlyUpdate)

pre_update_oneshot_callbacks: Function[] = []

called every frame befroe update (this list is emptied every frame)

runInBackground: boolean = false

When enabled the application will run while not visible on the page

targetFrameRate?: number | {
    value?: number;
}

Set to the target framerate you want your application to run in (you can use ?stats to check the fps) Set to undefined if you want to run at the maximum framerate

Type declaration

  • Optional value?: number
time: Time

access timings (current frame number, deltaTime, timeScale, ...)

xr: NeedleXRSession = null

shorthand for NeedleXRSession.active
Automatically set by NeedleXRSession when a XR session is active

Returns

the active XR session or null if no session is active

Accessors

  • get currentFrameEvent(): FrameEvent
  • Current event of the update cycle

    Returns FrameEvent

  • get depthTexture(): DepthTexture
  • Returns DepthTexture

  • get domHeight(): number
  • The height of the <needle-engine> element on the website

    Returns number

  • get domWidth(): number
  • The width of the <needle-engine> element on the website

    Returns number

  • get domX(): number
  • the X position of the Needle Engine element on the website

    Returns number

  • get domY(): number
  • the Y position of the Needlee Engine element on the website

    Returns number

  • get isCreated(): boolean
  • Returns boolean

  • get isInAR(): boolean
  • Returns boolean

  • get isInPassThrough(): boolean
  • If a XR session is active and in pass through mode (immersive-ar on e.g. Quest)

    Returns boolean

  • get isInVR(): boolean
  • Returns boolean

  • get isInXR(): boolean
  • Returns boolean

  • get isRendering(): boolean
  • Returns boolean

  • get isVisibleToUser(): boolean
  • returns true if the dom element is visible on screen

    Returns boolean

  • get mainCamera(): Camera
  • The main camera of the scene - this camera is used for rendering

    Returns Camera

  • set mainCamera(cam): void
  • Set the main camera of the scene. If set to null the camera of the mainCameraComponent will be used - this camera is used for rendering

    Parameters

    Returns void

  • get opaqueColorTexture(): Texture
  • Returns Texture

  • get resolutionScaleFactor(): number
  • Returns number

  • set resolutionScaleFactor(val): void
  • use to scale the resolution up or down of the renderer. default is 1

    Parameters

    • val: number

    Returns void

  • get version(): string
  • The needle engine version

    Returns string

  • get xrCamera(): WebXRArrayCamera
  • Returns WebXRArrayCamera

    the current WebXR camera while the WebXRManager is active (shorthand for context.renderer.xr.getCamera())

  • get xrSession(): XRSession
  • access the raw XRSession object (shorthand for context.renderer.xr.getSession()). For more control use NeedleXRSession.active

    Returns XRSession

  • get xrSessionMode(): XRSessionMode
  • Returns XRSessionMode

  • get Current(): Context
  • The currently active context. Only set during the update loops

    Returns Context

  • get DefaultTargetFrameRate(): number
  • When a new context is created this is the framerate that will be used by default

    Returns number

  • set DefaultTargetFrameRate(val): void
  • When a new context is created this is the framerate that will be used by default

    Parameters

    • val: number

    Returns void

  • get DefaultWebGLRendererParameters(): WebGLRendererParameters
  • The default parameters that will be used when creating a new WebGLRenderer.
    Modify in global context to change the default parameters for all new contexts.

    Returns WebGLRendererParameters

    Example

    import { Context } from "@needle-tools/engine";
    Context.DefaultWebGLRendererParameters.antialias = false;

Methods

  • use this to subscribe to onAfterRender events on threejs objects

    Parameters

    Returns void

  • use this to subscribe to onBeforeRender events on threejs objects

    Parameters

    Returns void

  • Will destroy all scenes and objects in the scene

    Returns void

  • calling this function will dispose the current renderer and create a new one

    Parameters

    • Optional params: WebGLRendererParameters

    Returns void

  • Returns void

  • Parameters

    Returns Promise<boolean>

    Deprecated

    use create. This method will be removed in a future version

  • Returns void

    Deprecated

    use dispose()

  • This will recreate the whole needle engine context and dispose the whole scene content
    All content will be reloaded (loading times might be faster due to browser caches)
    All scripts will be recreated

    Returns void

  • Parameters

    • script: IComponent
    • coroutine: Generator<unknown, any, unknown>
    • evt: FrameEvent

    Returns Generator<unknown, any, unknown>

  • Parameters

    Returns void

  • Parameters

    Returns void

  • Parameters

    Returns void

  • Parameters

    Returns boolean

  • will request a renderer size update the next render call (will call updateSize the next update)

    Returns void

  • Sets the animation loop.
    Can not be done while creating the context or when disposed

    Returns boolean

  • Parameters

    Returns void

  • Parameters

    • val: boolean

    Returns void

  • Parameters

    • val: boolean

    Returns void

  • Parameters

    • script: IComponent

    Returns void

  • Parameters

    • coroutine: Generator<unknown, any, unknown>
    • evt: FrameEvent

    Returns void

  • Performs a full update step including script callbacks, rendering (unless isManagedExternally is set to false) and post render callbacks

    Parameters

    • timestamp: number
    • Optional frame: XRFrame

    Returns void

  • Parameters

    Returns void

  • Call to manually perform physics steps.
    By default the context uses the physicsSteps property to perform steps during the update loop
    If you just want to increase the accuracy of physics you can instead set the physicsSteps property to a higher value

    Parameters

    • steps: number

    Returns void

  • update the renderer and canvas size

    Parameters

    • force: boolean = false

    Returns void

Generated using TypeDoc