Skip to main content

LittlePlanetProjection

import { LittlePlanetProjection } from "@egjs/view360";

LittlePlanetProjection will show your panorama image with the so-called "Little planet" or "Tiny planet" effect.

caution

This currently supports only Equirectangular panorama image/videos.

{
    initialPitch: -90,
    projection: new LittlePlanetProjection({
        src: "/pano/equirect/veste.jpg",
    })
}

Examples​

Center point​

Center point of the projection is controlled by pitch.
You can use the option initialPitch to change how it looks at initialization.

initialPitch: -90​

{
    initialPitch: -90,
    projection: new LittlePlanetProjection({
        src: "/pano/equirect/veste.jpg",
    })
}

initialPitch: 90​

{
    initialPitch: 90,
    projection: new LittlePlanetProjection({
        src: "/pano/equirect/veste.jpg",
    })
}

Locking controls​

You can use disablePitch or disableYaw to lock center point change.

{
    rotate: {
        disablePitch: true
    },
    initialPitch: -90,
    initialZoom: 1.8,
    projection: new LittlePlanetProjection({
        src: "/pano/equirect/veste.jpg",
    })
}