前端(react/vue)实现全景图片(360°)查看器

panoramic-view

基于three.js加工的360°全景图片查看器,它基于 Web Component,因此支持 Layui、Vue、React、Angular 等几乎任何前端框架。它适配了 PC Web 端和手机端,并支持手机遥感和自动旋转播放。除此之外,它还提供了灵活的配置,开发者可以方便的使用其开发流程设计的应用。

panoramic-view开发文档

iajie.github.io/panoramic-v...

react集成

tsx 复制代码
import React, { useEffect, useRef } from 'react';
import { PanoramicView } from 'panoramic-view';
import "panoramic-view/style.css";
const Panoramic: React.FC = ({}) => {

    //定义 ref
    const divRef = useRef(null);

    //初始化 PanoramicView
    useEffect(() => {
        if (divRef.current) {
            const panoramicView = new PanoramicView({
                container: divRef.current,
                fileList: [
                    {
                        name: "乌蒙大草原入口",
                        url: "1.jpg",
                    },
                    {
                        name: "乌蒙大草原漫游2",
                        url: "2.jpg",
                    },
                    {
                        name: "乌蒙大草原漫游3",
                        url: "3.jpg",
                    },
                ]
            })
            return () => {
                panoramicView.destroy();
            }
        }
    }, [])
    
    return <div/>
}
export default Panoramic;

vue中使用

html 复制代码
<template>
    <div>
        <h1>PanoramicView,一个基于three.js 的全景 图片/视频 查看器</h1>
    </div>
    <div ref="panoramic" style="height: 600px" />
</template>
<script setup lang="ts">
import { PanoramicView } from "panoramic-view";
import "panoramic-view/style.css";
import { onMounted, ref, onUnmounted } from 'vue';

const panoramic = ref();
const panoramicView = ref<PanoramicView>();

onMounted(() => {
    panoramicView.value = new PanoramicView({
        container: panoramic.value,
        fileList: [
            {
                name: "乌蒙大草原入口",
                url: "1.jpg",
            },
            {
                name: "乌蒙大草原漫游2",
                url: "2.jpg",
            },
            {
                name: "乌蒙大草原漫游3",
                url: "3.jpg",
            },
        ]
    });
});

onUnmounted(() => {
    panoramicView.value?.destroy();
});

</script>
相关推荐
正义的大古17 小时前
OpenLayers的OGC服务 -- 章节一:WMS服务详解
前端·javascript·vue.js·openlayers
Z_Wonderful17 小时前
ReactUse 与ahook对比
前端·javascript·react.js
_Legend_King17 小时前
高德地图实现经纬度及获取编码、所属行政区、GIS
javascript·vue.js·elementui
java水泥工17 小时前
师生健康信息管理系统|基于SpringBoot和Vue的师生健康信息管理系统(源码+数据库+文档)
数据库·vue.js·spring boot
拜无忧18 小时前
【教程】Vue 3 项目架构终极指南:一份面向新手的、高性能的实战教程
前端·vue.js
一枚前端小能手18 小时前
「周更第5期」实用JS库推荐:RxJS
前端·javascript·rxjs
江城开朗的豌豆19 小时前
拆解微信小程序的“积木盒子”:这些原生组件你都玩明白了吗?
前端·javascript·微信小程序
前端达人19 小时前
「React实战面试题」:React.memo为什么失效了?
前端·javascript·react.js·前端框架·ecmascript
江城开朗的豌豆19 小时前
嘿,别想那么复杂!我的第一个微信小程序长这样
前端·javascript·微信小程序
Irene199119 小时前
URLSearchParams :处理 URL 查询参数的接口
开发语言·前端·javascript