欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React + Threejs + Swiper 實現(xiàn)全景圖效果的完整代碼

 更新時間:2021年06月28日 11:42:57   作者:yleavesw  
全景圖效果非常漂亮給人帶來極好的用戶體驗效果,那么基于前端開發(fā)如何實現(xiàn)這種效果呢,下面小編給大家?guī)砹薘eact + Threejs + Swiper 實現(xiàn)全景圖效果,感興趣的朋友一起看看吧

  咱先看看全景圖實現(xiàn)效果:展示地址
  截圖:

全景圖

  體驗了一下是不是感覺周圍環(huán)境轉(zhuǎn)了一圈,感覺世界是圓的?😁
  沒錯!恭喜你答對了!地球就是圓的!👀

全景效果實現(xiàn)

  有了上面的提示,對 threejs 有一點了解的小伙伴可能就猜出來了,這個全景效果其實就是使用一個球體實現(xiàn)的~ 而我們只是在球體內(nèi)表面上貼了一張紋理貼圖而已(滾輪向外滾就可以看到這個球體了,看上去像個玻璃球,怪好看的,還有個彩蛋😁(好吧,說出來就不是彩蛋了)):

在這里插入圖片描述

  初始時,我們的視角在球體正中心,視角的移動則是依靠 threejs 提供的工具 OrbitControls 來控制。

  那么創(chuàng)建這個球體的代碼如下:

const geometry = new THREE.SphereBufferGeometry(500, 32, 32);
geometry.scale(-1, 1, 1);   // 將紋理反貼
const material = new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load(imglist[0].default)	// 傳入圖片的URL或者路徑,也可以是 Data URI.
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enablePan = false;
controls.maxDistance = 1000;

不知道 Data URI 是什么的可以看看 MDN 文檔

輪播圖

  輪播圖實現(xiàn)則是使用 swiper 這個庫,使用起來非常方便,具體可自行查閱文檔。
  在滑動輪播圖時,會觸發(fā)一個 onSliderChange 事件,這個事件傳入當前的 swiper 作為參數(shù),我們就可以通過當前激活的元素來獲取圖片并替換球體的紋理貼圖了:

onSliderChange = curSwiper => {
    const mesh = this.mesh;
    const texture = imglist[curSwiper.activeIndex].default;
    mesh.material.map = new THREE.TextureLoader().load(texture);
};

  下面是我的 swiper 設(shè)置,其中 SwiperSlider 是一個可滑動的輪播圖卡片,EffectCoverflow 是滑動時觸發(fā)的效果,swiper 中提供了四種可選效果:Fade、Coverflow、Flip 以及 Cube。imglist 則是一組圖片,其中 imglist[i].default 屬性保存了圖片的 base64 編碼。

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { EffectCoverflow } from 'swiper';
import 'swiper/swiper.min.css';
import 'swiper/components/effect-coverflow/effect-coverflow.min.css';

SwiperCore.use([EffectCoverflow]);

//....
<Swiper
    className='panoramic-imgs'
    spaceBetween={50}	// 間距
    slidesPerView={3}	// 輪播圖里可預覽圖片數(shù)
    onSlideChange={this.onSliderChange}	// 滑動時觸發(fā)的回調(diào)
    onSwiper={(swiper) => console.log(swiper)}	// 初始加載時觸發(fā)的回調(diào)
    direction='vertical'	// 輪播圖方向,默認是水平 horizontal
    effect={'coverflow'}	// 滑動效果
    grabCursor={true}	// 鼠標放在輪播圖上是否顯示拖拽
    centeredSlides={true}	// 當前處于激活狀態(tài)的圖片是否要居中
    coverflowEffect={{	// coverflow 效果參數(shù)設(shè)置,可自行調(diào)整
        "rotate": 50,
        "stretch": 0,
        "depth": 100,
        "modifier": 1,
        "slideShadows": true
    }}
    {
        imglist.map((img, idx) => {
            return <SwiperSlide key={idx}>
                <img src={img.default} className='panoramic-img'></img>
            </SwiperSlide>
        })
    }
