threejs | 开发一个全景工具(一)

image.png

前言

全景系统制作工具参考720yun基于threejsvue2vuetify开发了部分(视角、热点、沙盘)功能。
在实践中,学习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方向;
  • 支持下载
  • 接入后端
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容