Three.js绯诲垪锛氬湪鍏冨畤瀹欑湅鐢靛奖锛屼韩鍙梀R瑙嗚鐩涘Three.js绯诲垪锛氭惌寤烘捣娲嬬悆姹犲涔犵墿鐞嗗紩鎿庝笁銆俲s绯诲垪锛氭父鎴忎腑鐨勭涓€浜虹О鍜岀涓変汉绉拌瑙扵hree.js绯诲垪锛氬叏鏅疺R锛坧anorama/cubemap/eac锛夌殑鍑犵瀹炵幇鏂瑰紡鏈枃鏄疶hree.js绯诲垪鐨勭鍥涚瘒锛屾兂鐪嬪叾浠栧唴瀹逛綘鍙互鐪嬪埌涓婇潰鈽濓笍锛屼粖澶╃粰澶у浠嬬粛涓€涓嬪叏鏅浉鍏崇殑鐭ヨ瘑銆傛垜浠煡閬擄紝鐢变簬鏈€杩戠柅鎯呯殑褰卞搷锛屽ぇ瀹堕兘涓嶈兘鍑洪棬銆傚緢澶氬叏鏅」鐩紑濮嬫祦琛岃捣鏉ワ紝姣斿鍚勫ぇ鐭ュ悕鏅尯閮藉紑閫氫簡VR銆傛澶栵紝VR璁惧涔熷緢鐏€?022骞翠笂鍗婂勾鎴戝浗VR甯傚満閿€鍞绐佺牬8浜垮厓锛屽悓姣斿闀?1%銆傚湪鍥藉锛屾埅鑷?022骞寸涓€瀛ｅ害锛屽凡鍞嚭1480涓囧彴璁惧銆傚锛佸洜涓烘垜浠浼氳VR鎶€鏈窡椋庛€傛瘯绔燂紝闆峰竷鏂杩囷紝鈥滅珯鍦ㄩ鍙ｄ笂锛岀尓閮借兘椋炶捣鏉モ€濄€傛帴涓嬫潵璇翠竴涓嬬洰鍓嶆樉绀虹殑涓昏褰㈠紡銆傜洰鍓峍R鐨勫睍绀烘柟寮忎富瑕佹湁寤烘ā銆佸缓妯?鍏ㄦ櫙鍜屽叏鏅缓妯″缓妯?鍏ㄦ櫙鍏ㄦ櫙浠ｈ〃浣淰R娓告垙澹崇郴鍒楄€冨療鏅€氫簯娓革紝浜戞父浣撻獙鏋佷匠鐨勫ソ濯掍粙璁╂垜浠湪瀹炶返涓綋浼氬畠浠殑涓嶅悓.浠ヤ笂灏辨槸VR娓告垙鐨勪綋楠屻€婇泧浣ｆ垬澹€嬨€傝瑙掑垏鎹㈠緢娴佺晠锛屽満鏅緢澶с€傜帺杩?D娓告垙鐨勬湅鍙嬪氨浼氭槑鐧姐€傝繖绉嶅満鏅槸閫氳繃寤烘ā瀹屾垚鐨勶紝浣跨敤blender銆?DMax銆乵aya绛夊缓妯¤蒋浠讹紝鍐嶄娇鐢║nity銆乁E绛夋父鎴忓紑鍙戝钩鍙帮紝鍚勭鏁堟灉鍙互璇存槸闈炲父涓嶉敊浜嗐€傝嚦浜庡澹筹紝鍒欐槸缁撳悎寤烘ā鍜屽叏鏅娇鐢ㄣ€傛ā鍨嬪拰鍏ㄦ櫙鏄绾块噰闆嗙殑锛屼絾鏄浜庤繖绉嶆煡鐪嬮〉闈紝闇€瑕佸湪Web涓婃覆鏌撳嚭绮剧粏鐨勬ā鍨嬭祫婧愩€傛秷鑰楀法澶э紝鎵€浠ヤ粬浠噰鐢ㄤ簡鎶樹腑鐨勬柟妗堬紝鍗崇矖妯?鍏ㄦ櫙锛岄€氳繃妯″瀷琛ラ棿鍦烘櫙鍒囨崲鐨勭獊鐒舵劅锛屼互鍙婂垏鎹㈣繃绋嬩腑鑳芥槑鏄炬劅鍙楀埌鐨勬帀甯ф劅銆傝櫧鐒舵晥鏋滄病鏈夌函鎵嬪伐寤烘ā閭ｄ箞绮剧粏锛屼絾鏁翠綋浣撻獙杩樻槸寰堜笉閿欑殑銆傛渶鍚庤繖绉嶄簯娓告槸鐩存帴鍦ㄤ袱寮犲叏鏅浘涔嬮棿鐩存帴鍒囨崲寰楀埌鐨勩€傝繖绉嶆柟娉曟槸鏈€绠€鍗曠殑銆傚綋鐒舵晥鏋滆繙涓嶅鍓嶄袱鑰咃紝浣嗘槸鍗曞浘鐨勫叏鏅瑙掍篃姣旈潤鎬佸浘楂樸€傜┖闂存劅銆傛€荤粨鎴愪竴寮犺〃锛屽涓嬶細Modeling寤烘ā+PanoramaPanorama浠ｈ〃浣淰R娓告垙銆婇泧浣ｆ垬澹€嬭礉澹崇郴鍒楃湅鎴挎櫘閫氫簯娓革紝浜戞父寰堥毦瀹炵幇SimpleTransition鏁堟灉闈炲父閫肩湡寰堝ソ閫氱敤妯″瀷Blender,3DMax,maya鏈夊厜鎰熺浉鏈猴紝甯歌鐨?60鐩告満锛屽洜涓哄叏鏅浘鏄€愮偣鎷嶆憚寰楀埌鐨勩€傚洜姝わ紝瀹冧笉鑳芥湁浣嶇疆淇℃伅锛屽嵆姣忎釜鐐圭殑渚濊禆鍏崇郴锛屾墍浠ュ湪鍒囨崲鍦烘櫙鏃讹紝鎴戜滑鏃犳硶鑾峰緱韬复鍏跺鐨勮繃娓℃晥鏋滐紱鑰宻hell閫氳繃浣跨敤妯″瀷琛ラ棿鏉ユ敼杩涜繃娓★紱VR娓告垙銆婇泧浣ｆ垬澹€嬫槸绾墜宸ュ缓妯★紝鎵€浠ユ晥鏋滈潪甯稿ソ銆備粖澶╂垜浠富瑕佽瑙ｅ叏鏅ā寮忥紙鍥犱负姣旇緝绠€鍗曪級锛屽綋鐒舵病鏈夋兂璞＄殑閭ｄ箞绠€鍗曪紝浣嗘槸鍜屽墠涓ょ鏂瑰紡鐩告瘮锛岄毦搴︿笅闄嶄簡涓€涓枩鍧°€傛瘯绔燂紝瀛︿範鏄粠鍏磋叮寮€濮嬬殑銆傚垵鏈夐毦澶勶紝绱㈡€у姖闃汇€傞鍏堬紝鎴戜滑鍏堜簡瑙ｄ竴浜涘墠缃煡璇嗐€傜洰鍓嶄富娴佺殑鍏ㄦ櫙鍥炬湁鍝簺鏍煎紡锛熺湅瀹屾€荤粨锛屾渶甯哥敤鐨勫氨鏄互涓嬩笁绉嶇瓑璺濇煴鐘舵姇褰辨牸寮忥紙Equirectangular锛夈€佺瓑璺濈珛鏂逛綋璐村浘鏍煎紡锛圗qui-AngularCubemap锛夈€佺珛鏂逛綋璐村浘锛圕ubeMap锛夊拰绛夎窛鏌辩姸鎶曞奖锛岃繖鏄渶甯歌鐨勪笘鐣屽湴鍥俱€傛姇褰辩殑鏂规硶鏄皢缁忕含搴︾瓑璺濓紙鎴栫瓑璺濓級鎶曞奖鍒颁竴涓煩褰㈠钩闈笂銆傝繖绉嶆牸寮忕殑浼樼偣鏄洿瑙傦紝鎶曞奖鏄煩褰㈢殑銆傜己鐐逛篃寰堟槑鏄俱€傜悆浣撲笂涓嬩袱鏋佹姇灏勫嚭鐨勫儚绱犺緝澶氾紝鑰岀粏鑺傝緝涓板瘜鐨勮丹閬撳尯鍩熷儚绱犺緝灏戯紝瀵艰嚧杩樺師鏃舵竻鏅板害杈冨樊銆傛澶栵紝杩欑鏍煎紡鐨勫浘鍍忓湪鏈覆鏌撴椂寰€寰€浼氬彉褰€侰ubemap鏄叏鏅浘鐨勫彟涓€绉嶅瓨鍌ㄦ牸寮忋€傛柟娉曟槸灏嗙悆浣撲笂鐨勫唴瀹瑰悜澶栨姇褰卞埌涓€涓珛鏂逛綋涓婏紝鐒跺悗灞曞紑銆傚畠涓庣瓑璺濇煴鐘舵姇褰辩浉姣旂殑浼樺娍鍦ㄤ簬锛屽湪鐩稿悓鐨勫垎杈ㄧ巼涓嬶紝鍏跺浘鐗囦綋绉洿灏忥紝绾︿负绛夎窛鏌辩姸鎶曞奖鐨?/3绛夎绔嬫柟浣撹创鍥撅紝鏄胺姝屾彁鍑虹殑杩涗竴姝ヤ紭鍖栫殑鏍煎紡銆傛柟娉曟槸鍦ㄤ紭鍖栨姇褰辨椂鏀瑰彉閲囨牱鐐圭殑浣嶇疆锛屼娇瑙掔偣鍜屼腑蹇冪殑鍍忕礌瀵嗗害鐩哥瓑銆傝繖鏍峰仛鐨勫ソ澶勬槸鍦ㄧ浉鍚岀殑婧愯棰戝垎杈ㄧ巼涓嬪彲浠ユ彁楂樼粏鑺傜殑娓呮櫚搴︺€傛帓鐗堝涓嬶細绠€鍗曟€荤粨涓€涓嬶細EquirectangularprojectioncubemapEquiangularcubemap鍥惧儚鏉ユ簮绠€鍗曪紝闅惧害涓€鑸妧鏈疄鐜扮畝鍗曪紝涓€鑸浘鍍忎綋绉疺1/3V1/3~1/4V鍥惧儚鍒嗚鲸鐜囦竴鑸秺鏉ヨ秺濂絭鏄疊aselineVolume鐜板湪鏄椂鍊欎娇鐢═hree.js瀹炵幇涓婇潰鐨勬晥鏋滀簡銆備互杩欑鏂瑰紡瀹炵幇绛夎窛鏌辩姸鎶曞奖鐩稿绠€鍗曘€傞鍏堟垜浠湪https://www.flickr.com/鎵惧埌涓€寮犲叏鏅浘銆傚湪鍓嶉潰鐨勪粙缁嶄腑锛屾垜浠彲浠ュ緱鍒?:1绛夎窛鎶曞奖鍏ㄦ櫙鍥惧搴旂殑鍑犱綍浣撲负鐞冧綋銆傝繕璁板緱鎴戜滑涔嬪墠瀛﹁繃鐨勩€婇€犱竴涓捣娲嬬悆銆嬶紝濡備綍鍒涘缓鐞冧綋锛屾槸鐨?*SphereGeometry**銆?..鐪佺暐鍦烘櫙鍒濆鍖栧拰鍏朵粬浠ｇ爜//鍒涘缓涓€涓悆浣揷onstgeometry=newTHREE.SphereGeometry(30,64,32);//鍒涘缓涓€涓汗鐞嗗苟灏嗗叾璁剧疆涓虹孩鑹瞔onstmaterial=newTHREE.MeshBasicMaterial({color:"red",});//鍒涘缓瀵硅薄constskyBox=newTHREE.Mesh(geometry,material);//娣诲姞瀵硅薄鍒板満鏅痵cene.add(skyBox);//璁剧疆涓轰粠杩滃瑙傜湅camera.position.z=100...鐒跺悗鎴戜滑寰楀埌浜嗕竴涓皬绾㈢悆锛氬ソ浜嗭紝鐜板湪浣犲凡缁忓浼氫簡濡備綍鍒涘缓涓€涓皬绾㈢悆锛岃繕鏈?涓楠よ缁х画锛佹帴涓嬫潵锛屾垜浠皢2:1鍏ㄦ櫙鍥剧矘璐村埌鎴戜滑鐨勭悆浣撲笂.jpg')});鎴戜滑寰楀埌涓€涓被浼煎湴鐞冪殑鐞冧綋銆傛垜浠幇鍦ㄨ鍋氱殑鏄紝鎴戜滑涓嶆兂杩滆杩欎簺鍐呭锛岃€屾槸瑕佲€滆韩涓村叾澧冣€濓紒鎵€浠ユ垜浠渶瑕佸皢鐩告満绉诲姩鍒扮悆浣撳唴閮紝鑰屼笉鏄粠杩滃瑙傜湅鈥斺€攃amera.position.z=100+camera.position.z=0.01杩欐椂鍊欐垜浠彂鐜板ぉ绐佺劧榛戜簡銆傚皬闂锛岃繖鏄洜涓哄湪3d娓叉煋涓紝榛樿鐗╀綋鍙細娓叉煋涓€寮犺劯锛屼篃鏄负浜嗚妭鐪佹€ц兘銆傚綋鐒舵垜浠篃鍙互璁╃墿浣撻粯璁ゅ彧娓叉煋鍐呴儴锛岃繖闇€瑕佸０鏄庣汗鐞嗙殑娉曠嚎鏂瑰悜銆傝杩囩▼涓嶅湪鏈鐨勮寖鍥村唴銆傝繖閲屾垜浠彧鎻愪緵涓€涓€濊矾銆傚垢杩愮殑鏄紝Three.js涓烘垜浠彁渚涗簡涓€涓畝鍗曠殑鏂规硶THREE.DoubleSide锛岄€氳繃杩欎釜鏂规硶锛屾垜浠彲浠ヨ鎴戜滑鐨勫璞″憟鐜颁袱涓潰銆傝繖鏍锋垜浠敋鑷冲彲浠ョ湅鍒扮墿浣撳唴閮ㄧ殑绾圭悊銆俢onstmaterial=newTHREE.MeshBasicMaterial({map:newTHREE.TextureLoader().load('./images/panorama/example.jpg'),+side:THREE.DoubleSide,});鐜板湪鎴戜滑鍙浣跨敤**SphereGeometry**鐞冧綋灏卞彲浠ュ揩閫熷疄鐜板叏鏅晥鏋溿€侰ubemapCubemap灏卞儚瀹冪殑鍚嶅瓧涓€鏍枫€傛垜浠彧闇€瑕佺敤绔嬫柟浣撳氨鍙互娓叉煋鍑哄叏鏅晥鏋滐紝浣嗘槸2:1鐨勫叏鏅槸涓嶈兘鐩存帴浣跨敤鐨勩€傛垜浠鍏堥渶瑕侀€氳繃宸ュ叿瀵瑰叾杩涜杞崲銆傜洰鍓嶆湁涓ょ鏇存柟渚库€嬧€嬬殑鏂瑰紡銆俬ttps://jaxry.github.io/panorama-to-cubemap/ffmpeg5.x浣跨敤鍛戒护ffmpeg-iexample.jpg-vfv360=input=equirect:output=c3x2example-cube.jpg鏈€鍚庢垜浠彲浠ュ緱鍒颁笅闈?寮犲浘鐗囷紝寮€濮嬪啓鎴戜滑鐨勪唬鐮?..鐪佺暐鍦烘櫙鍒濆鍖栦唬鐮?/鍒涘缓绔嬫柟浣揷onstbox=newTHREE.BoxGeometry(1,1,1);//鍒涘缓绾圭悊鍑芥暟getTexturesFromAtlasFile(atlasImgUrl,tilesNum){甯搁噺绾圭悊=[];for(leti=0;i
