打造本身的3D全景漫遊

---

three.js

示例：
​ 打造H5裏的「3D全景漫遊」祕籍 - 騰訊ISUX
​ QQ物聯星球計劃

經過pano2vr直接將魚眼全景圖生成立體空間的六個面；也可經過Photoshop或其餘的專業3D建模工具，將魚眼圖貼到3D球面上，再將球面轉爲立方面，得到立體空間的六個面。

使用到的JS庫：

• three.min.js
• CSS3DRenderer.js

GitHub地址：http://mrleo.github.io/3DPanorama

設置相機

//設置相機
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);

設置場景

//設置場景
scene = new THREE.Scene();

定義3D空間的6個面的背景

//設置3D空間的6個面
var sides = [{
    url: '../static/img/gugong/posx.jpg',
    position: [-512, 0, 0],
    rotation: [0, Math.PI / 2, 0]
}, {
    url: '../static/img/gugong/negx.jpg',
    position: [512, 0, 0],
    rotation: [0, -Math.PI / 2, 0]
}, {
    url: '../static/img/gugong/posy.jpg',
    position: [0, 512, 0],
    rotation: [Math.PI / 2, 0, Math.PI]
}, {
    url: '../static/img/gugong/negy.jpg',
    position: [0, -512, 0],
    rotation: [-Math.PI / 2, 0, Math.PI]
}, {
    url: '../static/img/gugong/posz.jpg',
    position: [0, 0, 512],
    rotation: [0, Math.PI, 0]
}, {
    url: '../static/img/gugong/negz.jpg',
    position: [0, 0, -512],
    rotation: [0, 0, 0]
}];

將定義好的6各面添加到空間中

//將六個面添加到空間中，併爲每一個空間指定ID
for (var i = 0; i < sides.length; i++) {
    var side = sides[i];
    var element = document.createElement('section');
    element.id = 'section_'+i;
    var imgElement = document.createElement('img');
    imgElement.width = 1026; // 2 pixels extra to close the gap.
    imgElement.src = side.url;
    element.appendChild(imgElement);
    var object = new THREE.CSS3DObject(element);
    object.position.fromArray(side.position);
    object.rotation.fromArray(side.rotation);
    scene.add(object);
}

設置渲染器

//設置渲染器
renderer = new THREE.CSS3DRenderer();//定義渲染器
renderer.setSize(window.innerWidth, window.innerHeight);//設置尺寸
document.body.appendChild(renderer.domElement);//將場景加入頁面

空間實時渲染

/**
 * 實時渲染
 */
function animate() {
    requestAnimationFrame(animate);
    //lon = Math.max(-180, Math.min(180, lon));//限制固定角度內旋轉
    //lon += 0.1;//自動旋轉
    lon += 0;
    lat = Math.max(-85, Math.min(85, lat));
    phi = THREE.Math.degToRad(90 - lat);
    theta = THREE.Math.degToRad(lon);
    target.x = Math.sin(phi) * Math.cos(theta);
    target.y = Math.cos(phi);
    target.z = Math.sin(phi) * Math.sin(theta);
    camera.lookAt(target);
    renderer.render(scene, camera);
}

爲每一個面構建空間的圖標物件

/*
 * 添加圖標
 */
function addIcon(){
    var imgIcon = document.createElement('img');
    imgIcon.src = '../static/img/arrow_right.png';
    imgIcon.classList.add('icon');
    document.getElementById('section_4').appendChild(imgIcon);
}
addIcon();

窗體大小改變動新相機

/**
 * 窗體大小改變
 */
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

監聽鼠標事件

function onDocumentMouseDown(event) {
    event.preventDefault();
    document.addEventListener('mousemove', onDocumentMouseMove, false);
    document.addEventListener('mouseup', onDocumentMouseUp, false);
}

function onDocumentMouseMove(event) {
    var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
    var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
    lon -= movementX * 0.1;
    lat += movementY * 0.1;
}

function onDocumentMouseUp(event) {
    document.removeEventListener('mousemove', onDocumentMouseMove);
    document.removeEventListener('mouseup', onDocumentMouseUp);
}

/**
 * 鼠標滾輪改變相機焦距
 */
function onDocumentMouseWheel(event) {
    camera.fov -= event.wheelDeltaY * 0.05;
    camera.updateProjectionMatrix();
}

監聽觸摸事件

//監聽觸摸事件
function onDocumentTouchStart(event) {
    event.preventDefault();
    var touch = event.touches[0];
    touchX = touch.screenX;
    touchY = touch.screenY;
}

