前端(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>
相关推荐
Mintopia20 分钟前
深度伪造检测技术在 WebAIGC 场景中的应用现状
前端·javascript·aigc
BUG_Jia21 分钟前
如何用 HTML 生成 PC 端软件
前端·javascript·html·桌面应用·1024程序员节
皓月Code23 分钟前
第二章、全局配置项目主题色(主题切换+跟随系统)
javascript·css·react.js·1024程序员节
MoonBit月兔43 分钟前
MoonBit Pearls Vol.12:初探 MoonBit 中的 JavaScript 交互
开发语言·javascript·数据库·交互·moonbit
非凡ghost1 小时前
Tenorshare 4DDiG(数据恢复软件) 最新版
前端·javascript·后端
www_stdio1 小时前
深入理解JavaScript变量声明:var、let与const的全面解析
javascript
San301 小时前
AI 歌词生成器:使用 OpenAI 打造你的专属作词助手
javascript·人工智能·node.js
用户84298142418101 小时前
JavaScript数据类型
javascript
非凡ghost1 小时前
WinMute(自动锁屏静音软件) 中文绿色版
前端·javascript·后端