@pixi/3d
    Preparing search index...

    Interface View3DOptions<TRoot>

    Constructor options for View3D

    pixi's own container options, such as label, position, eventMode and the on* handlers, work too.

    const view = new View3D({
      width: 1280,
      height: 720,
      anchor: 0.5,
      shadowQuality: 'high',
      toneMapping: 'aces',
      exposure: 1.2,
      fog: { type: 'linear', color: 0xadb2ba, near: 30, far: 55 },
      environment: { skyColor: 0x88ccff, groundColor: 0x553311 },
    });
    interface View3DOptions<TRoot extends Container3D = Container3D> {
        anchor?: number | PointData;
        autoResize?: boolean;
        background?: ColorSource | CubeTexture | Hemisphere | null;
        camera?: Camera3D;
        composite?: boolean;
        cull?: CullMode;
        environment?: CubeTexture | Hemisphere | null;
        exposure?: number;
        fog?: Fog;
        graph?: (
            renderer:
                | WebGLRenderer<HTMLCanvasElement>
                | WebGPURenderer<HTMLCanvasElement>,
            options: DefaultGraph3DOptions,
        ) => RenderGraph;
        height?: number;
        passes?: readonly Pass3D[];
        resolution?: number | "inherit";
        root?: TRoot;
        shadowFilter?: ShadowFilter;
        shadowQuality?: ShadowQuality;
        toneMapping?: ToneMapping;
        width?: number;
    }

    Type Parameters

    Hierarchy

    Index
    anchor? autoResize? background? camera? composite? cull? environment? exposure? fog? graph? height? passes? resolution? root? shadowFilter? shadowQuality? toneMapping? width?
    anchor?: number | PointData

    Where the view's origin sits, as a fraction of its size; see View3D#anchor

    0

    const view = new View3D({ width: 400, height: 300, anchor: 0.5 });
    autoResize?: boolean

    Match the renderer's screen size on every render, following it when the canvas resizes; see View3D#autoResize

    false

    const view = new View3D({ autoResize: true });
    background?: ColorSource | CubeTexture | Hemisphere | null

    Drawn behind the scene: a cube map, a Hemisphere gradient, a plain colour, or null for none; see View3D#background

    null

    const view = new View3D({ environment: sky, background: sky });

    // Pass the fog the same colour and distant geometry melts into the background
    const misty = new View3D({ background: 0x968c34, fog: { color: 0x968c34, near: 20, far: 60 } });
    camera?: Camera3D

    Camera to draw from, added to root when it has no parent; see View3D#camera

    new Camera3D()

    const view = new View3D({ camera: new Camera3D({ fov: 45 }) });
    composite?: boolean

    Draw the scene into its own texture, then onto the screen, instead of straight to the screen

    The view does this anyway while it has an enabled post effect, an enabled pass that requires a scene output, or a View3D#resolution other than its target's; View3D#resolution says when to set it yourself. On a canvas with antialias the texture is multisampled too, unless a scene output's format rules that out; see SceneOutput.

    false

    const view = new View3D({ width: 320, height: 240, composite: true });
    cull?: CullMode

    How the view culls its meshes outside the camera's view; see CullMode

    'gpu'

    const view = new View3D({ cull: 'off' });
    environment?: CubeTexture | Hemisphere | null

    Light from the surroundings: a cube map, a Hemisphere gradient, or null for none; see View3D#environment

    null

    const view = new View3D({ environment: { skyColor: 0x88ccff, groundColor: 0x553311 } });
    exposure?: number

    Brightness multiplier applied before tone mapping; see View3D#exposure

    1.0

    const view = new View3D({ exposure: 1.4 });
    fog?: Fog

    Distance fog, left out for none; see View3D#fog

    const view = new View3D({ fog: { type: 'linear', color: 0xadb2ba, near: 30, far: 55 } });
    graph?: (
        renderer:
            | WebGLRenderer<HTMLCanvasElement>
            | WebGPURenderer<HTMLCanvasElement>,
        options: DefaultGraph3DOptions,
    ) => RenderGraph

    Builds the render graph for this view

    Runs on the first render and again each time the view rebuilds its graph, such as after View3D#passes is assigned, a pass's enabled flips, or View3D#unload. A rebuild destroys the old graph and its passes, so make the passes inside the callback.

    Leave it out to use createDefaultGraph3D; to add passes to that pipeline, use View3DOptions#passes instead. For a different pipeline, start from createDefaultGraph3D and append, or build a bare RenderGraph. Forward options either way: it carries what every graph needs, and keeps passes, composite and toneMapping working. A pass that uses a scene output the graph doesn't attach throws when the view builds it.

    new View3D({
      width,
      height,
      graph: (renderer, options) => {
        const { graph } = createDefaultGraph3D(renderer, options);
        graph.addPass(new MyOutlinePass({ renderer }));
        return graph;
      },
    });
    height?: number

    Height of the 3D viewport in pixels; see width

    256

    const view = new View3D({ width: 800, height: 600 });
    passes?: readonly Pass3D[]

    Passes and post effects for this view, the same as assigning View3D#passes later

    const view = new View3D({ passes: [new OutlinePass({ width: 0.05 }), new BloomEffect()] });
    resolution?: number | "inherit"

    Texels per logical pixel the scene is drawn at, or 'inherit' for the target's; see View3D#resolution

    'inherit'

    const view = new View3D({ resolution: 1 });
    root?: TRoot

    Root of the 3D scene; see View3D#root

    new Container3D()

    const view = new View3D({ root: new Model3D(source) });

    view.root.player?.play('Wave');
    shadowFilter?: ShadowFilter

    How soft shadow edges are; see View3D#shadowFilter

    'pcf'

    const view = new View3D({ shadowFilter: 'hard' });
    shadowQuality?: ShadowQuality

    Size of the shadow maps; see View3D#shadowQuality

    'medium'

    const view = new View3D({ shadowQuality: 'low' });
    toneMapping?: ToneMapping

    Tone mapping curve; see View3D#toneMapping

    'none'

    const view = new View3D({ toneMapping: 'aces' });
    width?: number

    Width of the 3D viewport in pixels

    256

    const view = new View3D({ width: 800, height: 600 });

    Settings
    Member Visibility

    On This Page
    Properties