Package Exports

t3d-pano
t3d-pano/build/t3d.pano.js
t3d-pano/build/t3d.pano.module.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (t3d-pano) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

t3d-pano

Panorama extension for t3d.

Demo

Getting Started

Create pano:

const pano = new Pano();
scene.add(pano);

pano.visible = true;
pano.material.diffuseMap = texture;
pano.material.opacity = 1;
pano.material.uniforms.stretchFactor = 0;
pano.renderOrder = 0;

Establish link relationships for panos:

const graph = new PanoGraph();
// graph._links;

graph.link(pano1, pano2, direction);
graph.link(pano2, pano1, direction);

graph.delink(pano2, pano1);

// Get link infos by pano.
// Link() { dirction, from: Pano, to: Pano }
// links: [Link, Link, ...]
const links = graph.getLinks(pano1);

Use Pano Switcher to switch panos by link info and options:

// FadeSwitcher / StretchSwitcher, extend PanoSwitcher
// Or maybe CustomSwitcher by user
const switcher = new FadeSwitcher();

// run switcher
switcher.run(link, options);

// call this per frame to step switcher,deltaTime in seconds
switcher.update(deltaTime);

Use sample:

// When showing a pano
function showPano(pano) {
    const links = graph.getLinks(pano1);

    links.forEach(link => {
        const sprite = new Sprite();
        sprite.position.copy(link.dirction).multiplyScalar(100);

        sprite.addEventListener('click', () => {
            switcher.run(link, { time: 500 }).onUpdate((link, elapsed) => {})
                                             .onComplete((link) => {});
        });
    });
}

How to create CustomSwitcher:

class CustomSwitcher extends PanoSwitcher {

    constructor() {
        super();
    }

    _resetProperties() {
        
    }

    _updateProperties(elapsed) {
        // elapsed is updated by the 'update' function, it from 0 to 1
        // link: { dirction, from: Pano, to: Pano }
        // It is recommended to write code here...
    }

}