javascript全景,js全景图插件

three.js vs ThingJS：全景虚拟漫游技术实现？Javascript 3D开发 前端 物联网 三维建模 3D模型

三维建模无非就是通过专业技能加工成立体图形，使之图形成为直观、易懂，容易判读的立体图件。对于开发者来说，选择一个好的3D开发框架，在全景虚拟漫游场景上实现3D动效，ThingJS vs three.js开发性能和资源投入这里拿来比较一下，希望对你有帮助。

1~three.js优势

Three.js是大多数开发者首次接触的WebGL 3D库，Threejs库的出现解决了底层的渲染细节和复杂的数据结构，可以支持如一个房间级别,或一个楼层级别的渲染,或符合特殊要求的大量同类模型的渲染。

2~three.js开发性能

对 WebGL进行了封装,提供了更高层的渲染接口,提供摄影机、视口的控制,提供场景组织方式,能够加载多种文件格式,通过创建材质、贴图并编写 shader来实现物体效果,创建立方体、球等基本元素,提供灯光、阴影、点云等等底层功能。

3~three.js劣势

虽然Three.js底层引擎级别的三维图形库，有很多开源库对它进行扩展，但较为松散，适合做轻量级可视化应用，复杂应用则需要基于此库进行大量封装才行。尤其场景输出层面，需要3 3DSMax、Maya、CAD等专业美术人员,通过建模再做一定的导出工作才能得到需要的模型，团队协作成本高。

4~ThingJS优势

ThingJS主张3D便捷开发，提供无需3D建模知识即可上手的场景搭建工具和无维护成本的场景存储云空间，模型库提供上万个行业模型资源。提供ThingJS场景工具组件,包含园区、城市或者图表搭建,可以让不具备3D知识的普通用户搭建3D场景，一个人可以完成物联网应用的基础开发。

5~ThingJS开发性能

ThingJS可支撑数十栋建筑的园区级应用,可支持从地球到城市、园区、建筑、楼层、房间、最终到物联网设备的渲染性能负载，物联网可视化效果应用优势明显，可创建信息点、线路、管线、区域、热图、粒子、动画等丰富功能，具备灵活的摄影机控制、第一人称行走、寻路导航和视点线路工具;可扩展的界面、头顶信息牌、内嵌视频监控等丰富的信息展示方式。

6~开发者角度的体验 （three.js vs ThingJS）

如果是你是初学者，three.js用起来更花费时间，就一个加载模型、调光、选择模型弹框的功能，就能写出Threejs上百行代码，ThingJS是更为上层的抽象，不用关心渲染、mesh、光线等复杂概念，更适合项目团队提高开发效率。

相关问答

Q1: WebGL初探—Three.js全景图实战

前段时间公司给了一个新需求就是写一个装修室内3D全景效果图，于是开始我的three.js开发之旅。

作为一个前端小白，突然接触three.jswebgl除了懵逼还是懵逼，不过作为一个技术人对于挑战也许就是软件开发中真正的乐趣，至少不会埋头调试一遍又一遍重复的页面数据，上上下下左左右右BABA......简直枯燥到极点。不过three.jswebgl不得不说给我打开了新的世界，接下来我就简单讲述一下我的学习之旅。

Three.js 是一款运行在浏览器中的 3D 引擎，是JavaScript编写的WebGL第三方库，可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象,three.js内部也是webgl的封装，封装了大量了webgl API ，让比较繁琐的webgl更加简便。

WebGL（全写Web Graphics Library）是一种3D绘图协议，它让可以让开发进一步去了解图形渲染，Webgl是JavaScript和OpenGL ES 2.0合并出来的升级版，通过webgl可以让前端开发者们脱离开css渲染，可以了解更加底层的渲染，WebGL也可以为HTML5 Canvas提供硬件3D加速渲染，webgl是通过系统显卡来在浏览器里更流畅地展示3D场景和模型，加入shader(着色器)来对图形渲染，学习webgl需要具备相应的图形学算法，属于目前图形渲染开发的高级技术之一。目前webgl也运用在游戏，视频特效，包含untiy3D也是集成webgl。

three.js中主要由摄像机 ，场景 ，渲染器 , 资源加载器，素材组成

webgl中的所有东西都是基于摄像机去展示的，可以利用摄像头的视角形成对3d视图观测视角，比如鱼眼视角，从而就让我们可以在平面图上可以开发出真实场景的3D视图。接下来我们看看怎么用three.js创建一个摄像机：

