鏈枃浠嬬粛鐐硅禐+鍏虫敞+鏀惰棌=浜嗚В鍒版覆鏌撻槾褰辨晥鏋滀細娑堣€椾竴瀹氱殑璧勬簮锛屾墍浠hree.js榛樿鍏抽棴浜嗛槾褰辨晥鏋溿€傝鍦═hree.js涓疄鐜伴槾褰辨晥鏋滐紝璇疯浣忎互涓嬪嚑鐐广€傛湰鏂囪瀹炵幇鐨勬晥鏋滄湰鏂囬€傚悎鍏ラ棬绾hree.js宸ヤ綔鑰呴槄璇粇濡傛灉浣犺繕涓嶄簡瑙hree.js锛屽彲浠ュ厛鐪嬬湅銆奣hree.js 璧烽銆嬨€傛湰鏂囦腑浣跨敤鐨凾hree鐗堟湰涓?37銆傚熀鏈蹇靛湪瀛︿範Three.js鐨勬椂鍊欙紝寰堝鐭ヨ瘑鐐瑰叾瀹炲彧瑕佽浣忓嚑涓噸瑕佺殑姝ラ灏卞彲浠ヨ揪鍒扮浉搴旂殑鏁堟灉銆傛瘮濡傘€奣hree.js 璧烽銆嬩腑鎻愬埌鐨勶紝鍙鏈夊満鏅紝鏈夌浉鏈猴紝鏈夋覆鏌撳櫒锛屾湁鐗╀綋锛岄〉闈笂灏卞彲浠ユ樉绀轰竴浜涗笢瑗裤€傝瀹炵幇闃村奖鏁堟灉杩橀渶瑕佸嚑涓噸瑕佺殑姒傚康銆傝鎴戜滑棣栧厛鐮旂┒涓€涓嬫棩甯哥敓娲讳腑闃村奖鏁堟灉鏄浣曚骇鐢熺殑銆傞渶瑕佹湁鍏夈€傞渶瑕佷竴涓墿浣擄紝姣斿鑻规灉锛岀嫍绛夈€傞渶瑕佷竴涓帴鍙楁姇褰辩殑鍏冪礌锛屾瘮濡傚湴闈紝妗岄潰绛夈€俆hree.js涓殑闃村奖鏁堟灉鍏跺疄鍜岀幇瀹炰笘鐣屼腑鐨勫師鐞嗗樊涓嶅銆備絾鑰冭檻鍒版€ц兘鍘熷洜锛孴hree.js榛樿鍏抽棴闃村奖鏁堟灉锛岄渶瑕佹墜鍔ㄥ紑鍚槾褰辨晥鏋滐細娓叉煋鍣ㄥ紑鍚槾褰辨晥鏋溿€傛湁涓€涓厜婧愬彲浠ユ姇灏勯槾褰卞苟鎵撳紑闃村奖銆傛湁涓€涓帴鍙楅槾褰辨姇灏勭殑鍏冪礌锛堜緥濡傚湴闈級锛屽苟灏哸ccept-shadow灞炴€ц缃负true銆傛湁涓€涓墿浣撳彲浠ヤ骇鐢熼槾褰辨晥鏋滐紝骞朵笖鎵撳紑浜嗛槾褰辨晥鏋溿€傚湪鍋氫箣鍓嶏紝鍏堣瀵熶竴涓嬫渶缁堢殑鏁堟灉銆備笂鍥句腑鏈変竴涓珛鏂逛綋銆佸湴闈㈠拰鍏夋簮銆傝繕鏈夊熀鏈厓绱狅細鍦烘櫙銆佺浉鏈恒€佹覆鏌撳櫒銆傛垜鎶婄敤鍒扮殑鍏冪礌鏁寸悊鎴愪竴寮犺〃锛氬厓绱犳弿杩扮浉鍏充唬鐮佸満鏅鍣ㄣ€佸厜婧愩€佺珛鏂逛綋銆佸湴闈㈢瓑鍦烘櫙涓繀椤绘坊鍔犵殑鍏冪礌銆俵etscene=newScene()鐩告満鍦烘櫙涓殑鐩告満鏄竴绉嶄唬鏇夸汉鐪艰瀵熺殑宸ュ叿銆俵etcamera=newPerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000)Renderer娓叉煋宸ュ叿锛屾湰鏂囦富瑕佽寮€鍚槾褰辨覆鏌撳姛鑳姐€傞渶瑕佸紑鍚槾褰辨覆鏌撳姛鑳姐€俽enderer.shadowMap.enabled=true鍦伴潰鏄帴鏀堕槾褰辩殑鍏冪礌銆備娇鐢≒laneGeometry鐢熸垚涓€涓钩闈紝骞跺皢璇ュ钩闈㈢殑receiveShadow灞炴€ц缃负true浠ユ帴鏀跺叾浠栫墿浣撴姇灏勭殑闃村奖銆傜珛鏂逛綋姝ょず渚嬬殑瀵硅薄鍏冪礌銆備娇鐢˙oxGeometry鍒涘缓涓€涓珛鏂逛綋锛屽苟灏嗙珛鏂逛綋鐨刢astShadow灞炴€ц缃负true浠ヤ骇鐢熼槾褰辨晥鏋溿€傚厜婧愬簲浣跨敤鑳戒骇鐢熼槾褰辨晥鏋滅殑鍏夋簮锛屽鏈緥涓殑SpotLight鑱氬厜鐏€傚儚AmbientLight鍜孭ointLight杩欐牱鐨勭幆澧冨厜涓嶈兘浜х敓闃村奖鏁堟灉銆備娇鐢⊿potLight鍒涘缓涓€涓厜婧愶紝灏嗗厜婧愮殑castShadow璁剧疆涓簍rue锛屽紑鍚槾褰辨晥鏋溿€傜涓€姝ワ細鏋勫缓鍩烘湰鍦烘櫙涓変腑鏋勫缓鍩烘湰鍦烘櫙闇€瑕佷笁涓厓绱狅細鍦烘櫙Scene銆佺浉鏈篜erspectiveCamera銆佹覆鏌撳櫒WebGLRenderer銆?scripttype="module">import{Scene,//scenePerspectiveCamera,//cameraWebGLRenderer,//rendererColor,//棰滆壊锛堜笉鏄湰渚嬬殑閲嶇偣锛塒laneGeometry,//骞抽潰鍑犱綍锛堝垱寤哄湴闈㈡椂浣跨敤)BoxGeometry,//cubicgeometry锛堝垱寤虹珛鏂逛綋鏃朵娇鐢級MeshLambertMaterial,//闈炲厜娉借〃闈㈡潗璐紙鍙互鎺ュ彈鍏変骇鐢熼槾褰辨晥鏋滐級Mesh,//grid,SpotLight//鍚堟垚鐗╀綋鍏冪礌鏃朵細鐢ㄥ埌鑱氬厜鐏瘆from'../js/Three/src/Three.js'//sceneletscene=newScene()//cameraletcamera=newPerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000)//璁剧疆鐩告満浣嶇疆camera.position.set(-30,60,60)//閿佸畾鐩告満闀滃ご鏂瑰悜camera.lookAt(scene.position)//Rendererletrenderer=newWebGLRenderer()renderer.setClearColor(newColor(0xEEEEEE))//璁剧疆娓叉煋鍣ㄩ鑹瞨enderer.setSize(window.innerWidth,window.innerHeight)//娓叉煋鍣ㄥぇ灏?/灏嗘覆鏌撳櫒娣诲姞鍒伴〉闈ocument.body.appendChild(renderer.domElement)//Renderrenderer.render(scene,camera)鎴戝皢鍦烘櫙鐨勮儗鏅鑹茶缃负鐏拌壊renderer.setClearColor(newColor(0xEEEEEE))銆傛鏃讹紝椤甸潰鏄┖鐧界殑锛屾病鏈夊彲鏄剧ず鐨勫厓绱犮€傜浜屾锛氬垱寤哄厜婧愬洜涓烘湰渚嬫病鏈変娇鐢ㄥ熀纭€鏉愯川锛圡eshBasicMaterial锛夛紝娓叉煋鍑烘潵鐨勭墿浣撴病鏈夊厜婧愭槸涓嶄細鏄剧ず鐨勶紝鎵€浠ユ垜鍏堝湪鍦烘櫙涓坊鍔犲厜婧愶紝鐒跺悗娣诲姞鍦伴潰鍜岀珛鏂逛綋浠ヤ究浜庤瀵熴€備负浜嗗疄鐜伴槾褰辨晥鏋滐紝鎴戦€夋嫨浜哠potLight鑱氬厜鐏€?/鐪佺暐閮ㄥ垎浠ｇ爜//鍏夋簮letspotLight=newSpotLight(0xFFFFFF)spotLight.position.set(-40,50,30)scene.add(spotLight)//灏嗚仛鍏夌伅娣诲姞鍒板満鏅腑铏界劧鍏夋簮鍒涘缓瀹屾垚鍚庯紝杩欎釜鍦烘櫙涓病鏈夊叾浠栫墿浣擄紝鎵€浠ュ満鏅繕鏄┖鐧界殑銆傜3姝ワ細鍒涘缓鍦伴潰鍦ㄦ湰渚嬩腑锛屽湴闈㈢敤浜庢帴鍙楃墿浣撴姇褰辩煝閲忋€備负浜嗗垱寤哄湴闈紝鎴戜娇鐢ㄤ簡PlaneGeometry骞抽潰锛屽畠鍙渶瑕佷紶鍏ュ搴﹀拰楂樺害銆傜劧鍚庝娇鐢∕eshLambertMaterial鏉愯川骞跺皢搴曡壊璁剧疆涓虹櫧鑹层€?/鐪佺暐涓€浜涗唬鐮?/GroundletplaneGeometry=newPlaneGeometry(60,20)//SkeletonletplaneMaterial=newMeshLambertMaterial({color:0xffffff})//鍙互浜х敓闃村奖鐨勬潗璐╨etplane=newMesh(planeGeometry,planeMaterial)//Gridscene.add(plane)//灏嗗湴闈㈡坊鍔犲埌鍦烘櫙涓紝姝ゆ椂浣犵湅鍒扮殑鍦伴潰灏卞儚涓婂浘涓€鏍凤紙鏍规湰娌℃湁鍦伴潰锛夈€傜敱浜庡厜绾跨殑鍘熷洜锛屽湴闈㈢湅璧锋潵涓嶆槸绾櫧鑹茬殑銆傜鍏夎秺杩戣秺鐧斤紝瓒婅繙瓒婄伆銆傛垜甯屾湜鍦伴潰姘村钩锛屾墍浠ユ垜灏嗗湴闈㈡部x杞存棆杞?90掳銆?/鐪佺暐閮ㄥ垎浠ｇ爜plane.rotation.x=-90*Math.PI/180//鍦伴潰x杞存棆杞?90搴︾4姝ワ細鍒涘缓绔嬫柟浣撴垜浣跨敤BoxGeometry鍒涘缓绔嬫柟浣撳苟璁剧疆绾㈣壊绾圭悊銆?/鐪佺暐閮ㄥ垎浠ｇ爜//CubeletcubeGeometry=newBoxGeometry(6,6,6)letcubeMaterial=newMeshLambertMaterial({color:0xff0000})//鍙互浜х敓闃村奖鐨勬潗璐╨etcube=newMesh(cubeGeometry,cubeMaterial)scene.add(cube)淇敼绔嬫柟浣撶殑浣嶇疆銆俢ube.position.set(-6,6,3)绗簲姝ワ細寮€鍚槾褰辨晥鏋溿€備娇鐢ㄤ笂闈㈡彁鍒扮殑鍥涗釜鍏紡鏉ユ墦寮€闃村奖鏁堟灉銆傛覆鏌撳櫒鎵撳紑闃村奖鏁堟灉銆傛湁涓€涓厜婧愬彲浠ユ姇灏勯槾褰卞苟鎵撳紑闃村奖銆傛湁涓€涓帴鍙楅槾褰辨姇灏勭殑鍏冪礌锛堜緥濡傚湴闈級锛屽苟灏哸ccept-shadow灞炴€ц缃负true銆傛湁涓€涓墿浣撳彲浠ヤ骇鐢熼槾褰辨晥鏋滐紝骞朵笖鎵撳紑浜嗛槾褰辨晥鏋溿€?/鐪佺暐閮ㄥ垎浠ｇ爜//娓叉煋鍣ㄥ紑鍚槾褰辨晥鏋渞enderer.shadowMap.enabled=true//鍏夋簮寮€鍚槾褰辨晥鏋渟potLight.castShadow=true//鍦伴潰鎺ュ彈闃村奖plane.receiveShadow=true//绔嬫柟浣撳惎鐢ㄩ槾褰辨晥鏋渃ube.castShadow=true瀹屾垚锛佸鏋滄兂璁剧疆闃村奖鐨勭簿缁嗗害锛屼篃鍙互閫氳繃鑱氬厜鐏殑涓変釜灞炴€ф潵鎺у埗锛歴potLight.shadow.mapSizespotLight.shadow.camera.farspotLight.shadow.camera.nera鏈枃涓昏璁茶В闃村奖鐨勫熀鏈娇鐢?妗堜緥鏂囩珷浼氱粨鍚堝叾浠栨晥鏋滄潵瀹屾垚鏇村鏈夎叮鐨勪簨鎯厏浠ｇ爜浠撳簱猸愪笁涓熀鏈奖瀛愮敤娉曟帹鑽愰槄璇火煈嶃€娿€嶵hree.js銆忚捣椋烇紒銆嬸煈嶃€娿€嶵hree.js銆忚緟鍔╁潗鏍囪酱銆嬸煈嶃€娿€嶵hree.js銆忓満鏅?Scene銆嬸煈嶃€娿€嶵hree.js銆忓嚑涓畝鍗曠殑鍏ラ棬鍔ㄧ敾锛堟柊鎵嬬瘒锛夈€嬬偣璧?鍏虫敞+鏀惰棌=瀛︿範浜嗕唬鐮佷粨搴?/p>
