Skip to main content

zoom

Typeboolean | ZoomControlOptions
Defaulttrue

Options for the ZoomControl.
If false is given, it will disable the zoom control.

NameTypeDefaultDescription
scalenumber1Scale factor for rotation
durationnumber300Duration of the input animation (ms)
minFovnumber1Minimum vertical fov(field of view).
caution

Only available when type is "fov"

You can get a bigger image with the smaller value of this.
maxFovnumber"auto"Maximum vertical fov(field of view).
caution

Only available when type is "fov"

You can get a smaller image with the bigger value of this.
If "auto" is given, it will use Math.min(default fov + 45, 175)
minDistancenumber0.1Minimum camera distance.
caution

Only available when type is "distance"

This will be scaled to camera's default distance(camera.baseDistance)
maxDistancenumber2Maximum camera distance.
caution

Only available when type is "distance"

This will be scaled to camera's default distance(camera.baseDistance)
doubleTapboolean|objecttrueConfigures double tap to zoom behavior, false to disable
doubleTap.zoomInnumber0.8Zoom-in value, relative to fov/distance range.max
doubleTap.useZoomOutnumbertrueWhether to use zoom-out behavior on double tap
doubleTap.durationnumber300Duration of the zoom-in and zoom-out animation
doubleTap.easingfunctionEASING.EASE_OUT_CUBICZoom-in value, relative to fov/distance range.max
easingfunctionEASING.EASE_OUT_CUBICEasing function of the animation

Example​

Load 3D model
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm.png",
    zoom: true
}
Load 3D model
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm.png",
    zoom: false
}

Zoom Type​

Load 3D model
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm.png",
    zoom: {
        type: "fov"
    }
}
Load 3D model
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm.png",
    zoom: {
        type: "distance"
    }
}

Double tap to zoom​

Load 3D model
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm.png",
    zoom: {
        doubleTap: {
            zoomIn: 0.5,
            useZoomOut: false,
            duration: 100
        }
    }
}
Load 3D model
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm.png",
    zoom: {
        doubleTap: false
    }
}

Detailed Options​

Load 3D model
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm.png",
    zoom: {
        scale: 2,
        duration: 2000,
        minFov: 30,
        maxFov: 120
    }
}
Load 3D model
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm.png",
    zoom: {
        scale: 2,
        duration: 2000,
        minFov: 30,
        maxFov: 120
    }
}