WebH5 使用 panolens.js 实现360全景地图

JavaScript031

WebH5 使用 panolens.js 实现360全景地图,第1张

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

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

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

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

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

//创建天空盒子---待修改

function SetSkyBox()

{

//Loading cube textures

var urlPrefix = "./img/texture/"//

var urls = [urlPrefix + "sky_px.png", urlPrefix + "sky_nx.png", urlPrefix + "sky_py.png",urlPrefix + "sky_ny.png", urlPrefix + "sky_pz.png", urlPrefix + "sky_nz.png"]

var textureCube = THREE.ImageUtils.loadTextureCube(urls)

//Initialising shaders

var shader = THREE.ShaderLib["cube"]

shader.uniforms["tCube"].value = textureCube

var sky_mrl = new THREE.ShaderMaterial({

fragmentShader: shader.fragmentShader,

vertexShader: shader.vertexShader,

uniforms: shader.uniforms,

side: THREE.BackSide

})

//Build the skyboxMesh

var geometry = new THREE.BoxGeometry(800, 800, 800) //-----------同步修改----G2-----------

skyboxMesh = new THREE.Mesh(geometry, sky_mrl)

skyboxMesh.position.x=300 //-----------同步修改----G2-----------

//skyboxMesh.position.y=

skyboxMesh.position.z=300 //-----------同步修改----G2-----------

scene.add(skyboxMesh)

}

PS：这是我找到的以前的代码，你知己参考看看吧

首先，这个全景是复制不下来的。。。都是加了密，用swf 载入相关文件再展示。。。所以，只有以下两种方法：

1.用展示页本身的javascript 代码：（这个比较难找）

2.复制展示页的<ifame>框架。

下载是不可能的，，，因为有很多看不到的文件。