3D全景图php代码,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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
3D全景图php代码,HTML5 Canvas实现360度全景图的示例代码相关推荐
- html5全景代码,HTML5 Canvas实现360度全景图的示例代码
很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样对购买者来说是一个很好的消费体验,网上有很多这样的插件都是基于jQuery实现的有收费的也有免费的,其实很好用的一个叫3de ...
- html360全景图原理,HTML5 Canvas实现360度全景图
HTML5 Canvas实现360度全景图 发布时间:2020-07-22 12:15:07 来源:51CTO 阅读:557 作者:gloomyfish 很多购物网站现在都支持360实物全景图像,可以 ...
- HTML5 Canvas实现360度全景图
很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样 对购买者来说是一个很好的消费体验,网上有很多这样的插件都是基于JQuery实现的 有收费的也有免费的,其实很好用的一个叫3 ...
- html圆渐变颜色代码,HTML5 canvas createRadialGradient()放射状/圆形渐变(示例代码)
定义和用法 createLinearGradient() 方法创建放射状/圆形渐变对象. 渐变可用于填充矩形.圆形.线条.文本等等. 提示:请使用 addColorStop() 方法规定不同的颜色,以 ...
- 全景效果图html5,利用html5实现的360度全景图浏览(带天地)
[实例简介]利用html5实现的360度全景图浏览(带天地) [实例截图] [核心代码] var camera, scene, renderer; var texture_placeholder, i ...
- php 教师批改作业代码,html5 canvas做批改作业的小插件代码示例
本篇文章小编给大家分享一下html5 canvas做批改作业的小插件代码示例,代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 需求分析 能进行批改,就是相当 ...
- html5怎能编写播放器代码,HTML5应用-实现简单播放器的示例代码分享
如今HTML已经是比较热门的了,各种关于HTML5的应用程序.游戏.应用商店等也如火如荼的展开了.各大主流浏览器也纷纷开始支持HTML5标准,以备打赢新的一轮浏览器大战. 话不多说,不知道大家有没有发 ...
- 360度全景图是如何生成的?
360度全景图以其栩栩如生的互动和强沉浸性的感受,一直备受许多摄影爱好者的喜爱.但是针对一般的观赏者来讲,这类能够360度随意收看的照片,還是具备奇妙的风采.今日,小九也讲一讲一张360度全景图是怎样 ...
- html360度视角观赏,360度全景图是如何生成的?
360度全景图是如何生成的? 360度全景图以其生动的交互和沉浸的体验,一直深受很多摄影爱好者的喜欢.不过对于普通的观赏者而言,这种可以360度自由观看的图片,还是具有神奇的魅力.今天,我就讲一讲一张 ...
- 教学|怎样制作360度全景图,更炫更酷3D建模步骤
怎样制作360度全景图?现在大多数制作360度全景图都是用PS,很少会三维软件3DsMAX渲染出来,因为三维的需要3DMAX来制作和渲染,会更加的复杂,所以,下面这套<如何在3DsMAX中制作3 ...
最新文章
- Elasticsearch如何做到亿级数据查询毫秒级返回?
- 26岁创造UNIX,退休后却成为一名飞行员,这位编程界大佬不走寻常路
- l293d电机驱动原理_一文搞懂步进电机特性、原理及驱动器设计
- 已知两点经纬度求球面最短距离的公式推导过程(几何法加向量法)
- Visual Basic从入门到精通pdf
- 简单打印-双排标签102*30模板设计
- 最新消息!OKR周报新模板!
- systemVerilog的typedef用法
- word应用:快速删除页眉横线
- 记录---第一次写博客
- 学生用台灯什么光对眼睛好?开学季精选真正适合孩子的护眼台灯
- 令人垂涎的武汉八大名吃
- python matplotlib 绘制热图(极简)
- 虚函数占用类空间大小(转)
- R语言机器学习mlr3:模型解释
- 网络游戏装备是计算机数据,DNF装备搭配计算器_17173DNF专区_17173.com中国游戏门户站...
- 领航机器人广告段子_关于领航
- 安卓课程设计之记账本_课程设计:基于安卓的记账本.pdf
- 系统提示“该设备无法启动(代码:10)”,USB设备不能开始工作怎么办?
- 《信号与系统学习笔记》—拉普拉斯变换(一)
热门文章
- 编译原理 自下而上分析题型
- powereshell判断目录如果存在pdf文件则打包文件发送到指定邮箱
- python system interpreter_2. Using the Python Interpreter:使用Python解释器
- 台式电脑怎么装win10 win11重装win10系统
- 计算机仿真在线投稿系统,常见问题解决-计算机仿真官方投稿系统.doc
- Windows 共享无线上网 无法启动ICS服务解决方法(WIN7 ICS服务启动后停止)
- 可持久化入门 ի( ‘▿ ‘ )
- blob/text column 'content' used in key specification without a key length
- java十大经典排序
- 【操作系统概念-作业4】Threads