全景图代码（全景图绘制）

今天给各位分享全景图代码的知识，其中也会对全景图绘制进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、如何用canvas实现展示全景图
• 2、微信小程序如何嵌入全景图展示?
• 3、急！这是一小段ptviewer用来展示全景图的代码，谁能帮我解释一下。谢谢，会加分。
• 4、如何在网页嵌入百度全景地图
• 5、FLASH怎么做那种360°全景图？
• 6、关于flash as2的全景图制作问题

如何用canvas实现展示全景图

很多购物网站现在都支持360实物全景图像，可以360度任意选择查看样品，这样

对购买者来说是一个很好的消费体验，网上有很多这样的插件都是基于JQuery实现的

有收费的也有免费的，其实很好用的一个叫3deye.js的插件。该插件支持桌面与移动终

端iOS与Android，

所以先说一下它的360度全景图的原理

1. 首先需要对实物拍照，间隔是每张照片旋转15度，所以需要23张照片。

2. 照片准备好了以后，尽量选择JPG格式，裁剪到适当大小。

3. JAVASCRIPT中预加载所有照片，可以配合进度条显示加载精度

4. 创建/获取Canvas对象，加上鼠标监听事件，当鼠标左右移动时候，适度的绘制不

同帧。大致的原理就是这样，简单吧！

实现代码：

!DOCTYPE html

html

head

meta charset=utf-8"

titleFull 360 degree View/title

script

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; i24; i++)

{

bar.value = i;

if(i10)

{

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);

}

/script

/head

body

progress id="loadProgressBar" value="0" max="23"/progress

canvas id="fullview_canvas"/canvas

button onclick="loaded()"Auto Play/button

/body

/html

微信小程序如何嵌入全景图展示?

微信小程序想要加入全景图的话可以通过链接跳转或代码植入的方式实现。链接跳转就是在微信小程序内加入720VR全景图的链接，用户只要点击就可以进入全景图。代码植入是将720VR全景图的代码直接植入小程序代码中，用户只要打开小程序就可以在相应位置看到全景图的展示。

急！这是一小段ptviewer用来展示全景图的代码，谁能帮我解释一下。谢谢，会加分。

参数。当客户端的JRE执行改applet的时候，会去根据这些参数加载对应的文件。

根据命名我可以猜一下：

比如：param name="file" value="星海.jpg"

表示applet执行的时候，需要加载“星海.jpg”这张图片，所以它会到当前网页的上下文中去寻找该图片。

param name="wait" value="logo.gif"

表示applet在从服务器上下载资源的时候，等待过程中显示给用户看的精度条，或者logo。

其它的参数，你可以通过改变它的数值，再看显示的结果来判断是干什么用的。

if (navigator.appName != 'Netscape')

document.write('PARAM name=maxarray value="#800000"');

这句话是判断客户端的浏览器是微软的IE，foxfire，还是netscape，如果不是netscape，这多一个参数:maxarray。

可见netscape的浏览器是不支持这个参数的。

如何在网页嵌入百度全景地图

打开百度地图首页，点击右上角地图开放平台进入。

依次点击菜单栏“开发”-“工具支持”-“地图生成器”进入创建地图页面。

按照自己的实际情况在右侧地图定位中心点。

根据需要设置填写地图尺寸、按钮、状态等。

根据情况添加点标记、线标记、文字标记。

设置完成后，直接点击底部“获取代码”按钮复制生成的代码，将该代码加入到网站源码合适的地方。

点击底部左侧更多高级功能，进入地图API示例，找到全景图示例。

然后选择对应的全景图代码复制并添加到网站源码合适的地方即可。

FLASH怎么做那种360°全景图？

1、导入6张图片到元件库，分别为图片写上标识符：image0、image1、image2、image3、image4、image5

2、在主场景第1帧写入以下代码：

Stage.scaleMode = 'noScale';

var rotations = {x:0, y:0, z:0};

//定义立方体大小

var boxPoints = [{x:-30, y:-30, z:-30}, {x:30, y:30, z:-30}, {x:-30, y:30, z:-30}, {x:-30, y:-30, z:30}, {x:30, y:-30, z:30}, {x:30, y:30, z:30}];

this.createEmptyMovieClip("theScene"+1, 1);

//定义立方体位置

theScene1._x = 360;

theScene1._y = 100;

createImages();

theScene1.onEnterFrame = function() {

 rotations.x -= this._ymouse/1000;

 rotations.y += this._xmouse/1000;

 var points2d = pointsTransform(boxPoints, rotations);

 movieClip3PointTransform(this.image0, points2d[2], points2d[0], points2d[3]);

 movieClip3PointTransform(this.image1, points2d[5], points2d[1], points2d[2]);

 movieClip3PointTransform(this.image2, points2d[0], points2d[2], points2d[1]);

 movieClip3PointTransform(this.image3, points2d[4], points2d[3], points2d[0]);

 movieClip3PointTransform(this.image4, points2d[3], points2d[4], points2d[5]);

 movieClip3PointTransform(this.image5, points2d[1], points2d[5], points2d[4]);

};

function createImages() {

 var i = 6;

 while (i--) {

  theScene1.createEmptyMovieClip("image"+i, i);

  theScene1["image"+i].createEmptyMovieClip("contents", i);

  theScene1["image"+i].contents.attachBitmap(flash.display.BitmapData.loadBitmap("image"+i), 1, false, true);

 }

}

function pointsTransform(points, rotations) {

 var tpoints = new Array();

 var sx = Math.sin(rotations.x);

 var cx = Math.cos(rotations.x);

 var sy = Math.sin(rotations.y);

 var cy = Math.cos(rotations.y);

 var sz = Math.sin(rotations.z);

 var cz = Math.cos(rotations.z);

 var x, y, z, xy, xz, yx, yz, zx, zy;

 var i = points.length;

 while (i--) {

  x = points[i].x;

  y = points[i].y;

  z = points[i].z;

  xy = cx*y-sx*z;

  xz = sx*y+cx*z;

  yz = cy*xz-sy*x;

  yx = sy*xz+cy*x;

  zx = cz*yx-sz*xy;

  zy = sz*yx+cz*xy;

  tpoints[i] = {x:zx, y:zy};

 }

 return tpoints;

}

function movieClip3PointTransform(mc, a, b, c) {

 mc._visible = ((b.y-a.y)/(b.x-a.x)-(c.y-a.y)/(c.x-a.x)0) ^ (a.x=b.x == a.xc.x);

 if (mc._visible) {

  var m = mc.transform.matrix;

  m.tx = b.x;

  m.ty = b.y;

  m.a = (a.x-b.x)/mc.contents._width;

  m.b = (a.y-b.y)/mc.contents._width;

  m.c = (c.x-b.x)/mc.contents._height;

  m.d = (c.y-b.y)/mc.contents._height;

  mc.transform.matrix = m;

 }

}

里面的参数根据你的需要修改

关于flash as2的全景图制作问题

全景不是这么做滴！

需要用单反相机加鱼眼镜头拍4-6张照片，然后用ptgui拼接，再用pano2vr导出flash。

当然，你用flash也可以做，但是没有必要吧！

参考这个网站：

全景图代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于全景图绘制、全景图代码的信息别忘了在本站进行查找喔。