function onDocumentTouchMove(event) {
    event.preventDefault();
    var touch = event.touches[0];
    lon -= (touch.screenX - touchX) * 0.1;
    lat += (touch.screenY - touchY) * 0.1;
    touchX = touch.screenX;
    touchY = touch.screenY;
}

---

WebGL中文網

---

基於Three.js的360X180度全景圖預覽插件

Photo Sphere Viewer是一款基於Three.js的360X180度全景圖預覽js插件。該js插件能夠360度旋轉查看全景圖，也能夠上下180度查看圖片。使用該插件的惟一要求是瀏覽器支持canvas或WebGL。

使用方法

使用該全景圖插件時要引入three.min.js和photo-sphere-viewer.min.js文件。

<script src="js/three.min.js"></script>
<script src="js/photo-sphere-viewer.min.js"></script>

HTML結構

能夠建立一個空的<div>來放置全景圖，經過CSS來設置它的尺寸。

<div id="container"></div>

初始化插件

要初始化該全景圖插件，能夠建立一個新的PhotoSphereViewer對象，而後在這個對象中插入一個參數對象，有兩個參數是必須設置的：

var PSV = new PhotoSphereViewer({
    // Path to the panorama
    panorama: '1.jpg',
 
    // Container
    container: div
});

配置參數

下面是該全景圖插件的全部可用配置參數：

• panorama：必填參數，全景圖的路徑。
• container：必填參數，放置全景圖的div元素。
• autoload：可選，默認值爲true，true爲自動調用全景圖，false爲在後面加載全景圖（經過.load()方法）。
• usexmpdata：可選，默認值爲true，若是Photo Sphere Viewer必須讀入XMP數據則爲true。
• default_position：可選，默認值爲{}，定義默認的位置，及用戶看見的第一個點，例如：{long: Math.PI, lat: Math.PI/2}。
• min_fov：可選，默認值爲30，觀察的最小區域，單位degrees，在1-179之間。
• max_fov：可選，默認值爲90，觀察的最大區域，單位degrees，在1-179之間。
• allow_user_interactions：可選，默認值爲true，設置爲false則禁止用戶和全景圖交互（導航條不可用）。
• tilt_up_max：可選，默認值爲Math.PI/2，向上傾斜的最大角度，單位radians。
• tilt_down_max：可選，默認值爲Math.PI/2，向下傾斜的最大角度，單位radians。
• zoom_level：可選，默認值爲0，默認的縮放級別，值在0-100之間。
• long_offset：可選，默認值爲PI/360，mouse/touch移動時每像素通過的經度值。
• lat_offset：可選，默認值爲PI/180，mouse/touch移動時每像素通過的緯度值。
• time_anim：可選，默認值爲2000，全景圖在time_anim毫秒後會自動進行動畫。（設置爲false禁用它）
• theta_offset：過期的選項，可選，默認值爲1440，自動動畫時水平方向的速度。
• anim_speed：可選，默認值爲2rpm，動畫的速度，每秒/分鐘多少radians/degrees/revolutions。
• navbar：可選值，默認爲false。顯示導航條。
• navbar_style：可選值，默認爲{}。導航條的自定義樣式。下面是可用的樣式列表：
  • backgroundColor：導航條的背景顏色，默認值爲rgba(61, 61, 61, 0.5)。
  • buttonsColor：按鈕的前景顏色，默認值爲transparent。
  • activeButtonsBackgroundColor：按鈕激活狀態的背景顏色，默認值爲rgba(255, 255, 255, 0.1)。
  • buttonsHeight：按鈕的高度，單位像素，默認值爲20。
  • autorotateThickness：autorotate圖標的厚度，單位像素，默認值爲1。
  • zoomRangeWidth：縮放的範圍，單位顯示，默認值50。
  • zoomRangeThickness：縮放的範圍的厚度，單位像素，默認值1。
  • zoomRangeDisk：縮放範圍的圓盤直徑，單位像素，默認值爲7。
  • fullscreenRatio：全屏圖標的比例，默認值爲3/4。
  • fullscreenThickness：全屏圖標的厚度，單位像素，默認值爲2。
• loading_msg：可選，默認值爲Loading…，圖片加載時的提示文字。
• loading_img：可選，默認值爲null，在加載時顯示的圖片的路徑。
• size：可選，默認值null，全景圖容器的最終尺寸。例如：{width: 500, height: 300}。
• onready：可選值，默認值爲null。當全景圖準備就緒而且第一張圖片顯示時的回調函數。

720雲全景虛擬現實社區