打造自己的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雲全景虛擬現實社區