3D全景漫遊

2021-09-19 08:06:34 字數 1711 閱讀 7942

示例:​ qq物聯星球計畫

通過pano2vr直接將魚眼全景圖生成立體空間的六個面;也可通過photoshop或其他的專業3d建模工具,將魚眼圖貼到3d球面上,再將球面轉為立方面,獲得立體空間的六個面。

使用到的js庫:

原始碼demo:

camera = new three.perspectivecamera(50, window.innerwidth / window.innerheight, 1, 1000);
scene = new three.scene();
var sides = [, , , , , ];
for (var i = 0; i < sides.length; i++)
renderer = new three.css3drenderer();//定義渲染器

renderer.setsize(window.innerwidth, window.innerheight);//設定尺寸

function animate()
function addicon()

addicon();

function onwindowresize()
function ondocumentmousedown(event) 

function ondocumentmousemove(event)

function ondocumentmouseup(event)

/** * 滑鼠滾輪改變相機焦距

*/function ondocumentmousewheel(event)

function ondocumenttouchstart(event) 

function ondocumenttouchmove(event)

photo sphere viewer是一款基於three.js的360x180度全景圖預覽js外掛程式。該js外掛程式可以360度旋轉檢視全景圖,也可以上下180度檢視。使用該外掛程式的唯一要求是瀏覽器支援canvas或webgl。

使用該全景圖外掛程式時要引入three.min.js和photo-sphere-viewer.min.js檔案。

可以建立乙個空的來放置全景圖,通過css來設定它的尺寸。

要初始化該全景圖外掛程式,可以建立乙個新的photosphereviewer物件,然後在這個物件中插入乙個引數物件,有兩個引數是必須設定的:

var psv = new photosphereviewer();
下面是該全景圖外掛程式的所有可用配置引數:

size:可選,預設值null,全景圖容器的最終尺寸。例如:

3D全景漫遊

全景圖共分為三種 球面全景圖 利用一張全景圖圍成乙個球,自身位置位於球體內。由於是矩形,所以最上和最下的縫合處很明顯就能夠看得出來。球面全景圖是最接近人眼的構建模式,若利用多個立面構建,拼接方法繁瑣,效能消耗高。因此,本文介紹的是上述通過一張全景圖構成的球面全景圖。立方體全景圖 乙個立方體,有六個面...

3d全景軟體安裝步驟

1.開啟資料夾pano2vr pro v4.1x64bit 中文破解版 2.找到 setup pano2vr install64 4 1 0.exe 3.雙擊 pano2vr install64 4 1 0.exe 4.根據提示進行安裝 盡量不要安裝到c盤 5.安裝成功以後,桌面會出現安裝的圖示 6...

OpenGL教程之漫遊3D世界

10.1 資料結構 當您想要使用一系列的數字來完美的表達3d環境時,隨著環境複雜度的上公升,這個工作的難度也會隨之上公升。出於這個原因,我們必須將資料歸類,使其具有更多的可操作性風格。在程式清單頭部出現了sector 區段 的定義。每個3d世界基本上可以看作是sector 區段 的集合。乙個sect...