无人机拍摄的全景素材合成为全景图片视频教程, 教你快速合成720全景图片;
下面是一个简单的视频介绍:
看完视频, 若还有有疑问, 请加入芊云全景互助交流群:
芊云全景互助视频教程
之前我写博客推荐过这个插件,
用了这个插件, 我的 phpstorm 简直是换了个编辑器, 颜值很高;
但是最近升级phpstorm 之后插件也一起升级了, 发现 这个插件无法使用了, 今天查了一下原来是收费了,
现在是一个月 1.5美元, 一年是 15美元
作为一个穷鬼, 我当然买不起啊 ~~
于是想到一个方案, 之前不收费的, 现在收费, 我下载之前的版本不升级不就可以了吗?
于是我找到了版本记录: https://plugins.jetbrains.com/plugin/8006-material-theme-ui/versions
经过我的测试, 目前 Material_Theme-5.7.0 这个版本是可以用的, 提示升级, 但是你别升级就可以了!
真香~~
大家都在刷某项网红和某CEO的瓜, 我其实很早就在微博吃完了这个瓜;
但是我发现一个很有意思的事情, 很多人都在问: 求 65页PPT ??
大家真的是分不清楚 PPT 和 PDF 的区别吗?
这是知乎某位大佬搬运过来的瓜, 比较新鲜的:
https://www.zhihu.com/answer/1834545634
或者可以微博搜索: 时代尖兵
里面有原版的瓜, 口感特好;
这里是女主的最新回应: https://m.weibo.cn/status/4624360209910957?
还有女主辩解的新瓜: https://m.weibo.cn/3267970202/4625564524614727
昨天需要使用小程序的两个插件:
plugin://chatGroupPlugin/cell 和 “cell”: “plugin://contactPlugin/cell”
结果发现 uniapp 的自定义组件无法使用,
我是写在 页面的生命周期同级, 新建一个
usingComponents: {}
因为我记得 wepy 就是 这样的写法, 但是发现编译完成后 自定义组件里并没有我写的插件, 写入 components 也是无效,
于是百度找了很多资料, 都没有结果, 或者写的不对,
我直接诶修改编译完成后的 文件, 里面增加 plugin://chatGroupPlugin/cell 和 “cell”: “plugin://contactPlugin/cell” 两个组件都可以显示,
指导后来查文档才发现:
需要定义在page里面:
1 2 3 4 5 6 7 8 9 10 11 |
{ "path": "pages/card/index", "style": { "navigationBarTitleText": "用户名片主页", "mp-weixin": { "usingComponents": { "cell": "plugin://contactPlugin/cell" } } } }, |
这样定义就可以; 有点奇葩~
具体结果可以查看小程序:
今天想到一个方案, 想动态加载不同的组件, 尝试了几种办法,
先看看官方文档说: https://cn.vuejs.org/v2/guide/components-dynamic-async.html
这里的异步组件工厂函数也可以返回一个如下格式的对象:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const AsyncComponent = () => ({ // 需要加载的组件 (应该是一个 `Promise` 对象) component: import('./MyComponent.vue'), // 异步组件加载时使用的组件 loading: LoadingComponent, // 加载失败时使用的组件 error: ErrorComponent, // 展示加载时组件的延时时间。默认值是 200 (毫秒) delay: 200, // 如果提供了超时时间且组件加载也超时了, // 则使用加载失败时使用的组件。默认值是:`Infinity` timeout: 3000 }) |
大概看明白了, 然后我们尝试一下, 上才艺:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<style lang="less" scoped></style> <template> <div class="page"> <component v-bind:is="componentFile" /> </div> </template> <script> /** 名片定制 * Created by iyahe@qq.com * Date: 2021/4/3 * Time: 12:25 * Description: */ export default { name: "index", mixins: [], data() { return { componentFile: null } }, computed: {}, watch: {}, components: {}, methods: { async render () { const pathName = await this.getName(); this.componentFile = () => ({ component: import(`./${pathName}`), loading: { template: '<div>组件加载中</div>' }, error: { template: '<div>组件加载错误</div></div>' }, delay: 200, timeout: 10000 }); }, async getName(){ return new Promise(resolve => { setTimeout(_=>{ resolve('page/auto') }, 1000) }) } }, async created() { await this.render() }, mounted() {} } </script> |
通过setTimeout模拟一个异步获取组件名称, 然后加载组件!
特别说明:
该360度全景是在泰山之巅天街附近拍摄,这里可以观看泰山全貌,从南天门到天街上山的这段路程,是大量的游人,香客上山必经之路,人来人往,热闹非凡,您可以全视角观看这段路程壮丽景观。
真的很期待有一天能亲自登上山顶去看看~
全景作品来自 芊云全景摄影师: pano360
文章来源: https://9kvr.cn/article/content/53.html
VR全景是基于全景图像的真实场景虚拟现实技术,是虚拟现实技术中非常核心的部分。全景是把相机环360°拍摄的一组或多组照片拼接成一个全景图像,通过计算机技术实现全方位互动式观看的真实场景还原展示方式。
首先准备工作:
安卓使用安卓手机下载谷歌相机App;
谷歌相机下载方法: 可以自己去百度;
建议下载酷安app安装太极将谷歌相机安装在太极app中
因为 国内安卓手机兼容性问题, 谷歌相机在大部分手机上会闪退, 太极 app 可以阻止手机 app 闪退
酷安地址: https://www.coolapk.com/
app 如图, 谷歌相机如图;
下载 酷安 后, 直接搜索 谷歌相机 即可安装
安装成功后打开 谷歌相机 app, 如果闪退;
则在酷安 搜索: 太极 下载太极app
下载成功后, 使用 太极 创建应用, 然后找到谷歌相机 创建即可;
创建成功后即可打开 谷歌相机 app, 选择拍摄全景
然后根据手机提示, 将准心对准 app 上面的点, 即可自动拍摄, 直至所有点全部拍摄完成, 等待合成后, 全景照片就完成了!
然后我们就可以 上传到 芊云全景 进行制作了;
制作成功后, 我们就可以把全景照片分享给好友, 进行 720 旋转查看了。
经常有人会问我小程序里怎么实现vr, 今天简单介绍两种小程序里vr的实现方法; 给大家提供参考;
第一种: 使用 photo-sphere-viewer 插件
文档地址: https://photo-sphere-viewer.js.org/
很简单的加载一张全景图:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>芊云全景VR预览全景</title> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/> <script src="//cdn.jsdelivr.net/npm/three/build/three.min.js"></script> <script src="//cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script> <script src="//cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script> <style> * { padding: 0; margin: 0; } #viewer { width: 100vw; height: 100vh; } </style> </head> <body> <div id="viewer"></div> <script> var viewer = new PhotoSphereViewer.Viewer({ container: document.querySelector('#viewer'), panorama: '全景图地址' }); </script> </body> </html> |
具体的详细用法可以查看开发文档, 这个插件可以实现很多功能, 包括热点, 视角, 等等, 感兴趣可以试试
2. 第二种, 使用 krpano
文档地址: https://krpano.com/home/
krpano 是收费软件, 需要授权才可以使用, 并且比较复杂一些, 感兴趣的可以去搜索相关资料
初始化一张全景, 需要先使用krpano引擎把全景做切片,
1 2 3 4 5 6 7 |
embedpano({ swf: "tour.swf", xml: "playxml.html" html5: "only+webgl+preserveDrawingBuffer", mobilescale: 0.5, passQueryParameters: true }); |
所有的配置及参数都在 xml 文件中;
具体可查看: https://krpano.com/docu/xml/
第三种: 将全景图上传到芊云全景制作生成h5链接, 直接 iframe 加载
首选打开芊云全景: https://vr.he29.com
根据提示上传制作h5, 制作完成后点击复制链接, 可以得到一个h5链接:
例如: https://vr.he29.com/d/604e4cceefc5e06.html
重点来了, 可以直接在地址栏上加上参数: https://vr.he29.com/d/604e4cceefc5e06.html?h=1
就可以屏蔽全景上面有关 芊云全景的一些UI信息, 这样嵌入网页就很ok了~
最终效果如下:
大名鼎鼎 的 ffmpeg 一直在用, 用来压缩转码视频特别方便, 今天偶然间发现, 居然可以在网页上压缩视频, 于是简单的尝试了一下: 做出记录:
github仓库地址: https://github.com/ffmpegwasm/ffmpeg.wasm
首先, 我用手机拍了一段视频, 一共有30M
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.5/dist/ffmpeg.min.js"></script> <style> html, body { margin: 0; width: 100%; height: 100% } body { display: flex; flex-direction: column; align-items: center; } </style> </head> <body> <h3>视频前端压缩方案</h3> <video id="output-video" controls></video><br/> <input type="file" id="uploader"> <p id="message"></p> <script> const { createFFmpeg, fetchFile } = FFmpeg; const message = document.getElementById('message'); const ffmpeg = createFFmpeg({ log: true, progress: ({ ratio }) => { message.innerHTML = `Complete: ${(ratio * 100.0).toFixed(2)}%`; }, }); const transcode = async ({ target: { files } }) => { const { name } = files[0]; message.innerHTML = 'Loading ffmpeg-core.js'; await ffmpeg.load(); message.innerHTML = 'Start transcoding'; ffmpeg.FS('writeFile', name, await fetchFile(files[0])); await ffmpeg.run('-i', name, 'output.mp4'); message.innerHTML = 'Complete transcoding'; const data = ffmpeg.FS('readFile', 'output.mp4'); const video = document.getElementById('output-video'); video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' })); } document.getElementById('uploader').addEventListener('change', transcode); </script> </body> </html> |
压缩之后, 一共是 2.3 M, 就是速度有点慢, 效果还可以, 中途会下载一个 25M 左右的js文件, 因此, 不建议在移动端使用!
上面代码粘贴到html可以直接使用
首先,简单介绍一下, nuxt.js 是什么
Nuxt.js 是一个 Vue.js的SSR通用框架,最常用的就是用来作SSR(服务器端渲染)。
首先说下 SSR,最近很热的词,意为 Server Side Rendering(服务端渲染),目的是为了解决单页面应用的 SEO 优化 的问题,对于普通的一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,在国内, 百度/搜狗/等等的搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息(谷歌可以抓取vue等框架信息)。这也就是我们使用 nuxt.js 的主要原因,
目前常见的SSR开源框架(方式)有三个:
今天我们主要讲讲目前最成熟, 文档最详细, 拥有大量问题解决方案的nuxt.js
nuxt.js 优点:
1.安装与初始化
官网文档: https://www.nuxtjs.cn/guide/installation
脚手架工具: https://github.com/nuxt/create-nuxt-app
脚手架安装成功后, yarn create nuxt-app <项目名> 创建一个项目,
之后开始选择配置:
选择完成后自动开始安装!
1 2 3 4 5 6 7 8 9 |
🎉 Successfully created project nuxt.js To get started: cd nuxt.js yarn dev To build & start for production: cd nuxt.js yarn build yarn start ✨ Done in 175.37s. |
2.启动项目
根据上述提示启动即可!
3. 打包编译, 怎么把项目部署到服务器
首先我们build之后, 拷贝
.nuxt
nuxt.config.js
package.json
这三个文件到服务器即可
拷贝到服务器后, 首先安装依赖, cnpm install
安装成功后, 执行 npm run start
如果没有错误, 会启动项目, 和本地启动一样, 其实这样我们就可以访问了,
开启 liunx 服务器的内外防火墙端口 , 然后浏览器直接访问: 你的 ip:端口号
4. 配置域名访问
当然只能带端口访问肯定不是我们想要的结果, 那么我们就需要配置 域名, 域名解析到服务端这些流程就不说了,
我们找到nginx的配置文件, 在 http{}模块里面新增:
1 2 3 |
upstream vrserver { server 0.0.0.0:3356; } |
其中ip地址写: 0.0.0.0:端口号
之后再新建一组 server{} ;正常nginx配置就不描述了,
比如我要配置成功: http:xxxx.com/v2/ 作为访问地址, 那就在 xxx.com的nginx 里面新建
1 2 3 4 5 |
location /v2/ { proxy_pass http://vrserver; proxy_set_header Origin ''; index index.html index.htm; } |
新建成功后, 重启nginx, 然后访问 http:xxxx.com/v2/ 就可以访问到我们的服务了
5. 怎么让我们的 nuxt.js服务一直启动
现在如果我们关闭终端, 那服务就关闭了, 接下来我们安装 pm2, 让服务在后台一直运行
关于pm2 的介绍: http://blog.he29.com/wblog/?p=1186
然后新建一个 pm2.config.json
1 2 3 4 5 6 7 8 9 |
{ "apps": { "name": "vr-sever", "script": "npm run start", "ignore_watch": [ "node_modules" ] } } |
简单配置即可, 然后我们启动: pm2 start pm2.config.json
6 其他问题
7.项目体验
目前芊云全景使用的是 nuxt.js 的服务, 具体体验请浏览: https://vr.he29.com/v3/