Interface View3DFromOptions

Options for View3D.from: every View3DOptions field but root, the Model3DOptions a model takes per instance, and light

Example

const view = View3D.from(source, {
  width: 800,
  height: 600,
  toneMapping: 'reinhard',
  scene: 'Showroom',
  autoPlay: true,
});

See

View3D.from For what the camera and light defaults do.

interface View3DFromOptions {
    anchor?: number | PointData;
    autoPlay?: string | boolean;
    autoResize?: boolean;
    autoUpdate?: boolean;
    background?: ColorSource | CubeTexture | Hemisphere | null;
    camera?: Camera3D;
    castShadow?: boolean;
    composite?: boolean;
    cull?: CullMode;
    environment?: CubeTexture | Hemisphere | null;
    exposure?: number;
    fog?: Fog;
    graph?: (
        renderer:
            | WebGLRenderer<HTMLCanvasElement>
            | WebGPURenderer<HTMLCanvasElement>,
        options: DefaultGraph3DOptions,
    ) => RenderGraph;
    height?: number;
    light?: boolean;
    materials?: MaterialOverrides;
    passes?: readonly Pass3D[];
    receiveShadow?: boolean;
    resolution?: number | "inherit";
    scene?: string;
    shadowFilter?: ShadowFilter;
    shadowQuality?: ShadowQuality;
    toneMapping?: ToneMapping;
    width?: number;
}

Hierarchy

Omit<View3DOptions, "root">
Pick<
    Model3DOptions,
    | "scene"
    | "castShadow"
    | "receiveShadow"
    | "autoUpdate"
    | "autoPlay"
    | "materials",
>
- View3DFromOptions

Properties

`Optional`anchor

anchor?: number | PointData

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

Default

Example

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

`Optional`autoPlay

autoPlay?: string | boolean

Animation the model starts playing once built

true plays the file's first animation, and a string plays the animation with that label. Ignored when the file has no animations.

Default

false

Example

const robot = new Model3D({ source, autoPlay: 'Idle' });

`Optional`autoResize

autoResize?: boolean

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

Default

false

Example

const view = new View3D({ autoResize: true });

`Optional`autoUpdate

autoUpdate?: boolean

Whether the model's player advances on Ticker.shared

Set it to false to call AnimationPlayer#update from your own loop.

Default

true

Example

const robot = new Model3D({ source, autoUpdate: false });

app.ticker.add((ticker) => robot.player?.update(ticker));

`Optional`background

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

Default

null

Example

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 } });

`Optional`camera

camera?: Camera3D

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

Default

new Camera3D()

Example

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

`Optional`castShadow

castShadow?: boolean

Whether the model's meshes cast shadows

Default

true

Example

const grass = new Model3D({ source, castShadow: false });

`Optional`composite

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.

Default

false

Example

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

`Optional`cull

cull?: CullMode

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

Default

'gpu'

Example

const view = new View3D({ cull: 'off' });

`Optional`environment

environment?: CubeTexture | Hemisphere | null

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

Default

null

Example

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

`Optional`exposure

exposure?: number

Brightness multiplier applied before tone mapping; see View3D#exposure

Default

1.0

Example

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

`Optional`fog

fog?: Fog

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

Example

const view = new View3D({ fog: { type: 'linear', color: 0xadb2ba, near: 30, far: 55 } });

`Optional`graph

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.

Example: Modify the default graph

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

`Optional`height

height?: number

Height of the 3D viewport in pixels; see width

Default

Example

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

`Optional`light

light?: boolean

Add a DirectionalLight under the camera when the file brings no lights of its own

The light follows the camera, so it lights whatever the camera faces. Set to false to light the scene yourself.

Default

true

Example

const view = View3D.from(source, { light: false, environment: studio });

`Optional`materials

materials?: MaterialOverrides

Materials the model draws instead of its source's, by label, by index or through a function

Left out, the model draws the source's materials, shared with every model built from it. A function is called once for each source material, so meshes that shared one share its replacement. Changing Model3D#materials later never destroys the materials given here, even ones a function made, so destroy the ones you made when you're done with them. destroy({ children: true, material: true }) destroys whatever the model's meshes draw at that moment, these included.

Example

const enemy = new Model3D({ source, materials: (material) => material.clone() });

`Optional`passes

passes?: readonly Pass3D[]

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

Example

const view = new View3D({ passes: [new OutlinePass({ width: 0.05 }), new BloomEffect()] });

`Optional`receiveShadow

receiveShadow?: boolean

Whether the model's meshes receive shadows

Default

true

Example

const lamp = new Model3D({ source, receiveShadow: false });

`Optional`resolution

resolution?: number | "inherit"

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

Default

'inherit'

Example

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

`Optional`scene

scene?: string

Name of the scene to build, one of the keys of Scene3DSource#scene

Left out, or a name the file doesn't have, it's the file's default scene, or its first when the file names no default.

Example

const showroom = new Model3D({ source, scene: 'Showroom' });

`Optional`shadowFilter

shadowFilter?: ShadowFilter

How soft shadow edges are; see View3D#shadowFilter

Default

'pcf'

Example

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

`Optional`shadowQuality

shadowQuality?: ShadowQuality

Size of the shadow maps; see View3D#shadowQuality

Default

'medium'

Example

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

`Optional`toneMapping

toneMapping?: ToneMapping

Tone mapping curve; see View3D#toneMapping

Default

'none'

Example

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

`Optional`width

width?: number

Width of the 3D viewport in pixels

Default

Example

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

Interface View3DFromOptions

Example

See

Hierarchy

Index

Properties

Properties

Optionalanchor

Default

Example

OptionalautoPlay

Default

Example

OptionalautoResize

Default

Example

OptionalautoUpdate

Default

Example

Optionalbackground

Default

Example

Optionalcamera

Default

Example

OptionalcastShadow

Default

Example

Optionalcomposite

Default

Example

Optionalcull

Default

Example

Optionalenvironment

Default

Example

Optionalexposure

Default

Example

Optionalfog

Example

Optionalgraph

Example: Modify the default graph

Optionalheight

Default

Example

Optionallight

Default

Example

Optionalmaterials

Example

Optionalpasses

Example

OptionalreceiveShadow

Default

Example

Optionalresolution

Default

Example

Optionalscene

Example

OptionalshadowFilter

Default

Example

OptionalshadowQuality

Default

Example

OptionaltoneMapping

Default

Example

Optionalwidth

Default

Example

Settings

On This Page

`Optional`anchor

`Optional`autoPlay

`Optional`autoResize

`Optional`autoUpdate

`Optional`background

`Optional`camera

`Optional`castShadow

`Optional`composite

`Optional`cull

`Optional`environment

`Optional`exposure

`Optional`fog

`Optional`graph

`Optional`height

`Optional`light

`Optional`materials

`Optional`passes

`Optional`receiveShadow

`Optional`resolution

`Optional`scene

`Optional`shadowFilter

`Optional`shadowQuality

`Optional`toneMapping

`Optional`width