摄像机有了但是为了让景物可以更好的展现，这时候我们就需要一个展示景物的场景，three.js也为我们封装好了，如下所示可以创建一个场景：

渲染器是webgl的渲染启动开关，他可以调用render方式把场景渲染到摄像机。

three.js加载资源不同我们常见的html一样，直接通过src属性加载，而是通过TextureLoader.load来加载资源。

素材常见的包含网格，灯光等许多元素下面我就举个例子

通过这次基于three.js的webgl全景图开发之旅为我对视图渲染打开了一道新的大门，不过webgl的厉害之处还有很多很多是我还未涉及到了，以后还需要更加努力了。

Q2: Web/H5 使用 panolens.js 实现360全景地图

panolens.js 是一款很强大的 全景图片查看器，也可播放视频，详情可查看 官网

最近在浏览东西时不小心发现 GitHub 上也有 panolens.js 的 文档和demo 。

大概分为两种模式，模块化引用 和 普通html引用，如下图：

本文章主要分享一下 普通html引入 ，举个栗子：

哇哦竟然实现了，小伙伴们赶快试试吧~~~ 记得点赞哦~~~

Q3: javascript 中不同类型以及不同环境下变量的内存都是何时释放

一.基本类型和引用类型的值

javascript中的变量包含两种不同数据类型的：基本类型值和引用类型值。基本类型值指的是简单的数据段，而引用类型值指那些可能右多个值构成的对象。

1.动态的属性

定义基本类型值和引用类型值的方式是类似的：创建一个变量并为该变量赋值。但是，当这个值保存到变量中以后，对不同类型值可以执行的操作则大相径庭。

对于引用类型的值，我们可以为其添加属性和方法，也可以改变和删除其属性和方法：

var person = new Object();

person.name = "Nicholas";

alert(person.name);// “Nicholas”

基本类型值不能动态添加：

var name = "Nicholas";

name.age = 27;

alert(name.age);// undefined

2.复制变量值

复制变量值时两种类型也会有所不同。

基本类型：

重新在内存中开辟一段空间，赋值前后的两者相互独立

引用类型：

虽然也会重新开辟一段空间，但其接受到的值实际上是一个指针，而这个指针指向存储在堆中的一个对象。赋值操作结束后，两个变量实际上将引用同一个对象。

3.传递参数

javascript中所有函数的参数都是按值传递的。基本类型值的传递如同基本类型变量的复制一样，而引用类型的值的传递，则如同引用类型变量的复制一样。

在向参数传递引用类型的值时，会把这个值在内存中的地址复制给一个局部变量，因此这个局部变量的变化会反映在函数的外部，情况下面例子：

function addTen(num){

num += 10;

return num;

}

var count = 20;

var result = addTen(count);

alert(count);// 20，没有变化

alert(result);// 30

引用传递：

function setName(obj){

obj.name = "Nicholas";

}

var person = new Object();

setName(person);

alert(person.name);// "Nicholas"

证明对象是按值传递的例子：

function setName(obj){

obj.name = "Nicholas";

obj = new Object();

obj.name = "Greg";

}

var person = new Object();

setName(person);

alert(person.name);// "Nicholas"

4.检测类型

在检测基本类型时typeof是非常得力的助手，但在检测引用类型的值时，这个操作符的用处不大。通常，我们并不是想知道某个值是对象，而是想知道它是什么类型的对象。为此，javascript提供了instanceof操作符，其语法如下：

result = variable instanceof constructor

alert(person instanceof Object);// 变量person是Object吗？

alert(colors instanceof Array);// 变量colors是Array吗？

alert(pattern instanceof RegExp);// 变量parrern是RegExp吗

二.执行环境和作用域

执行环境是javascript中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。

每个函数都有自己的执行环境。当执行流进入一个函数时，函数的执行环境就会被推入一个环境栈中。而在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境。Javascript中的执行流正式右这个方便的机制控制着。

当代码在一个环境中执行时，会创建变量对象的一个作用域链。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端，始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数，则将其活动对象作为变量对象。活动对象最开始只包含一个变量，即arguments对象。作用域链中的下一个变量对象来自包含（外部）环境，直至全局执行环境的变量对象

1.延长作用域链

