Skip to main content

Controls & Scroll

You can modify camera controls with the following options.

Disabling Controls​

Each controls can be disabled easily by setting it to false.

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

The right click(Translation) is disabled

Disabling rotation axis​

It is possible to deactivate only one axis of the rotation with disablePitch (X-axis) and disableYaw (Y-axis).

Load 3D model
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm_default.png",
    rotate: {
        disablePitch: true
    }
}
Load 3D model
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm_default.png",
    rotate: {
        disableYaw: true
    }
}

Disabling double-tap to zoom behavior​

Setting doubleTap=false on zoom option will do the job.

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

Scrolling​

Mobile​

By default, scrollable is enabled to enable scrolling on the canvas area for mobile(touch) devices.

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

Check the page in mobile

Set it to false if the canvas area is small, so there's enough space to scroll.

Desktop​

In desktop browsers, wheelScrollable is disabled by default.
You can scroll on the canvas if you enable it, but you can't adjust zoom in this case.

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