示例: 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...