initialZoom

Typenumber | object

Default0

Initial zoom value.
If number is given, positive value will make camera zoomed in and negative value will make camera zoomed out.
If object is given, it will fit model's bounding box's front / side face to the given ratio of the canvas height / width.
For example, { axis: "y", ratio: 0.5 } will set the zoom of the camera so that the height of the model to 50% of the height of the canvas.
See the below table/examples for details

property	type	description
axis	"x" \| "y" \| "z"	An bounding box's axis to apply ratio
ratio	number	description

axis	canvas side to apply ratio	base bounding box side
x	width	front
y	height	front
z	width	side

Example

Load 3D model

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

Load 3D model

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

Load 3D model

{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm.png",
    initialZoom: {
        axis: "y",
        ratio: 1
    }
}

Load 3D model

{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm.png",
    initialZoom: {
        axis: "x",
        ratio: 1
    }
}

Load 3D model

{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm.png",
    initialZoom: {
        axis: "z",
        ratio: 1
    },
    yaw: 90
}

Load 3D model

{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm.png",
    initialZoom: {
        axis: "y",
        ratio: 0.5
    }
}

Assets Used

▪Alarm Clock 01 by Poly Haven licensed under CC0

Example​

Example