</Swiper>

  全景效果的實現(xiàn)就說到這了,當然,如果什么地方有疑問可以留言或者參考我的代碼(下面貼出來),只要對 threejs 和 react 有一定了解的同學我相信實現(xiàn)這么一個效果并不難,代碼量也很小~

完整代碼

import React, { Component } from 'react';

import Layout from '@theme/Layout';
import Head from '@docusaurus/Head';

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import * as _ from 'underscore';
import { message } from 'antd';

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { EffectCoverflow } from 'swiper';
import 'swiper/swiper.min.css';
import 'swiper/components/effect-coverflow/effect-coverflow.min.css';

import './index.css';
import imgs from './imgs.json';

SwiperCore.use([EffectCoverflow]);

const imglist = imgs.map(img => {
    return require('../../../static/img/panoramic/' + img.name);
});

export default class Panormatic extends Component {
    constructor() {
        super();
        this.renderer = null;
        this.camera = null;
        this.scene = null;
        this.container = null;
        this.controls = null;
        this.showMessage = true;    // 彩蛋提示
    }

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

        renderer.setClearColor(0xffffff);   // b2e0df 綠豆沙色
        renderer.setPixelRatio( window.devicePixelRatio );
        const height = container.clientHeight;
        const width = container.clientWidth;
        renderer.setSize(width, height);
        
        const camera = new THREE.PerspectiveCamera(60, width / height, 1, 30000);
        camera.position.set(0, 0, 1);
        camera.center = new THREE.Vector3(0, 0, 0);

        const scene = new THREE.Scene();

        const geometry = new THREE.SphereBufferGeometry(500, 32, 32);
        geometry.scale(-1, 1, 1);   // 將紋理反貼
        const material = new THREE.MeshBasicMaterial({
            map: new THREE.TextureLoader().load(imglist[0].default)
        });
        const mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        const controls = new OrbitControls(camera, renderer.domElement);
        // controls.enableZoom = false;
        controls.enablePan = false;
        controls.maxDistance = 1000;

        this.renderer = renderer;
        this.camera = camera;
        this.scene = scene;
        this.container = container;
        this.controls = controls;
        this.mesh = mesh;

        // 設(shè)置提示框的全局配置
        message.config({
            top: 100,
            duration: 3.5,
            maxCount: 1,
        });

        this.onControlsChange = _.throttle(this.onChange, 100);
        controls.addEventListener('change', this.onControlsChange);
        window.addEventListener('resize', this.onWindowResize);
        this.renderLoop();
    }

    componentWillUnmount() {
        const mesh = this.mesh;
        mesh.material.dispose();
        mesh.geometry.dispose();
        this.scene.remove(mesh);
        window.removeEventListener('resize', this.onWindowResize);
        this.controls.removeEventListener('change', this.onControlsChange);
        message.destroy();
    }

    onChange = (e) => {
        const camera = this.camera;
        if (camera.position.distanceTo(camera.center) >= 700) {
            if (this.showMessage) {
                message.success('🎊恭喜你發(fā)現(xiàn)了全景效果的小秘密~🎉');
                this.showMessage = false;
            }
        } else {
            this.showMessage = true;
        }
    }

    onSliderChange = (curSwiper) => {
        const mesh = this.mesh;
        const texture = imglist[curSwiper.activeIndex].default;
        mesh.material.map = new THREE.TextureLoader().load(texture);
    };

    onWindowResize = () => {
        const camera = this.camera;
        const renderer = this.renderer;
        const width = this.container.clientWidth;
        const height = this.container.clientHeight;
        
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
        
        renderer.setSize(width, height);
    };

    renderLoop = () => {
        this.renderer.render(this.scene, this.camera);
        requestAnimationFrame(this.renderLoop);
    };

    render() {
        return (
            <Layout>
                <Head>
                    <title>全景圖 | Yle</title>
                </Head>
                <div id='panoramic-container'>
                    <Swiper
                        className='panoramic-imgs'
                        spaceBetween={50}
                        slidesPerView={3}
                        onSlideChange={this.onSliderChange}
                        onSwiper={(swiper) => console.log(swiper)}
                        direction='vertical'
                        effect={'coverflow'}
                        grabCursor={true}
                        centeredSlides={true}
                        coverflowEffect={{
                            "rotate": 50,
                            "stretch": 0,
                            "depth": 100,
                            "modifier": 1,
                            "slideShadows": true
                        }}
                    >
                        {
                            imglist.map((img, idx) => {
                                return <SwiperSlide key={idx}>
                                    <img src={img.default} className='panoramic-img'></img>
                                </SwiperSlide>
                            })
                        }
                    </Swiper>
                    <div id='panoramic-canvas-container'>
                        <canvas id='panoramic-canvas'></canvas>
                    </div>
                </div>
                
                
            </Layout>
        );
    }
}

