全景HTml5制作,HTML5Canvas实现360度全景方法
本文主要介绍HTML5 Canvas实现360度全景图的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。
很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样对购买者来说是一个很好的消费体验,网上有很多这样的插件都是基于jQuery实现的有收费的也有免费的,其实很好用的一个叫3deye.js的插件。该插件支持桌面与移动终端iOS与Android, 它的demo程序:http://www.voidcanvas.com/demo/28823deye/
自己玩了玩这个Demo以后,照着它的思路,用HTML5 Canvas也实现了类似的功能。
所以先说一下它的360度全景图的原理
1. 首先需要对实物拍照,间隔是每张照片旋转15度,所以需要23张照片。
2.照片准备好了以后,尽量选择JPG格式,裁剪到适当大小。
3.JavaScript中预加载所有照片,可以配合进度条显示加载精度
4.创建/获取Canvas对象,加上鼠标监听事件,当鼠标左右移动时候,适度的绘制不同帧。大致的原理就是这样,简单吧!
实现代码:
Full 360 degree View
var ctx = null; // global variable 2d context
var frame = 1; // 23
var width = 0;
var height = 0;
var started = false;
var images = new Array();
var startedX = -1;
window.onload = function() {
var canvas = document.getElementById("fullview_canvas");
canvas.width = 440;// window.innerWidth;
canvas.height = 691;//window.innerHeight;
width = canvas.width;
height = canvas.height;
var bar = document.getElementById('loadProgressBar');
for(var i=1; i<24; i++)
{
bar.value = i;
if(i<10)
{
images[i] = new Image();
images[i].src = "0" + i + ".jpg";
}
else
{
images[i] = new Image();
images[i].src = i + ".jpg";
}
}
ctx = canvas.getContext("2d");
// mouse event
canvas.addEventListener("mousedown", doMouseDown, false);
canvas.addEventListener('mousemove', doMouseMove, false);
canvas.addEventListener('mouseup', doMouseUp, false);
// loaded();
// frame = 1
frame = 1;
images[frame].onload = function() {
redraw();
bar.style.display = 'none';
}
}
function doMouseDown(event) {
var x = event.pageX;
var y = event.pageY;
var canvas = event.target;
var loc = getPointOnCanvas(canvas, x, y);
console.log("mouse down at point( x:" + loc.x + ", y:" + loc.y + ")");
startedX = loc.x;
started = true;
}
function doMouseMove(event) {
var x = event.pageX;
var y = event.pageY;
var canvas = event.target;
var loc = getPointOnCanvas(canvas, x, y);
if (started) {
var count = Math.floor(Math.abs((startedX - loc.x)/30));
var frameIndex = Math.floor((startedX - loc.x)/30);
while(count > 0)
{
console.log("frameIndex = " + frameIndex);
count--;
if(frameIndex > 0)
{
frameIndex--;
frame++;
} else if(frameIndex < 0)
{
frameIndex++;
frame--;
}
else if(frameIndex == 0)
{
break;
}
if(frame >= 24)
{
frame = 1;
}
if(frame <= 0)
{
frame = 23;
}
redraw();
}
}
}
function doMouseUp(event) {
console.log("mouse up now");
if (started) {
doMouseMove(event);
startedX = -1;
started = false;
}
}
function getPointOnCanvas(canvas, x, y) {
var bbox = canvas.getBoundingClientRect();
return { x: x - bbox.left * (canvas.width / bbox.width),
y: y - bbox.top * (canvas.height / bbox.height)
};
}
function loaded() {
setTimeout( update, 1000/8);
}
function redraw()
{
// var imageObj = document.createElement("img");
// var imageObj = new Image();
var imageObj = images[frame];
ctx.clearRect(0, 0, width, height)
ctx.drawImage(imageObj, 0, 0, width, height);
}
function update() {
redraw();
frame++;
if (frame >= 23) frame = 1;
setTimeout( update, 1000/8);
}
Auto Play
Demo演示文件下载地址-> fullview_jb51.rar
相关推荐:
怎样用H5 Canvas实现3D动态Chart图表
html2 canvas实现浏览器截图
JS+canvas绘制的动态机械表动画效果
全景HTml5制作,HTML5Canvas实现360度全景方法相关推荐
- 360全景html插件,jquery实现360度全景展示特效插件
jquery.pano.js是一款可以实现360度全景展示特效的jquery插件.该360度全景展示特效支持使用鼠标拖拽移动图片,也可以通过左右导航按钮来移动图片.它兼容ie8浏览器,支持移动触摸设备 ...
- 全景图片怎么制作?360度全景展示系统都有哪些功能?
360度全景一般是指VR全景,在VR全景中我们可以通过旋转视角看到前后左右乃至上下,给人以身临其境的视觉效果.目前VR全景技术已是目前全球范围内迅速发展并逐步流行的一种视觉新技术.越来越多的商企.房产 ...
- 如何制作一个360度全景
360全景不是凭空生成的,要制作一个360全景,我们需要有原始的图像素材,原始图像素材的来源可以是: A.在现实的场景中,使用相机的全景拍摄功能得到的鱼眼图像 B.通过建模渲染得到的虚拟图像 下文中的 ...
- 如何制作360度vr全景?制作360度全景效果图有哪些技巧?
360度VR全景图相信对摄影感兴趣的小伙伴一定不陌生,360度全景效果图不仅可以清楚真实的表现出场景,而且还具有很高的商用价值,360VR全景也成为了目前最受欢迎的新型展示方式,那么如何制作360度v ...
- 360度全景看车制作,vr全景制作方法
如今360度全景看车相信大家一定都或多或少的接触过,这种技术能够使我们通过手机等设备随时随地对车辆进行查看.对此相信很多人也非常疑惑,这种360度全景看车是怎么制作的呢?今天就来给大家介绍一下vr全景 ...
- 360度全景标定方法_一种车辆行驶360度全景行车标定板的制作方法
本实用新型涉及一种车辆行驶360度全景行车标定板,其属于汽车维修的技术领域,是一种安全环保型机动车维修设备. 背景技术: 汽车360度全景影像环视系统,安装在汽车前后左右的4个180度广角摄像头所提供 ...
- android 全景usb 全景,汽车360度全景USB高清数字信号输出系统的制作方法
本实用新型涉及汽车360度全景鸟瞰影像系统技术领域,特别涉及一种汽车360度全景USB高清数字信号输出系统. 背景技术: 目前的汽车360度全景鸟瞰影像系统,其视频信号输出全部是CVBS或者VGS格式 ...
- Panorama Viewer – jQuery 360度全景展示插件
jQuery Panorama Viewer 这款插件可以帮助你在网站中嵌入全景图片.要做到这一点,首先只需要在页面中引入最新的 jQuery 库,以及 jquery.panorama_viewer. ...
- 360度全景效果图制作步骤是什么?
360度全景效果图相信大家一定都不陌生,通过VR虚拟现实的手段,360度全景效果图可以让用户自由移动视角进行画面浏览,360度无死角观看,就仿佛身临其境一般.目前360度全景效果图不仅是一种摄影制作方 ...
最新文章
- python log文件_Python logging基本使用
- 去停用词 java代码_如何在java中去除中文文本的停用词
- SQL SERVER数据导入到EXCEL
- python--Time(时间)模块
- Hadoop框架:HDFS高可用环境配置
- Git Flow分支管理
- JAVA中String类
- 【15】 数学建模 | 典型相关分析 | 内附具体实现流程(清风课程,有版权问题,私聊删除)
- mysql有多少个端口号_mysql默认端口号(mysql端口号是多少)
- OSEK Os的任务调度
- 外卖点餐系统(App及后台)
- python 打开pdf文件_用python操作PDF文件
- 【操作系统概念-作业9】Virtual Memory
- 树莓派Pico开发板的C/C++开发环境搭建(VSCode+PlatformIO)
- python工资津贴的计算和排序-Python:如何排序(sort)
- macOS Ventura 13.1 系统问题:掉电快 充电慢
- 阻塞(blockage)设置优化——Hard,Soft,Partial
- vr计算机方面的应用,AR和VR到底有什么区别,分别应用在哪些方面?
- 从零搭建游戏服务器,编译过程和环境部署教程详解
- 表单提交 onsubmit=return false
热门文章
- 模型学习之T5模型初探
- 中科院自动化所-模式识别国家重点实验室Topic推荐-AMiner
- 我的世界服务器最新npc获得,我的世界1.8Citizens2——NPC插件
- 群雄逐鹿“2011网民最喜爱的软件评选”
- 航空航天C++模拟教程
- Android 实现App状态栏颜色 白色、透明色
- STM32-NUCLEO-F411RE-USART_串口
- 开发运营必看,跳出雷区必须知道的微信小程序平台运营规范
- RFID智能微型图书馆书架天线应用解析
- 为了满足中国人的胃 马来西亚棕榈油巨头都改种榴莲了……