最近朋友圈有些標題黨！寫著360度！螺旋！ vr! 3d場景! 其實並沒有吹的那麼牛b。。點進去就是個全景圖而已
全景圖 並不是真3d 更不是什麼vr！
全景圖和普通的網頁背景是不同的 我們需要的是3d背景 攝像機轉動的時候背景也會跟著變化的
可以建立乙個有6張不同紋理的立方體 那6張紋理構成了周圍的環境
比如下面這樣
把這6個麵折成乙個立方體 鏡頭再進入其中 你就會有身臨其境的感覺！
做這個東西有多種方案
對度娘搜尋框輸入 「html5 webgl全景圖」 回車！會出來相關的** 但都是基於weblg框架（國內使用原生的都死光了！） 或者一些其他語言寫的
然而 做這個東西使用css3足矣 下面寫的這個demo就是基於css3的 並不需要「巨型框架庫」 和 「傳說中的第三方」
gif效果（我這兒的gif一直很渣） demo戳
總共有3個立方體 每個立方體6張不同貼圖（貼圖是網上找的）每個立方體中有個長得像黑洞的東西 點選它就進入下乙個場景
隨便扯扯
初始化乙個立方體 planet1物件裡 通過touch #fge1元素可以切到planet2
對立方體物件計算幾個關鍵的rotate值
其實 如果理解了css3的極限 那篇內容 做全景圖根本不會有什麼難度的
有疑問可call我
這東西用作3d環境展示確實不錯 不需要麻煩的建模 只需要給到正確的紋理就可以了！
它又可以進一步增加身臨其境的感覺 比如跟著鏡頭移動 只保留旋轉變換 去除平移操作 整個場景會顯得很真實！ 顯的很大！
而且用它b格還很高~
3D全景漫遊
示例 qq物聯星球計畫 通過pano2vr直接將魚眼全景圖生成立體空間的六個面 也可通過photoshop或其他的專業3d建模工具，將魚眼圖貼到3d球面上，再將球面轉為立方面，獲得立體空間的六個面。使用到的js庫 原始碼demo camera new three.perspectivecamera ...
3D全景漫遊
全景圖共分為三種 球面全景圖 利用一張全景圖圍成乙個球，自身位置位於球體內。由於是矩形，所以最上和最下的縫合處很明顯就能夠看得出來。球面全景圖是最接近人眼的構建模式，若利用多個立面構建，拼接方法繁瑣，效能消耗高。因此，本文介紹的是上述通過一張全景圖構成的球面全景圖。立方體全景圖 乙個立方體，有六個面...
360度全景標定方法 360度全景漫遊有哪些優勢
360全景是一種相對比較新穎的影象技術，依靠其逼真的臨場感和沉浸效果，一直很受歡迎。我們可以通過全景漫遊，往來於各個場景之間，也可以根據指定路線進行遊覽，真正做到身臨其境。那麼，360度全景技術究竟有哪些優勢，才會引起無數廠家和商家的青睞，用作企業的宣傳當中的呢?優勢一 360度全景漫遊極具真實感。...