全景编辑器

180 阅读2分钟

全景编辑器

线上体验

720.xtspace.cn

用户名:youke

密码:Youke123

备注:数据会定期删除,请不要再体验账号上发布生产数据

前言

全景编辑器旨在满足用户对于创建、管理和编辑全景图像的需求,通过提供丰富的功能和直观的界面,让用户能够轻松地实现他们的创意和想法。

技术栈

  • krpano.js 1.21.2
  • React 18.2.0
  • Typescript 5.2.2

运行环境

  • node >= 16.x.x
  • pnpm >= 7.18.2

本地运行

git clone https://github.com/xtspace/xt-panorama-editor.git
cd xt-panorama-editor
pnpm i
pnpm start

功能概述

类似720云的在线全景查看功能,适配移动端和PC端

基础版
  • 全景图自动分片:支持将全景图自动分片成立方体图或多层级瓦片图,以提高加载速度和性能。
  • 全景视角设置:允许用户设置全景图的视角,包括方向、倾斜角度等参数,以满足不同场景的需求。
  • 自定义巡游:支持对巡游的多种设置,以满足不同场景的需求。
  • 添加热点类型:支持添加多种类型的热点,包括图片、视频、跳转链接、文字等,用户可以自定义热点的样式和行为,并进行实时编辑。
  • 动画效果:提供小行星开场动画、场景切换动画和热点动画等效果,增强全景图的视觉吸引力和交互体验。
  • 素材管理:提供素材管理功能,允许用户上传、管理和删除全景图所需的素材文件,包括图像、视频等。
  • 全景管理:提供全景图的管理功能,包括创建新的全景项目、编辑现有全景项目、导出项目等。
  • 离线部署:可导出编译后的代码,以便进行二次开发和本地部署
升级版
  • 热点类型:新增热点类型,例如(事件、文章)等
  • 沙盘模块:利用3D全景技术与沙盘模型相结合,模拟真实场景并进行交互式展示。它将全景图像的沉浸式视觉体验与沙盘的空间布局结合在一起,允许用户通过交互查看、导航、分析虚拟环境或物理场景

页面展示

348480064-aacfc0d6-7b07-4967-af8f-2849f6589d3c.png

375608574-39e9c89a-70c6-482b-ab45-754c4920cd08.png

348480197-46e66cb0-a0b2-4da1-a36d-7006e408f7b7.png

联系方式

326352185-ac9844b6-acca-4211-9cdd-087d6f7049e4.jpg