React + Threejs + Swiper vollständiger Code zum Erzielen eines Panoramaeffekts

const Geometrie = neue THREE.SphereBufferGeometry(500, 32, 32);
geometry.scale(-1, 1, 1); // Textur umkehren const material = new THREE.MeshBasicMaterial({
    Map: new THREE.TextureLoader().load(imglist[0].default) // Geben Sie die URL oder den Pfad des Bildes oder eine Daten-URI ein.
});
const mesh = neues THREE.Mesh(Geometrie, Material);
Szene.Hinzufügen(Netz);

const-Steuerungen = neue OrbitControls (Kamera, Renderer.domElement);
steuert.enablePan = false;
steuert.maxDistance = 1000;

beiSliderChange = curSwiper => {
    const mesh = dieses.mesh;
    const texture = imglist[curSwiper.activeIndex].default;
    mesh.material.map = neues THREE.TextureLoader().load(texture);
};

importiere { Swiper, SwiperSlide } von „swiper/react“;
importiere SwiperCore, { EffectCoverflow } von „swiper“;
importiere „swiper/swiper.min.css“;
importiere „swiper/Komponenten/Effekt-Coverflow/Effekt-Coverflow.min.css“;

SwiperCore.use([EffectCoverflow]);

//....
<Swiper
    Klassenname = "Panoramabilder"
    spaceBetween={50} // Abstand slidesPerView={3} // Anzahl der Bilder, die in der Diashow in der Vorschau angezeigt werden können onSlideChange={this.onSliderChange} // Rückruf wird beim Verschieben ausgelöst onSwiper={(swiper) => console.log(swiper)} // Rückruf wird beim ersten Laden ausgelöst direction='vertical' // Diashow-Richtung, standardmäßig horizontal
    effect={'coverflow'} // Folieneffekt grabCursor={true} // Ob Drag angezeigt werden soll, wenn die Maus über das Karussell bewegt wird centeredSlides={true} // Ob das aktuell aktive Bild zentriert werden soll coverflowEffect={{ // Einstellungen der Coverflow-Effektparameter, Sie können sie selbst anpassen "rotate": 50,
        "strecken": 0,
        "Tiefe": 100,
        "Modifikator": 1,
        "slideShadows": wahr
    }}
    {
        imglist.map((img, idx) => {
            zurück <SwiperSlide key={idx}>
                <img src={img.default} Klassenname='Panoramabild'></img>
            </SwiperSlide>
        })
    }
</Swiper>

importiere React, {Komponente} von „react“;

Layout aus „@theme/Layout“ importieren;
Head aus „@docusaurus/Head“ importieren;

importiere * als DREI von „drei“;
importiere { OrbitControls } aus 'three/examples/jsm/controls/OrbitControls';
importiere * als _ von „Unterstrich“;
importiere {Nachricht} von „antd“;

importiere { Swiper, SwiperSlide } von „swiper/react“;
importiere SwiperCore, { EffectCoverflow } von „swiper“;
importiere „swiper/swiper.min.css“;
importiere „swiper/Komponenten/Effekt-Coverflow/Effekt-Coverflow.min.css“;

importiere './index.css';
importiere Bilder aus „./imgs.json“;

SwiperCore.use([EffectCoverflow]);

const imglist = imgs.map(img => {
    Rückgabewert: erfordert('../../../static/img/panoramic/' + img.name);
});

