鍘熸枃璇峰弬鑰冩垜鐨勬枃绔犲叕浼楀彿Threejs瀹炵幇鍙充笂瑙掑皬鍦板浘缁忚繃鍙嶅灏濊瘯锛岀粓浜庡疄鐜颁簡灏忓湴鍥剧殑鍔熻兘銆傚皾璇曚簡鍑犵鏂规硶锛屼絾浠庣患鍚堟晥鏋滃拰鎬ц兘鏉ョ湅锛岀嫭绔嬬浉鏈猴紙OrthographicCamera锛?鐙珛娓叉煋鍣紙WebGLRenderer锛夋槸瀹炵幇灏忓湴鍥剧殑鏈€浣抽€夋嫨銆傝繖閲岀洿鎺ヨ鏈€浣冲疄璺碉紝鐒跺悗渚濇璁板綍涓嬪叾浠栧皾璇曠殑澶ф鎬濊矾銆侭estPracticeIndependentCamera+IndependentRenderer瀹炵幇鎬濊矾鍏跺疄寰堢畝鍗曪紝妞嶅叆鍒扮幇鏈夌▼搴忎腑涔熷緢鏂逛究銆傝鎴戜滑鏉ョ湅鐪嬶細绗竴姝ユ槸鍒涘缓涓€涓湴鍥剧浉鏈恒€備竴鑸€夋嫨姝ｄ氦鐩告満銆傚畠鏈€澶х殑鐗圭偣灏辨槸鎵€鏈夌殑鐗╀綋閮藉湪瀹冪殑鐪奸噷鏄竴鏍风殑鏄剧ず姣斾緥锛屾病鏈夎繎澶ц繙灏忎箣鍒嗭紝闈炲父閫傚悎2D灏忓湴鍥俱€傛憚鍍忓ご鐨勫墠鍥涗釜鍙傛暟鍐冲畾浜嗕富鍦烘櫙鑳界湅鍒板灏戯紝鎽勫儚澶磋秺澶ц兘鐪嬪埌鐨勪笢瑗胯秺澶氥€?/鍒濆鍖栧皬鍦板浘鐩告満constmapSize=20;//鐩告満鍦ㄤ富鍦烘櫙涓湅鍒板灏慶onstmapCamera=newOrthographicCamera(-mapSize/2,mapSize/2,mapSize/2,-mapSize/2,1,1000);mapCamera.position.set(0,100,0);mapCamera.lookAt(鏂颁笁.Vector3(0,0,0));绗簩姝ュ垱寤哄湴鍥炬覆鏌撳櫒锛屽垱寤哄皬鍦板浘鐙珛娓叉煋鍣紝鍙互鍜屼富绋嬪簭鐨勬覆鏌撳櫒杩涚▼瑙ｈ€︼紝涔熸柟渚胯皟鏁村皬鍦板浘鍦ㄥ皬鍦板浘涓婄殑鏄剧ず浣嶇疆灞忓箷銆?/鍒濆鍖栧皬鍦板浘娓叉煋鍣╟onstmapRenderSize=200;//鍒ゆ柇灏忓湴鍥?D骞抽潰鐨刢ss鏍峰紡澶у皬constmapRenderer=newWebGLRenderer({alpha:true});mapRenderer.setSize(mapRenderSize,mapRenderSize);mapRenderer.setClearColor(0x7d684f);//涓嬮潰renderer鐩稿叧鐨勮缃槸鏇村ソ锛屽惁鍒欐樉绀烘晥鏋滀細鏈夌偣濂囨€紒mapRenderer.shadowMap.enabled=true;mapRenderer.shadowMap.type=PCFSoftShadowMap;mapRenderer.physicallyCorrectLights=true;mapRenderer.outputEncoding=sRGBEncoding;//璁剧疆鏍峰紡娣诲姞鍒癏TMLmapRenderer.domElement.id="mapcanvas";mapRenderer.domElement.style.position="absolute";mapRenderer.domElement.style.right="5px";mapRenderer.domElement.style.top="5px";mapRenderer.domElement.style.zIndex="1001";mapRenderer.domElement.style銆俠order="1pxdashed#000";mapRenderer.domElement.style.transform=`rotateZ(${mapRotateZ}deg)`;mapRenderer.domElement.style.borderRadius="16px";document.body.appendChild(mapRenderer.domElement);绗笁姝ユ洿鏂癿inimapcamera鐨勪綅缃紝璋冪敤minimaprenderer娓叉煋灞忓箷锛屼互鍒朵綔minimap鐢婚潰涓庝富绋嬪簭鐢婚潰鍚屾锛屽皬鍦板浘鐩告満鐨勪綅缃渶瑕佸拰鎴戜滑鐜╁锛堟垨涓荤浉鏈猴級鐨勪綅缃悓姝?/鏇存柊鍦板浘鐩告満浣嶇疆鍜岃鐐瑰嚱鏁皍pdateMapCameraAndRender(){lettargetPos=鐜╁浣嶇疆锛?/鍐冲畾灏忓湴鍥剧殑瑙傛祴涓績鐐筸apCamera.position.set(targetPos.x,targetPos.y+100,targetPos.z);mapCamera.lookAt(targetPos.x,2,targetPos.z);//娓叉煋灏忓湴鍥緈apRenderer.render(this.scene,mapCamera);}animate(){//涓荤▼搴弐ender...//灏忓湴鍥炬覆鏌搖pdateMapCameraAndRender();}瀹屾垚浠ヤ笂涓変釜姝ラ鍚庯紝灏忓湴鍥捐娣诲姞鍒颁富绋嬪簭涓€備竴鍙ヨ瘽灏辨槸锛氱敤涓€涓崟鐙殑鎽勫儚澶寸洴鐫€鐩爣鍦烘櫙锛岀敤涓€涓崟鐙殑娓叉煋鍣ㄥ疄鏃舵覆鏌撳埌涓€涓柊鐨凞om鑺傜偣涓娿€備笅闈㈡槸鎴戝皝瑁呯殑灏忓湴鍥剧被锛屾柟渚夸粙缁嶅拰浣跨敤銆備粠鈥滀笁鈥濆鍏OrthographicCamera,WebGLRenderer,PCFSoftShadowMap,sRGBEncoding,MathUtils,ACESFilmicToneMapping,Vector3,};exportclassMiniMap{_miniMapCamera=null;_miniMapRenderer=null;_followTarget=null;/***鍒濆鍖栧弬鏁?@param{Object}options*@options.scene涓诲満鏅?@options.target浠ュ皬鍦板浘涓轰腑蹇冪偣鐨?D鐩爣*@options.mapSize鍐冲畾鐩告満鐪嬪埌鐨勫唴瀹瑰ぇ灏?default10*@options.mapRenderSize鍐冲畾灏忓湴鍥剧殑2D骞抽潰澶у皬,default120*@options.mapRotateZnumber灏忓湴鍥炬部Z杞?绔栧睆)鐨勬棆杞搴?榛樿0*@options.mapSyncRotateZboolean鏄惁灏忓湴鍥鹃殢鐩爣娌縕杞达紙鍨傜洿灞忓箷锛夋棆杞紝榛樿涓篺alse*/this.mapSize=options.mapSize||10;this.mapRenderSize=options.mapRenderSize||120锛泃his.mapRotateZ=options.mapRotateZ||0;this.mapSyncRotateZ=options.mapSyncRotateZ||閿欒鐨?this._followTarget=閫夐」鐩爣锛沬f(!this.scene){thrownewError("鍦烘櫙涓嶈兘涓虹┖");}if(!this._followTarget){thrownewError("target涓嶈兘涓虹┖锛岃鏄庡皬鍦板浘鐢婚潰涓昏璺熼殢鐗╀綋");}this.add();}add(){const{mapSize,mapRenderSize,mapRotateZ}=this;//鍒濆鍖栧皬鍦板浘娓叉煋鍣╟onstmapRenderer=newWebGLRenderer({alpha:true});mapRenderer.setSize(mapRenderSize,mapRenderSize);//mapRenderer.setClearColor(0x7d684f);mapRenderer.shadowMap.enabled=true;mapRenderer.shadowMap.type=PCFSoftShadowMap;mapRenderer.physicallyCorrectLights=true;mapRenderer.outputEncoding=sRGBEncodingMap;//鐢靛奖娓叉煋鏁堟灉//mapRenderer.toneMappingExposure=0.6;this._miniMapRenderer=mapRenderer;//璁剧疆鏍峰紡骞跺皢鍏舵坊鍔犲埌HTMLmapRenderer.domElement.id="mapcanvas";mapRenderer.domElement.style.position="缁濆";mapRenderer.domElement.style.right="5px";mapRenderer.domElement.style.top="5px";mapRenderer.domElement.style.zIndex="1001";mapRenderer.domElement.style.border="1px铏氱嚎#000";mapRenderer.domElement.style.transform=`rotateZ(${mapRotateZ}deg)`;mapRenderer.domElement.style.borderRadius="16px";this._miniMapDomEl=mapRenderer.domElement;document.body.appendChild(mapRenderer.domElement);//鍒濆鍖栬糠浣犲湴鍥剧浉鏈篶onstmapCamera=newOrthographicCamera(-mapSize/2,mapSize/2,mapSize/2,-mapSize/2,1,1000);//鍦ㄨ繖绉嶆姇褰辨ā寮忎笅锛屾棤璁虹墿浣撹窛绂荤浉鏈哄杩滄垨澶氱煭锛屾渶缁堟覆鏌撳嚭鏉ョ殑鐢婚潰涓墿浣撶殑澶у皬閮芥槸涓€鏍风殑銆傝繖瀵逛簬娓叉煋2D鍦烘櫙鎴朥I鍏冪礌闈炲父鏈夌敤銆倀his._miniMapCamera=mapCamera;//鏇存柊鍦板浘鐩告満浣嶇疆鍜屾柟鍚憈his.updateCamera();}updateCamera(){//鏇存柊灏忓湴鍥剧殑css鏃嬭浆瑙掑害锛屼笌鎾斁鍣ㄥ悓姝f(this.mapSyncRotateZ){lettargetRotateY=MathUtils.radToDeg(this._followTarget.rotation.y);this._miniMapDomEl.style.transform=`rotateZ(${this.mapRotateZ+targetRotateY}deg)`;}//鏇存柊鍦板浘鐩告満浣嶇疆鍜屾柟鍚憀ettargetPos=this._followTarget.position;this._miniMapCamera.position.set(targetPos.x,targetPos.y+10,targetPos.z);this._miniMapCamera.lookAt(targetPos.x,3,targetPos.z);}update(){//鏇存柊鍦板浘鐩告満浣嶇疆鍜屾柟鍚憈his.updateCamera();//娓叉煋灏忓湴鍥総his._miniMapRenderer.render(this.scene,this._miniMapCamera);}}浣跨敤绀轰緥锛歩mport{MiniMap}from"./scripts/MiniMap";this.miniMap=newMiniMap({target:this.player,scene:this.scene,mapSize:12,mapRenderSize:160,});animate(){//涓荤▼搴忎唬鐮?...//鏇存柊灏忓湴鍥総his.miniMap.update();}鍏朵粬灏濊瘯瀹炵幇v1:OrthographicCamera+Canvas灏嗘覆鏌撳櫒鐨勫唴瀹逛互鍥剧墖鐨勫舰寮忕粯鍒跺湪Canvas鍏冪礌涓娿€備綋楠屽湴鍧€1缂虹偣锛氭瘡娆＄敾鍥鹃兘鏄浘鐗囧姞杞斤紝椤甸潰璇锋眰鏃犻檺澶э紒鑰屼笖浼氭湁寤惰繜锛屽洜涓哄浘鐗囧姞杞借繃绋嬮渶瑕佺綉缁滀紶杈撴椂闂达紝浼氬鑷村皬鍦板浘鍗￠】锛乿2瀹炵幇锛氬湪鐣岄潰涓婃柊寤轰竴涓尯鍩熶綔涓哄皬鍦板浘锛岃创涓婂満鏅湴鍥剧殑璐寸焊锛岀敾涓€涓爣璁颁唬琛ㄧ帺瀹躲€傚綋涓诲満鏅腑鐨勭帺瀹剁Щ鍔ㄦ椂锛屼綅缃細鍚屾鍒板皬鍦板浘涓婄殑鐜╁鏍囪銆備綋楠屽湴鍧€2浼樼偣锛氬彲浠ヨ嚜瀹氫箟灏忓湴鍥惧拰鐜╁鏍囪鐨勬牱寮忥紝鍥犱负涓€鑸殑灏忓湴鍥惧彧鏄€肩湡鐨勪竴鑸湴褰€佺墿浣撳拰鐜╁浣嶇疆鏍囪锛佺己鐐癸細鍥犱负灏忓湴鍥剧殑娓叉煋鍜屼富涓氬姟鐨勬覆鏌撴槸鍦ㄥ悓涓€涓憚鍍忓ご涓嬪睍绀猴紝鎽勫儚澶磋搴﹀垏鎹€佺缉鏀剧瓑鎿嶄綔浼氬奖鍝嶅皬鍦板浘鐨勪綅缃拰澶у皬锛岄渶瑕佸鏉傜殑閫昏緫鍐欏疄鏃舵洿鏂板皬鍦板浘鐨勪綅缃拰娓叉煋灏哄锛屾湁涓€瀹氱殑闅惧害锛乿3瀹炵幇锛氱嫭绔嬬浉鏈猴紙OrthographicCamera锛?鐙珛娓叉煋鍣紙SVGRenderer锛夋晥鏋滀篃寰堢壒鍒紝鑰屼笖鐢变簬灏忓湴鍥炬槸浠vg鐨勫舰寮忔樉绀猴紝鎵€浠ュ彲浠ラ€氳繃js鍜宑ss鏉ユ帶鍒秙vg鑺傜偣銆傚彧鏄湪澶у満鏅笅鐨勮〃鐜扮浉姣旇緝灏辨病閭ｄ箞濂戒簡馃し浣撻獙鍦板潃3