虽然执行环境的类型总共只有两种——全局和局部（函数），但是可以延长作用域链。因为有些语句可以在作用域链的前端临时增加一个变量对象，该变量对象在执行代码后被移除：

try-catch语句的catch快

with语句

2.没有块级作用域

先看如下例子：

if (true){

var color = "blue";

}

alert(color);// "blue"

for (var i = 0; i 10; ++i){

doSomething(i);

}

alert(i); // 10

使用var声明的变量会自动被添加到最接近的环境中。在函数内部，最接近的环境就是函数的局部环境；在with语句中，最接近的环境是函数环境。如果初始化变量时没有使用var声明，该变量会被添加到全局变量

3.垃圾收集

1.收集方式

标记清除、引用清除

2.性能问题（临界值）

3.管理内存（不用的数据即使设置为null）

四.总结

javascript变量可以用来保存两种类型的值：基本类型值和引用类型值。基本类型的值源自以下5种基本类型数据：Undefined、Null、Boolean、Number和String。基本类型值和引用类型值具有以下特点：

基本类型值在内存中占据固定大小的空间，因此被保存在栈内存中

从一个变量向另一个变量复制基本类型的值，会创建这个值的一个副本

引用类型的值是对象，保存在堆内存中

包含引用类型值的变量实际上包含的并不是对象本身，而是一个指向该对象的指针

从一个变量向另一个变量复制引用类型的值，赋值的其实是指针，因此两个变量最终都指向同一个对象

确定一个值是哪种基本类型可以使用typeof操作符，而确定一个值是哪种引用类型可以使用instanceof操作符

所有变量（包括基本类型和引用类型）都存在于一个执行环境（也称为作用域）当中，这个执行环境决定了变量的声明周期，以及哪一部分代码可以访问其中的变量。以下是关于执行环境的几点总结：

执行环境有全局执行环境（也成为全局环境）和函数执行环境之分

每次进入一个新执行环境，都会创建一个用于搜索变量和函数的作用域链

函数的局部环境不仅有权访问函数作用域中的变量，而且有权访问其包含（父）环境，乃至全局环境

全局环境只能访问在全景环境中定义的变量和函数，而不能直接访问局部环境中的任何数据

变量的执行环境有助于确定应该合适释放环境

javascript是一门具有自动垃圾收集机制的编程语言，开发人员不必关心内存分配和回收问题。可以对Javascript的垃圾收集例程作如下总结：

离开作用域的值将被自动标记为可以回收，因此将在垃圾收集期间被删除

“标记清除”是目前主流的垃圾收集算法，这种算法的思想是给当前不实用的值加上标记，然后再回收其内存

另一种垃圾收集算法是“引用计数“，这种算法的思想是跟踪记录所有值被引用的次数。Javascript引擎不浅不再使用这种算法；但在IE中访问非原声JavaScript对象（如DOM对象）时，这种算法仍然可能导致问题

当代码中存在循环引用现象时，“引用技术”算法就会导致问题

解除变量的引用不仅有助于消除循环引用现象，而且对垃圾收集也有好处。为了确保有效地回收内存，应该及时接触不再使用的全局对象、全局对象属性以及循环引用变量的引用

Q4: 如何用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

Q5: 360全景制作有哪些专业知识？

随着科技以及各个方面的不断发展，360全景受到了许多人的关注和喜爱。加上360全景的应用范围越来越广泛，许多商家加强了对这方面的人才培养。那么，做360全景制作需要懂得那 些方面的知识和技术?接下来酷雷曼为各位分析一下。

通常来说，制作360全景需要经过两大阶段，第一个阶段就是素材的选取，也就是360全景拍摄。第二阶段就是素材处理和动画生成，最终的出来的产品就是我们日常看到的360全景展示。这两个阶段包括的知识和技术有以下几个方面：

1、需要掌握最基础的单反相机使用(手动M档,手动对焦,ISO,光圈,快门,色温)，来完成前期全景素材采集;

2、需要会使用基础的PS(Photoshop)、firwork等图片处理，这是完成对采集素材合成后处理等工作;

3、需要有基础的网站制作flash制作js(javascript脚本)等相关经验，来完成成品效果设计，网络是360全景最重要的载体;

4、需要了解最基本的网站服务器使用,站点架设,FTP上传等，来完成最终成品的发布。

360全景制作的每一个步骤都是关键的，但是，在去做这些步骤之前，前期的市场开拓也是非常关键的一个点。