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
}