到此這篇關(guān)于React + Threejs + Swiper 實現(xiàn)全景圖效果的完整代碼的文章就介紹到這了,更多相關(guān)React全景圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • react開發(fā)中如何使用require.ensure加載es6風格的組件

    react開發(fā)中如何使用require.ensure加載es6風格的組件

    本篇文章主要介紹了react開發(fā)中如何使用require.ensure加載es6風格的組件,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • React Router V5:使用HOC組件實現(xiàn)路由攔截功能

    React Router V5:使用HOC組件實現(xiàn)路由攔截功能

    這篇文章主要介紹了React Router V5:使用HOC組件實現(xiàn)路由攔截功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-03-03
  • VSCode配置react開發(fā)環(huán)境的步驟

    VSCode配置react開發(fā)環(huán)境的步驟

    本篇文章主要介紹了VSCode配置react開發(fā)環(huán)境的步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • react實現(xiàn)瀏覽器自動刷新的示例代碼

    react實現(xiàn)瀏覽器自動刷新的示例代碼

    這篇文章主要介紹了react實現(xiàn)瀏覽器自動刷新的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-04-04
  • React Native提供自動完成的下拉菜單的方法示例

    React Native提供自動完成的下拉菜單的方法示例

    這篇文章主要為大家介紹了React Native提供自動完成的下拉菜單的方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • 六分鐘帶你快速學會react中的useMemo

    六分鐘帶你快速學會react中的useMemo

    簡單說React.memo()是通過校驗props中的數(shù)據(jù)是否改變的來決定組件是否需要重新渲染的一種緩存技術(shù),下面這篇文章主要給大家介紹了關(guān)于如何快速學會react中useMemo的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • React+Ts實現(xiàn)二次封裝組件

    React+Ts實現(xiàn)二次封裝組件

    本文主要介紹了React+Ts實現(xiàn)二次封裝組件,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-04-04
  • 關(guān)于react useState更新異步問題

    關(guān)于react useState更新異步問題

    這篇文章主要介紹了關(guān)于react useState更新異步問題,具有很好的參考價值,希望對大家有所幫助。以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

    2022-08-08
  • react+antd select下拉框?qū)崿F(xiàn)模糊搜索匹配的示例代碼

    react+antd select下拉框?qū)崿F(xiàn)模糊搜索匹配的示例代碼

    我們在開發(fā)過程中,經(jīng)常會出現(xiàn)下拉框數(shù)據(jù)很多得情況,本文主要介紹了react+antd select下拉框?qū)崿F(xiàn)模糊搜索匹配的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-01-01
  • React-Native 組件之 Modal的使用詳解

    React-Native 組件之 Modal的使用詳解

    本篇文章主要介紹了React-Native 組件之 Modal的使用詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08

最新評論