@pixi/3d
    Preparing search index...

    Variable loadHdrConst Advanced

    loadHdr: {
        extension: { name: string; type: LoadParser };
        id: string;
        name: string;
        load<T>(
            url: string,
            resolvedAsset?: ResolvedAsset<HdrAssetData>,
        ): Promise<CubeTexture>;
        test(url: string): boolean;
        unload(cubeTexture: CubeTexture): void;
    } = ...

    Loads an equirectangular Radiance .hdr image as an HDR CubeTexture

    Use the cube as View3D#environment, View3D#background, or both. It keeps light brighter than white, such as the sun, bright in reflections and in the sky.

    The conversion runs on the main thread while the asset loads: about 50 ms for a 1k panorama and 150 ms for a 2k one on a fast desktop, longer on a phone. HdrAssetData#faceSize trades memory for a sharper sky.

    The centre of the panorama faces +X, so a camera looking down -Z, as the default camera does, is centred a quarter of the way in from the panorama's left edge. HDR panoramas are commonly shown this way on the web.

    @pixi/3d registers it with Assets on import, and Assets.unload(url) destroys the cube and its faces.

    Type Declaration

    • extension: { name: string; type: LoadParser }
    • id: string
    • name: string
    • load: function
    • test: function

      • Parameters

        • url: string

        Returns boolean

    • unload: function

      • Destroys the faces too, as destroying a cube's source only detaches them

        Parameters

        • cubeTexture: CubeTexture

          The cube texture load returned

        Returns void

    import { Assets } from 'pixi.js';
    import type { CubeTexture } from 'pixi.js';
    import '@pixi/3d';

    const sky = await Assets.load<CubeTexture>('studio_2k.hdr');
    view3d.environment = sky;
    view3d.background = sky;

    const sharp = await Assets.load<CubeTexture>({ src: 'sunset_4k.hdr', data: { faceSize: 1024 } });

    Settings
    Member Visibility