前言
全景系统制作工具参考720yun基于threejs
、vue2
、vuetify
开发了部分(视角、热点、沙盘)功能。
在实践中,学习threejs相关知识。
在线预览
链接:http://merrylmr.top/admin-vuetify/#/editor-3d/view
Git仓库地址
源码链接:https://github.com/merrylmr/admin-vuetify
名称说明:
场景 :一个全景贴图为一个场景;场景一般都两种实现方式:1、立方体(box);2. 球体(sphere)。这里采用“全景贴图”的方式;详情查看此篇文章:https://juejin.cn/post/6973865268426571784#heading-3
热点:全景内常用的交互方式,在全景漫游中增加图标按钮,图标按钮可关联全景切换、超链接、图片、视频、文本、音频、图文、环物、文章,浏览者可点击图标按钮浏览相关内容,以获得更多信息;
沙盘/电子沙盘:用于快速指引观看者场景的位置。
项目功能
- 实现多个场景的切换;
- 支持在每个场景上添加热点(图片、大小、文字说明)
- 热点动画:(雪碧图动画)
- 沙盘
安装使用步骤
- Clone:
git clone https://github.com/merrylmr/admin-vuetify.git
- Install:
npm install
yarn
- Run:
npm run serve
项目后续
- 改造成单独的项目:技术栈更换为
react
方向; - 支持下载
- 接入后端