exportiere Standardklasse Panormatic erweitert Komponente {
    Konstruktor() {
        super();
        dieser.renderer = null;
        diese.Kamera = null;
        diese.Szene = null;
        dieser.container = null;
        diese.Steuerungen = null;
        this.showMessage = true; // Easter Egg-Eingabeaufforderung}

    componentDidMount() {
        const container = document.getElementById('Panorama-Canvas-Container');
        const canvas = document.getElementById('panoramic-canvas');
        const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });

        renderer.setClearColor(0xffffff); // b2e0df Mungobohnenpaste Farbrenderer.setPixelRatio( window.devicePixelRatio );
        const Höhe = Container.Clienthöhe;
        const width = container.clientWidth;
        renderer.setSize(Breite, Höhe);
        
        const Kamera = neue THREE.PerspectiveCamera (60, Breite / Höhe, 1, 30000);
        Kamera.Position.einstellen(0, 0, 1);
        Kamera.Mitte = neuer DREI.Vektor3(0, 0, 0);

        const Szene = neue DREI.Szene();

        const Geometrie = neue THREE.SphereBufferGeometry(500, 32, 32);
        geometry.scale(-1, 1, 1); // Textur umkehren const material = new THREE.MeshBasicMaterial({
            Karte: neues THREE.TextureLoader().load(imglist[0].default)
        });
        const mesh = neues THREE.Mesh(Geometrie, Material);
        Szene.Hinzufügen(Netz);

        const-Steuerungen = neue OrbitControls (Kamera, Renderer.domElement);
        // steuert.enableZoom = false;
        steuert.enablePan = false;
        steuert.maxDistance = 1000;

        dieser.renderer = Renderer;
        diese.kamera = Kamera;
        diese.Szene = Szene;
        dieser.container = Container;
        this.controls = Steuerelemente;
        dies.mesh = Mesh;

        // Legen Sie die globale Konfiguration des Eingabeaufforderungsfelds fest message.config({
            oben: 100,
            Dauer: 3,5,
            maxAnzahl: 1,
        });

        this.onControlsChange = _.throttle(this.onChange, 100);
        steuert.addEventListener('ändern', this.onControlsChange);
        window.addEventListener('Größe ändern', this.onWindowResize);
        dies.renderLoop();
    }

    componentWillUnmount() {
        const mesh = dieses.mesh;
        mesh.material.entsorgen();
        mesh.geometry.dispose();
        diese.Szene.entfernen(Netz);
        window.removeEventListener('Größe ändern', this.onWindowResize);
        this.controls.removeEventListener('ändern', this.onControlsChange);
        Nachricht.zerstören();
    }

    beiÄnderung = (e) => {
        const Kamera = diese.Kamera;
        wenn (Kamera.Position.AbstandZu(Kamera.Mitte) >= 700) {
            wenn (diese.showMessage) {
                message.success('🎊Herzlichen Glückwunsch zur Entdeckung des kleinen Geheimnisses des Panoramaeffekts~🎉');
                diese.showMessage = falsch;
            }
        } anders {
            diese.showMessage = wahr;
        }
    }

    beiSliderChange = (aktuellerSwiper) => {
        const mesh = dieses.mesh;
        const texture = imglist[curSwiper.activeIndex].default;
        mesh.material.map = neues THREE.TextureLoader().load(texture);
    };

    beiFenstergröße ändern = () => {
        const Kamera = diese.Kamera;
        const renderer = dieser.renderer;
        const width = this.container.clientWidth;
        const Höhe = dieser.Container.ClientHeight;
        
        Kamera.Aspekt = Breite / Höhe;
        Kamera.updateProjectionMatrix();
        
        renderer.setSize(Breite, Höhe);
    };

    renderLoop = () => {
        dieser.Renderer.render(diese.Szene, diese.Kamera);
        requestAnimationFrame(diese.renderLoop);
    };

    rendern() {
        zurückkehren (
            <Layout>
                <Kopf>
                    <title>Panorama | Yle</title>
                </Kopf>
                <div id='Panorama-Container'>
                    <Swiper
                        Klassenname = "Panoramabilder"
                        AbstandBetween={50}
                        slidesPerView={3}
                        beiSlideChange={this.onSliderChange}
                        onSwiper={(swiper) => console.log(swiper)}
                        Richtung='vertikal'
                        Effekt = {'Coverflow'}
                        grabCursor={true}
                        zentrierte Folien = {true}
                        coverflowEffekt={{
                            "drehen": 50,
                            "strecken": 0,
                            "Tiefe": 100,
                            "Modifikator": 1,
                            "slideShadows": wahr
                        }}
                    >
                        {
                            imglist.map((img, idx) => {
                                zurück <SwiperSlide key={idx}>
                                    <img src={img.default} Klassenname='Panoramabild'></img>
                                </SwiperSlide>
                            })
                        }
                    </Swiper>
                    <div id='Panorama-Leinwand-Container'>
                        <Leinwand-ID = 'Panorama-Leinwand'></Leinwand>
                    </div>
                </div>
                
                
            </Layout>
        );
    }
}