Skip to main content

poster

Typestring | null
Defaultnull

A URL to the image that will be displayed before the 3D model is loaded.

info

This option requires view3d.css file for correct placement of image element.
See Setup Script & Styles guide page for adding required CSS file.

Example​

Basics​

{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm_default.png"
}

HTMLElement as poster​

Load 3D model
I am custom HTMLElement with id "#demo-poster-sample-el"
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "#demo-poster-sample-el",
    autoInit: false
}

Blur amount​

We use 1em as CSS blur filter's value, so blurring amount can be changed by changing CSS font-size of .view3d-poster element.

font-size: 32px
font-size: 8px
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm_default.png",
    autoInit: false
}
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm_default.png",
    autoInit: false
}

Disabling Blur​

Add noblur class to .view3d-wrapper element and poster blur will be removed.

Default
noblur
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm_default.png",
    autoInit: false
}
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm_default.png",
    autoInit: false
}