@masatomakino/threejs-billboard
    Preparing search index...

    Class MultiViewPixiPlaneMesh

    Plane mesh class that uses PixiJS v8 multiView functionality for independent Canvas rendering.

    This class extends Three.js Mesh and maintains its own HTMLCanvasElement and PixiJS Container. Rendering management is handled by PixiMultiViewManager, and camera following functionality is provided through CameraChaser.

    Compared to SharedStagePlaneMesh, MultiViewPixiPlaneMesh provides each instance with an independent Canvas, offering performance advantages when partial content updates are frequent. It also handles dynamic plane mesh counts more flexibly.

    However, SharedStagePlaneMesh uses a single shared Canvas via SharedStageTexture, allowing texture and material instances to be shared across multiple plane meshes for reduced draw calls, though it has Canvas size limitations that may cause texture mapping failures with many meshes.

    Best Use Cases: MultiViewPixiPlaneMesh is ideal when you have many plane meshes that update frequently and independently, or when the required number of plane meshes varies dynamically.

    // Initialize manager
    const manager = new PixiMultiViewManager();
    await manager.init();

    // Create plane mesh with independent canvas
    const planeMesh = new MultiViewPixiPlaneMesh({
      manager: manager,
      width: 512,
      height: 512,
      scale: 1.0
    });

    // Add content to the PixiJS container
    const graphics = new Graphics();
    graphics.rect(0, 0, 100, 100).fill(0xff0000);
    planeMesh.container.addChild(graphics);

    // Enable camera following (optional)
    planeMesh.cameraChaser.enabled = true;

    // Update content and request re-render
    planeMesh.updateContent();

    scene.add(planeMesh);

    Hierarchy

    • Mesh
      • MultiViewPixiPlaneMesh

    Implements

    Index

    Constructors

    constructor

    Properties

    animations castShadow children count customDepthMaterial? customDistanceMaterial? frustumCulled geometry id isMesh isObject3D layers material matrix matrixAutoUpdate matrixWorld matrixWorldAutoUpdate matrixWorldNeedsUpdate modelViewMatrix morphTargetDictionary? morphTargetInfluences? name normalMatrix parent position quaternion receiveShadow renderOrder rotation scale type up userData uuid visible DEFAULT_MATRIX_AUTO_UPDATE DEFAULT_MATRIX_WORLD_AUTO_UPDATE DEFAULT_UP

    Accessors

    cameraChaser canvas container isDisposed texture

    Methods

    add addEventListener applyMatrix4 applyQuaternion attach clear clone copy dispatchEvent dispose getObjectById getObjectByName getObjectByProperty getObjectsByProperty getVertexPosition getWorldDirection getWorldPosition getWorldQuaternion getWorldScale hasEventListener localToWorld lookAt onAfterRender onAfterShadow onBeforeRender onBeforeShadow raycast remove removeEventListener removeFromParent rotateOnAxis rotateOnWorldAxis rotateX rotateY rotateZ setRotationFromAxisAngle setRotationFromEuler setRotationFromMatrix setRotationFromQuaternion setScale toJSON translateOnAxis translateX translateY translateZ traverse traverseAncestors traverseVisible updateContent updateMatrix updateMatrixWorld updateMorphTargets updateWorldMatrix worldToLocal

    Constructors

    • Creates a new MultiViewPixiPlaneMesh instance.

      The constructor initializes the plane mesh with its own canvas, PixiJS container, Three.js texture, and CameraChaser. It automatically registers with the provided manager for rendering coordination.

      Parameters

      • options: MultiViewPixiPlaneMeshOptions

        Constructor options including manager, dimensions, and scale

      Returns MultiViewPixiPlaneMesh

      const manager = new PixiMultiViewManager();
      await manager.init();

      const planeMesh = new MultiViewPixiPlaneMesh({
        manager: manager,
        width: 512,
        height: 512,
        scale: 1.0
      });

    Properties

    animations: AnimationClip[]

    Array with object's animation clips.

    []

    castShadow: boolean

    Whether the object gets rendered into shadow map.

    false

    children: Object3D<Object3DEventMap>[]

    Array with object's children.

    THREE.Object3DGroup | Group for info on manually grouping objects.

    []

    count: number

    The number of instances of this mesh. Can only be used with WebGPURenderer.

    1
    customDepthMaterial?: Material

    Custom depth material to be used when rendering to the depth map.

    Can only be used in context of meshes. When shadow-casting with a THREE.DirectionalLight | DirectionalLight or THREE.SpotLight | SpotLight, if you are modifying vertex positions in the vertex shader you must specify a customDepthMaterial for proper shadows.

    undefined

    customDistanceMaterial?: Material

    Same as customDepthMaterial, but used with THREE.Object3DPointLight | PointLight.

    undefined

    frustumCulled: boolean

    When this is set, it checks every frame if the object is in the frustum of the camera before rendering the object. If set to false the object gets rendered every frame even if it is not in the frustum of the camera.

    true

    geometry: BufferGeometry

    An instance of THREE.BufferGeometry | BufferGeometry (or derived classes), defining the object's structure.

    THREE.BufferGeometry | new THREE.BufferGeometry().

    id: number

    Unique number for this Object3D instance.

    Note that ids are assigned in chronological order: 1, 2, 3, ..., incrementing by one for each new object. Expects a Integer

    isMesh: true

    Read-only flag to check if a given object is of type Mesh.

    This is a constant value

    true

    isObject3D: true

    Flag to check if a given object is of type Object3D.

    This is a constant value

    true

    layers: Layers

    The layer membership of the object.

    The object is only visible if it has at least one layer in common with the THREE.Object3DCamera | Camera in use. This property can also be used to filter out unwanted objects in ray-intersection tests when using THREE.Raycaster | Raycaster.

    new THREE.Layers()

    material: Material | Material[]

    An instance of material derived from the THREE.Material | Material base class or an array of materials, defining the object's appearance.

    THREE.MeshBasicMaterial | new THREE.MeshBasicMaterial().

    matrix: Matrix4

    The local transform matrix.

    new THREE.Matrix4()

    matrixAutoUpdate: boolean

    When this is set, it calculates the matrix of position, (rotation or quaternion) and scale every frame and also recalculates the matrixWorld property.

    DEFAULT_MATRIX_AUTO_UPDATE - that is (true).

    matrixWorld: Matrix4

    The global transform of the object.

    If the Object3D has no parent, then it's identical to the local transform THREE.Object3D.matrix | .matrix.

    new THREE.Matrix4()

    matrixWorldAutoUpdate: boolean

    If set, then the renderer checks every frame if the object and its children need matrix updates. When it isn't, then you have to maintain all matrices in the object and its children yourself.

    DEFAULT_MATRIX_WORLD_AUTO_UPDATE - that is (true).

    matrixWorldNeedsUpdate: boolean

    When this is set, it calculates the matrixWorld in that frame and resets this property to false.

    false

    modelViewMatrix: Matrix4

    new THREE.Matrix4()

    morphTargetDictionary?: { [key: string]: number }

    A dictionary of morphTargets based on the morphTarget.name property.

    undefined, but rebuilt by .updateMorphTargets().

    morphTargetInfluences?: number[]

    An array of weights typically from 0-1 that specify how much of the morph is applied.

    undefined, but reset to a blank array by .updateMorphTargets().

    name: string

    Optional name of the object

    (doesn't need to be unique).

    ""

    normalMatrix: Matrix3

    new THREE.Matrix3()

    parent: null | Object3D<Object3DEventMap>

    Object's parent in the scene graph.

    An object can have at most one parent.

    null

    position: Vector3

    Object's local position.

    new THREE.Vector3() - that is (0, 0, 0).

    quaternion: Quaternion

    Object's local rotation as a THREE.Quaternion | Quaternion.

    new THREE.Quaternion() - that is (0, 0, 0, 1).

    receiveShadow: boolean

    Whether the material receives shadows.

    false

    renderOrder: number

    This value allows the default rendering order of scene graph objects to be overridden although opaque and transparent objects remain sorted independently.

    When this property is set for an instance of Group | Group, all descendants objects will be sorted and rendered together. Sorting is from lowest to highest renderOrder.

    0

    rotation: Euler

    Object's local rotation (Euler angles), in radians.

    new THREE.Euler() - that is (0, 0, 0, Euler.DEFAULT_ORDER).

    scale: Vector3

    The object's local scale.

    new THREE.Vector3( 1, 1, 1 )

    type: string

    Mesh

    up: Vector3

    This is used by the lookAt method, for example, to determine the orientation of the result.

    Object3D.DEFAULT_UP - that is (0, 1, 0).

    userData: Record<string, any>

    An object that can be used to store custom data about the Object3D.

    It should not hold references to functions as these will not be cloned.

    {}

    uuid: string

    UUID of this object instance.

    This gets automatically assigned and shouldn't be edited.

    visible: boolean

    Object gets rendered if true.

    true

    DEFAULT_MATRIX_AUTO_UPDATE: boolean

    The default setting for matrixAutoUpdate for newly created Object3Ds.

    true

    DEFAULT_MATRIX_WORLD_AUTO_UPDATE: boolean

    The default setting for matrixWorldAutoUpdate for newly created Object3Ds.

    true

    DEFAULT_UP: Vector3

    The default up direction for objects, also used as the default position for THREE.DirectionalLight | DirectionalLight, THREE.HemisphereLight | HemisphereLight and THREE.Spotlight | Spotlight (which creates lights shining from the top down).

    new THREE.Vector3( 0, 1, 0)

    Accessors

    • get cameraChaser(): undefined | CameraChaser

      Gets the CameraChaser instance for this plane mesh.

      The CameraChaser enables Y-axis camera following functionality. Use this to control whether the plane mesh should rotate to follow the camera.

      Returns undefined | CameraChaser

      The CameraChaser instance, or undefined if disposed

    • get canvas(): HTMLCanvasElement

      Gets the HTMLCanvasElement associated with this plane mesh.

      This canvas serves as both the PixiJS render target and the source for the Three.js texture applied to the plane mesh.

      Returns HTMLCanvasElement

      The canvas element for this plane mesh instance

    • get container(): Container

      Gets the PixiJS Container associated with this plane mesh.

      This container is the root display object for PixiJS content. External access is allowed for adding/removing children, but the container reference itself should not be overwritten.

      Returns Container

      The PixiJS container for content management

    • get texture(): Texture

      Gets the Three.js Texture associated with this plane mesh.

      This texture references the HTMLCanvasElement and is automatically updated by PixiMultiViewManager when the canvas content changes through PixiJS rendering.

      Returns Texture

      The texture used by the plane mesh

    Methods

    • Adds another Object3D as child of this Object3D.

      Parameters

      • ...object: Object3D<Object3DEventMap>[]

      Returns this

      An arbitrary number of objects may be added Any current parent on an object passed in here will be removed, since an Object3D can have at most one parent.

      • attach
      • THREE.Group | Group for info on manually grouping objects.

    • Adds a listener to an event type.

      Type Parameters

      • T extends keyof Object3DEventMap

      Parameters

      • type: T

        The type of event to listen to.

      • listener: EventListener<Object3DEventMap[T], T, MultiViewPixiPlaneMesh>

        The function that gets called when the event is fired.

      Returns void

    • Applies the matrix transform to the object and updates the object's position, rotation and scale.

      Parameters

      • matrix: Matrix4

      Returns void

    • Applies the rotation represented by the quaternion to the object.

      Parameters

      • quaternion: Quaternion

      Returns this

    • Adds a Object3D as a child of this, while maintaining the object's world transform.

      Parameters

      • object: Object3D

      Returns this

      Note: This method does not support scene graphs having non-uniformly-scaled nodes(s).

      add

    • Removes all child objects.

      Returns this

    • Returns a clone of this object and optionally all descendants.

      Parameters

      • Optionalrecursive: boolean

        If true, descendants of the object are also cloned. Default true

      Returns this

    • Copies the given object into this object.

      Parameters

      • object: Object3D
      • Optionalrecursive: boolean

        If set to true, descendants of the object are copied next to the existing ones. If set to false, descendants are left unchanged. Default is true.

      Returns this

      Event listeners and user-defined callbacks (.onAfterRender and .onBeforeRender) are not copied.

    • Fire an event type.

      Type Parameters

      • T extends keyof Object3DEventMap

      Parameters

      • event: BaseEvent<T> & Object3DEventMap[T]

        The event that gets fired.

      Returns void

    • Releases all resources held by this plane mesh instance.

      This method properly disposes of the geometry, materials, PixiJS container, canvas element, CameraChaser, and removes the plane mesh from its parent in the scene. Call this when the plane mesh is no longer needed to prevent memory leaks.

      Returns void

      // Clean up when plane mesh is no longer needed
      planeMesh.dispose();

    • Searches through an object and its children, starting with the object itself, and returns the first with a matching id.

      Parameters

      • id: number

        Unique number of the object instance. Expects a Integer

      Returns undefined | Object3D<Object3DEventMap>

      Note that ids are assigned in chronological order: 1, 2, 3, ..., incrementing by one for each new object.

      id

    • Searches through an object and its children, starting with the object itself, and returns the first with a matching name.

      Parameters

      • name: string

        String to match to the children's Object3D.name property.

      Returns undefined | Object3D<Object3DEventMap>

      Note that for most objects the name is an empty string by default You will have to set it manually to make use of this method.

    • Searches through an object and its children, starting with the object itself, and returns the first with a property that matches the value given.

      Parameters

      • name: string

        the property name to search for.

      • value: any

        value of the given property.

      Returns undefined | Object3D<Object3DEventMap>

    • Searches through an object and its children, starting with the object itself, and returns the first with a property that matches the value given.

      Parameters

      • name: string

        The property name to search for.

      • value: any

        Value of the given property.

      • OptionaloptionalTarget: Object3D<Object3DEventMap>[]

        target to set the result. Otherwise a new Array is instantiated. If set, you must clear this array prior to each call (i.e., array.length = 0;).

      Returns Object3D<Object3DEventMap>[]

    • Get the local-space position of the vertex at the given index, taking into account the current animation state of both morph targets and skinning.

      Parameters

      • index: number

        Expects a Integer

      • target: Vector3

      Returns Vector3

    • Returns a vector representing the direction of object's positive z-axis in world space.

      Parameters

      • target: Vector3

        The result will be copied into this Vector3.

      Returns Vector3

    • Returns a vector representing the position of the object in world space.

      Parameters

      • target: Vector3

        The result will be copied into this Vector3.

      Returns Vector3

    • Returns a quaternion representing the rotation of the object in world space.

      Parameters

      • target: Quaternion

        The result will be copied into this Quaternion.

      Returns Quaternion

    • Returns a vector of the scaling factors applied to the object for each axis in world space.

      Parameters

      • target: Vector3

        The result will be copied into this Vector3.

      Returns Vector3

    • Checks if listener is added to an event type.

      Type Parameters

      • T extends keyof Object3DEventMap

      Parameters

      • type: T

        The type of event to listen to.

      • listener: EventListener<Object3DEventMap[T], T, MultiViewPixiPlaneMesh>

        The function that gets called when the event is fired.

      Returns boolean

    • Converts the vector from this object's local space to world space.

      Parameters

      • vector: Vector3

        A vector representing a position in this object's local space.

      Returns Vector3

    • Rotates the object to face a point in world space.

      Parameters

      • vector: Vector3

        A vector representing a position in world space to look at.

      Returns void

      This method does not support objects having non-uniformly-scaled parent(s).

    • Rotates the object to face a point in world space.

      Parameters

      • x: number

        Expects a Float

      • y: number

        Expects a Float

      • z: number

        Expects a Float

      Returns void

      This method does not support objects having non-uniformly-scaled parent(s).

    • An optional callback that is executed immediately after a 3D object is rendered.

      Parameters

      • renderer: WebGLRenderer
      • scene: Scene
      • camera: Camera
      • geometry: BufferGeometry
      • material: Material
      • group: Group

      Returns void

      This function is called with the following parameters: renderer, scene, camera, geometry, material, group. Please notice that this callback is only executed for renderable 3D objects. Meaning 3D objects which define their visual appearance with geometries and materials like instances of Mesh, Line, Points or Sprite. Instances of Object3D, Group or Bone are not renderable and thus this callback is not executed for such objects.

    • An optional callback that is executed immediately after a 3D object is rendered to a shadow map.

      Parameters

      • renderer: WebGLRenderer
      • scene: Scene
      • camera: Camera
      • shadowCamera: Camera
      • geometry: BufferGeometry
      • depthMaterial: Material
      • group: Group

      Returns void

      This function is called with the following parameters: renderer, scene, camera, shadowCamera, geometry, depthMaterial, group. Please notice that this callback is only executed for renderable 3D objects. Meaning 3D objects which define their visual appearance with geometries and materials like instances of Mesh, Line, Points or Sprite. Instances of Object3D, Group or Bone are not renderable and thus this callback is not executed for such objects.

    • An optional callback that is executed immediately before a 3D object is rendered.

      Parameters

      • renderer: WebGLRenderer
      • scene: Scene
      • camera: Camera
      • geometry: BufferGeometry
      • material: Material
      • group: Group

      Returns void

      This function is called with the following parameters: renderer, scene, camera, geometry, material, group. Please notice that this callback is only executed for renderable 3D objects. Meaning 3D objects which define their visual appearance with geometries and materials like instances of Mesh, Line, Points or Sprite. Instances of Object3D, Group or Bone are not renderable and thus this callback is not executed for such objects.

    • An optional callback that is executed immediately before a 3D object is rendered to a shadow map.

      Parameters

      • renderer: WebGLRenderer
      • scene: Scene
      • camera: Camera
      • shadowCamera: Camera
      • geometry: BufferGeometry
      • depthMaterial: Material
      • group: Group

      Returns void

      This function is called with the following parameters: renderer, scene, camera, shadowCamera, geometry, depthMaterial, group. Please notice that this callback is only executed for renderable 3D objects. Meaning 3D objects which define their visual appearance with geometries and materials like instances of Mesh, Line, Points or Sprite. Instances of Object3D, Group or Bone are not renderable and thus this callback is not executed for such objects.

    • Abstract (empty) method to get intersections between a casted ray and this object

      Parameters

      • raycaster: Raycaster
      • intersects: Intersection<Object3D<Object3DEventMap>>[]

      Returns void

      Subclasses such as THREE.Mesh | Mesh, THREE.Line | Line, and THREE.Points | Points implement this method in order to use raycasting.

      THREE.Raycaster | Raycaster

      () => {}

    • Removes a Object3D as child of this Object3D.

      Parameters

      • ...object: Object3D<Object3DEventMap>[]

      Returns this

      An arbitrary number of objects may be removed.

      THREE.Group | Group for info on manually grouping objects.

    • Removes a listener from an event type.

      Type Parameters

      • T extends keyof Object3DEventMap

      Parameters

      • type: T

        The type of the listener that gets removed.

      • listener: EventListener<Object3DEventMap[T], T, MultiViewPixiPlaneMesh>

        The listener function that gets removed.

      Returns void

    • Removes this object from its current parent.

      Returns this

    • Rotate an object along an axis in object space.

      Parameters

      • axis: Vector3

        A normalized vector in object space.

      • angle: number

        The angle in radians. Expects a Float

      Returns this

      The axis is assumed to be normalized.

    • Rotate an object along an axis in world space.

      Parameters

      • axis: Vector3

        A normalized vector in world space.

      • angle: number

        The angle in radians. Expects a Float

      Returns this

      The axis is assumed to be normalized Method Assumes no rotated parent.

    • Rotates the object around x axis in local space.

      Parameters

      • angle: number

      Returns this

    • Rotates the object around y axis in local space.

      Parameters

      • angle: number

      Returns this

    • Rotates the object around z axis in local space.

      Parameters

      • angle: number

      Returns this

    • Calls THREE.Quaternion.setFromAxisAngle | setFromAxisAngle(axis, angle) on the .quaternion.

      Parameters

      • axis: Vector3

        A normalized vector in object space.

      • angle: number

        Angle in radians. Expects a Float

      Returns void

    • Calls THREE.Quaternion.setFromEuler | setFromEuler(euler) on the .quaternion.

      Parameters

      • euler: Euler

        Euler angle specifying rotation amount.

      Returns void

    • Calls THREE.Quaternion.setFromRotationMatrix | setFromRotationMatrix(m) on the .quaternion.

      Parameters

      • m: Matrix4

        Rotate the quaternion by the rotation component of the matrix.

      Returns void

      Note that this assumes that the upper 3x3 of m is a pure rotation matrix (i.e, unscaled).

    • Copy the given THREE.Quaternion | Quaternion into .quaternion.

      Parameters

      • q: Quaternion

        Normalized Quaternion.

      Returns void

    • Sets the plane mesh scale factor.

      This method updates the plane mesh size in the Three.js scene based on the provided scale factor. Unlike billboards, this affects the mesh uniformly in X, Y, and Z dimensions.

      Parameters

      • scale: number

        The scale factor to apply to the plane mesh

      Returns void

      // Make plane mesh twice as large
      planeMesh.setScale(2.0);

    • Convert the object to three.js JSON Object/Scene format.

      Parameters

      • Optionalmeta: JSONMeta

        Object containing metadata such as materials, textures or images for the object.

      Returns MeshJSON

    • Translate an object by distance along an axis in object space

      Parameters

      • axis: Vector3

        A normalized vector in object space.

      • distance: number

        The distance to translate. Expects a Float

      Returns this

      The axis is assumed to be normalized.

    • Translates object along x axis in object space by distance units.

      Parameters

      • distance: number

        Expects a Float

      Returns this

    • Translates object along y axis in object space by distance units.

      Parameters

      • distance: number

        Expects a Float

      Returns this

    • Translates object along z axis in object space by distance units.

      Parameters

      • distance: number

        Expects a Float

      Returns this

    • Executes the callback on this object and all descendants.

      Parameters

      • callback: (object: Object3D) => any

        A function with as first argument an Object3D object.

      Returns void

      Note: Modifying the scene graph inside the callback is discouraged.

    • Executes the callback on all ancestors.

      Parameters

      • callback: (object: Object3D) => any

        A function with as first argument an Object3D object.

      Returns void

      Note: Modifying the scene graph inside the callback is discouraged.

    • Like traverse, but the callback will only be executed for visible objects

      Parameters

      • callback: (object: Object3D) => any

        A function with as first argument an Object3D object.

      Returns void

      Descendants of invisible objects are not traversed. Note: Modifying the scene graph inside the callback is discouraged.

    • Notifies the manager that plane mesh content has been updated and requests re-rendering.

      Call this method after modifying the PixiJS container content to ensure the changes are rendered to the canvas and reflected in the Three.js scene.

      Returns void

      // Add new content to the container
      const graphics = new Graphics();
      graphics.rect(50, 50, 100, 100).fill(0x00ff00);
      planeMesh.container.addChild(graphics);

      // Request re-render to show changes
      planeMesh.updateContent();

    • Updates local transform.

      Returns void

    • Updates the global transform of the object. And will update the object descendants if .matrixWorldNeedsUpdate is set to true or if the force parameter is set to true.

      Parameters

      • Optionalforce: boolean

        A boolean that can be used to bypass .matrixWorldAutoUpdate, to recalculate the world matrix of the object and descendants on the current frame. Useful if you cannot wait for the renderer to update it on the next frame, assuming .matrixWorldAutoUpdate set to true.

      Returns void

    • Updates the morphTargets to have no influence on the object

      Returns void

      Resets the morphTargetInfluences and morphTargetDictionary properties.

    • Updates the global transform of the object.

      Parameters

      • updateParents: boolean

        Recursively updates global transform of ancestors.

      • updateChildren: boolean

        Recursively updates global transform of descendants.

      Returns void

    • Converts the vector from world space to this object's local space.

      Parameters

      • vector: Vector3

        A vector representing a position in world space.

      Returns Vector3

    Settings

    Member Visibility

    On This Page

    Comparison with SharedStage Classes
    Constructors
    Properties
    Accessors
    Methods