鑳屾櫙鏈€杩戝涔犱簡涓€浜沇ebGL鍜孴hree.js鐨勫熀纭€鐭ヨ瘑锛屾墍浠ユ兂缁撳悎鏈€杩戞祦琛岀殑acid璁捐椋庢牸锛岃楗颁竴涓嬫垜鐨勪釜浜轰富椤碉紝鎬荤粨涓€浜涘鍒颁簡鐭ヨ瘑銆傛湰鏂囧唴瀹逛富瑕佷粙缁嶉€氳繃浣跨敤React+three.js鎶€鏈爤锛屽姞杞?D妯″瀷锛屾坊鍔?D鏂囧瓧锛屾坊鍔犲姩鐢伙紝鐐瑰嚮浜や簰绛夛紝缁撳悎鏍峰紡璁捐锛屽疄鐜梆煠㈤吀椋庨〉闈㈠叏鐨勮璁℃劅銆傚熀纭€鐭ヨ瘑Three.jsThree.js鏄竴涓熀浜庡師鐢焀ebGL灏佽鐨勮繍琛屽湪娴忚鍣ㄤ腑鐨?D寮曟搸銆傚畠鍙互鐢ㄦ潵鍒涘缓鍚勭3D鍦烘櫙锛屽寘鎷浉鏈恒€佸厜褰便€佹潗璐ㄧ瓑鍚勭瀵硅薄銆傚畠鏄竴绉嶄娇鐢ㄩ潪甯稿箍娉涚殑3D寮曟搸銆傚ぇ瀹跺彲浠ュ幓three.js瀹樻柟涓枃鏂囨。杩涗竴姝ュ涔犮€侫cidDesignAcidDesign涓€璇嶈瘧鑷狝cidGraphics锛岃捣婧愪簬20涓栫邯90骞翠唬acidhouse闊充箰銆佺數瀛愯垶鏇插拰瀣夌毊鏂囧寲銆傚湪璁捐棰嗗煙锛岃繖绉嶉吀鎬х編瀛︽壙杞界潃鑷敱鐨勫懡棰橈紝濂囧舰鎬姸鐨勫浘褰€佸ぇ鑳嗘槑蹇殑鑹插僵銆佺壒娈婄殑鏉愯川璐ㄦ劅銆佸鏍风殑瀛椾綋锛屽舰鎴愪簡鐙壒鐨勯吀鎬ц璁￠鏍笺€傜畝鑰岃█涔嬶紝鏄庝寒鍜岄珮楗卞拰搴︾殑鑹插僵缁勫悎锛涗竷褰╅粦鑹叉惌閰嶉粦鐏拌壊搴曡壊鍜岄珮楗卞拰搴︾殑鑽у厜鑹茬偣缂€鐢婚潰锛涙恫鎬侀噾灞炪€佺幓鐠冦€侀摑绠斿拰濉戞枡绛夋湭鏉ユ劅銆侀叿鎰熷拰绉戞妧鎰熺殑鏉愭枡锛涢殢鏈哄厓绱狅紝鍥惧舰甯冨眬锛涗笉鏂殑閲嶅銆佸垏鍓层€佺粍鍚堝嚑浣曞浘褰㈢瓑閮芥槸閰告€ц璁￠鏍笺€傞吀鎬ч鏍间篃閫愭笎鍦ㄩ煶涔愪笓杈戝皝闈€佽瑙夋捣鎶ャ€佷功绫嶅拰鐢靛奖灏侀潰浠ュ強缃戦〉璁捐涓祦琛岃捣鏉ャ€傚疄鐜版晥鏋滃湪绾块瑙堬細https://tricell.fun瀹炵幇3D妯″瀷鍦烘櫙鐨勫垵濮嬪寲馃審鍒涘缓鍦烘櫙scene=newTHREE.Scene();杩戜笌杩溿€俢amera=newTHREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,0.1,1000);//璁剧疆鐩告満浣嶇疆camera.position.set(600,20,-200);//鐩告満瀵圭劍鍦ㄤ腑蹇冪殑灞忓箷鎽勫儚澶淬€俵ookAt(鏂颁笁.Vector3(0,0,0));馃挕鍒濆鍖栧厜婧愭坊鍔犲崐鐞冨厜婧怘emisphereLight锛氬垱寤轰竴涓洿鑷劧鐨勬埛澶栨晥鏋滅殑鍏夋簮light=newTHREE.HemisphereLight(0xffffff,0x444444);light.position.set(0,20,0);scene.add(light);light=newTHREE.DirectionalLight(0xffffff);light.position.set(0,20,10);light.castShadow=true;scene.add(light);娣诲姞鐜鍏堿mbientLight:varambiColor='#0C0C0C';varambientLight=newTHREE.AmbientLight(ambiColor);鍦烘櫙銆傛坊鍔狅紙鐜鍏夛級锛涙坊鍔犺緟鍔╁伐鍏凤紙鍙€夛級馃摝娣诲姞杈呭姪缃戞牸GridHelper鍙敤浜庢坊鍔犵綉鏍艰緟鍔╃嚎锛屼篃鍙敤浜庤楗帮紝鐢盙ridHelper(size,divisions,colorCenterLine,colorGrid)瀹炵幇銆俿ize锛氱綉鏍煎搴︼紝榛樿鍊间负10銆俤ivisions锛氱瓑鍒嗭紝榛樿鍊间负10銆俢olorCenterLine锛氫腑蹇冪嚎棰滆壊锛岄粯璁ゅ€间负0x444444銆俢olorGrid锛氱綉鏍肩嚎棰滆壊锛岄粯璁ゅ€间负0x888888銆倂argrid=newTHREE.GridHelper(1000,100,0x000000,0x000000);grid.material.opacity=0.1;grid.material.transparent=true;grid.position.set(0,-240,0);scene.add(grid);馃摝娣诲姞鐩告満鎺т欢OrbitControls鍙敤浜庣缉鏀俱€佸钩绉诲拰鏃嬭浆3D鍦烘櫙銆傛湰璐ㄤ笂鏀瑰彉鐨勪笉鏄満鏅紝鑰屾槸鐩告満鐨勫弬鏁般€侽rbitControls.js闇€瑕佸湪寮€鍙戞椂鍗曠嫭瀵煎叆銆俢ontrols=newTHREE.OrbitControls(camera,renderer.domElement);controls.target.set(0,0,0);controls.update();馃摝娣诲姞鎬ц兘鏌ョ湅鎻掍欢stats鏄疶hree.js寮€鍙戠殑杈呭姪搴擄紝涓昏鐢ㄤ簬妫€娴嬪姩鐢昏繍琛屾椂鐨勫抚鏁般€俿tats.js涔熼渶瑕佸崟鐙鍏ャ€傜粺璁℃暟鎹?鏂扮粺璁℃暟鎹紙锛夛紱container.appendChild(stats.dom);鍔犺浇妯″瀷鏈枃绀轰緥涓娇鐢ㄧ殑閾侀ゼ鎶曟幏鑰呴洉鍍?D妯″瀷鏉ヨ嚜threedscans.com锛屽彲浠ュ厤璐逛笅杞戒娇鐢煒勶紝鏂囨湯鎻愪緵浜嗗嚑涓厤璐规ā鍨嬶紝鏈夊涓笅杞界綉绔欎笂鏈?00椤靛厤璐规ā鍨嬨€傚鏋滄偍鏈夊叴瓒ｏ紝鍙互閫夋嫨鑷繁鍠滄鐨勬ā鍨嬩笅杞戒娇鐢ㄣ€傚綋鐒讹紝鏈夊缓妯¤兘鍔涚殑鍚屽涔熷彲浠ヤ娇鐢╞lender銆?dmax绛変笓涓氬缓妯¤蒋浠剁敓鎴愯嚜宸卞枩娆㈢殑妯″瀷銆傚姞杞給bj鎴杅bx妯″瀷闇€瑕佸垎鍒鍏BXLoader.js鎴朞BJLoader.js锛屽姞杞?fbx鍜?obj鏍煎紡妯″瀷鐨勬柟娉曠浉鍚屻€?/varloader=newTHREE.FBXLoader();varloader=newTHREE.OBJLoader();loader.load(model,function(object){object.traverse(function(child){if(child.isMesh){child.castShadow=true;child.receiveShadow=true;}});object.rotation.y=Math.PI/2;object.position.set(0,-200,0);object.scale.set(0.32,0.32,0.32);model=object;scene.add(object);});鍔犺浇gltf妯″瀷闇€瑕佸崟鐙鍏LTFLoader.js銆傚姞杞?gltf鏍煎紡妯″瀷鐨勬柟娉曠暐鏈変笉鍚屻€傞渶瑕佹敞鎰忕殑鏄紝妯″瀷鐨勯亶鍘嗗璞″拰鏈€缁堟坊鍔犲埌鍦烘櫙涓殑鏄痮bject.scene锛屼笉鏄痮bject銆倂arloader=newTHREE.GLTFLoader();loader.load(model,function(object){object.scene.traverse(function(child){if(child.isMesh){child.castShadow=true;child.receiveShadow=true;}});object.scene.rotation.y=Math.PI/2;object.scene.position.set(0,-240,0);object.scene.scale.set(0.33,0.33,0.33);妯″瀷=object.scene;scene.add(object.scene);});娣诲姞缃戞牸骞跺姞杞芥ā鍨嬪悗锛屾晥鏋滃涓嬪浘鎵€绀恒€傛坊鍔犺浆鐩樺姩鐢婚€氳繃requestAnimationFrame鍒锋柊椤甸潰娣诲姞杞洏鍔ㄧ敾鏁堟灉銆倃indow.requestAnimationFrame()鍛婅瘔娴忚鍣ㄥ畠瑕佹墽琛屼竴涓姩鐢伙紝骞惰姹傛祻瑙堝櫒鍦ㄤ笅娆￠噸缁樹箣鍓嶈皟鐢ㄦ寚瀹氱殑鍥炶皟鍑芥暟鏉ユ洿鏂板姩鐢汇€傝鏂规硶闇€瑕佷紶鍏ヤ竴涓洖璋冨嚱鏁颁綔涓哄弬鏁帮紝鍥炶皟鍑芥暟浼氬湪涓嬫娴忚鍣ㄩ噸缁樺墠鎵ц銆傚嚱鏁板姩鐢伙紙锛墈requestAnimationFrame锛堝姩鐢伙級;//闅忕潃椤甸潰閲嶇粯鏀瑰彉鍦烘櫙鐨剅otation.y锛屽疄鐜版棆杞瑂cene.rotation.y-=0.015;renderer.render(scene,camera);}鍦═hree.js鍦烘櫙涓坊鍔犵偣鍑讳氦浜掑湪Three.js鍦烘櫙涓紝鎴戜滑闇€瑕佺偣鍑讳竴涓ā鍨嬫潵鑾峰彇瀹冪殑淇℃伅鎴栬€呭仛涓€浜涘叾浠栫殑鎿嶄綔銆備娇鐢ㄤ簡Raycaster锛堝厜绾挎姇灏勶級銆傚師鐞嗘槸鍦ㄤ綘鐢ㄩ紶鏍囩偣鍑荤殑浣嶇疆鍙戝皠涓€鏉熷皠绾匡紝灏勭嚎涓殑鐗╀綋閮借璁板綍涓嬫潵銆傚熀鏈娉曚负Raycaster(origin,direction,near,far)锛屽叾涓細origin锛氬皠绾跨殑鍘熺偣鍚戦噺銆俤irection锛氬皠绾跨殑鏂瑰悜鍚戦噺銆俷ear锛氭墍鏈夎繑鍥炵殑缁撴灉搴旇鏄痜arther鑰屼笉鏄痭ear銆傚€间笉鑳戒负璐燂紝榛樿涓?銆俧ar锛氭墍鏈夎繑鍥炵殑缁撴灉搴旇姣攆ar鏇磋繎銆備笉鑳藉皬浜巒ear锛岄粯璁や负鏃犵┓澶с€備唬鐮佸疄鐜扮殑鍩烘湰姝ラ鏄細鑾峰彇榧犳爣鍦ㄥ睆骞曚笂鐨勫潗鏍団啋灏嗗睆骞曞潗鏍囪浆鎹负鏍囧噯璁惧鍧愭爣鈫掑皢鏍囧噯璁惧鍧愭爣杞崲涓轰笘鐣屽潗鏍団啋鑾峰彇榧犳爣鍦ㄥ満鏅腑鐨勪笘鐣屽潗鏍団啋鐢熸垚灏勭嚎鏍规嵁涓栫晫鍧愭爣鍜岀浉鏈烘姇褰辨柟鍚戝崟浣嶅悜閲忊啋鏍规嵁A灏勭嚎鎶曞皠鏂瑰悜鍗曚綅鍚戦噺鍒涘缓raycaster瀵硅薄銆?/澹版槑raycaster鍜岄紶鏍囧彉閲弙arraycaster=newTHREE.Raycaster();varmouse=newTHREE.Vector2();onMouseClick=event=>{//灏嗛紶鏍囩偣鍑讳綅缃殑灞忓箷鍧愭爣杞崲涓簍hreejs涓殑鏍囧噯鍧愭爣锛屼互灞忓箷涓績涓哄師鐐癸紝鍙栧€艰寖鍥翠负-1鍒?mouse.x=(event.clientX/window.innerWidth)*2-1;mouse.y=-(event.clientY/window.innerHeight)*2+1;//鏍规嵁榧犳爣鐐圭殑浣嶇疆鍜屽綋鍓嶇浉鏈虹殑鐭╅樀璁＄畻raycasterraycaster.setFromCamera(mouse,camera);//鑾峰彇raycaster绾夸笌鎵€鏈夋ā鍨嬬浉浜ょ殑鏁扮粍闆唋etintersects=raycaster.intersectObjects(scene.children);if(intersects.length>0){alert('HELLOWORLD')//鍙互閫氳繃閬嶅巻鐐瑰嚮涓嶅悓鐨刴esh瑙﹀彂涓嶅悓鐨勪氦浜掞紝姣斿锛歭etselectedObj=intersects[0].object;if(selectedObj.name==='car'){alert('Car馃殫')}}}window.addEventListener('click',onMouseClick,false);娣诲姞3D鏂囧瓧浣跨敤TextGeometry(text:String,parameters:Object)娣诲姞3D鏂囧瓧锛屼互涓嬫槸鍙互璁剧疆鐨勫睘鎬ц鏄庯細size锛氬瓧浣撳ぇ灏忥紝涓€鑸负澶у啓瀛楁瘝鐨勯珮搴︺€俬eight锛氭枃瀛楃殑绮楃粏銆倃eight锛氬彇鍊兼槸normal杩樻槸bold锛岃〃绀烘槸鍚﹀姞绮椼€俧ont锛氬瓧浣擄紝榛樿涓篽elvetiker锛岄渶瑕佸搴斿紩鐢ㄧ殑瀛椾綋鏂囦欢銆俿tyle锛氬€间负normal鎴杋talics锛岃〃绀烘槸鍚︽枩浣揵evelThickness锛氭枩瑙掔矖缁嗐€俠evelSize锛氭枩闈㈠搴︺€俢urveSegments锛氬渾寮ф鏁帮紝浣挎枃瀛楃殑鏇茬嚎鏇村钩婊戙€俠evelEnabled锛氬竷灏斿€硷紝鏄惁浣跨敤鍊掕锛屽嵆鍦ㄨ竟缂樺鍊掕銆倂arloader=newTHREE.FontLoader();loader.load('gentilis_regular.typeface.json',function(font){vartextGeo=newTHREE.TextGeometry('HELLOWORLD',{font:font,size:.8,楂樺害锛?8锛宑urveSegments锛?05锛宐evelThickness锛?05锛宐evelSize锛?05锛宐evelEnabled锛歵rue}锛夛紱vartextMaterial=newTHREE.MeshPhongMaterial锛坽color锛?x03c03c}锛夛紱varmesh=newTHREE.Mesh锛坱extGeo,textMaterial);mesh.position.set(0,3.8,0);scene.add(mesh);});浼樺寲鐜板湪妯″瀷鍔犺浇宸茬粡鍩烘湰瀹屾垚锛屼絾鏄?D妯″瀷鐨勪綋绉竴鑸瘮杈冨ぇ銆傞儴缃插悗鍙戠幇缃戦〉鍔犺浇寰堟參锛屽奖鍝嶇敤鎴蜂綋楠屻€傚噺灏忔ā鍨嬬殑灏哄鏄潪甯稿繀瑕佺殑銆傚湪缃戜笂鎵句簡寰堜箙鐨勫帇缂╁伐鍏凤紝鍙戠幇浣跨敤obj2gltf鍙互杞崲姣旇緝澶х殑OBJ鏍煎紡妯″瀷锛屼笉鐢ㄥ畨瑁呭ぇ鍨?D寤烘ā杞欢銆傝浆鎹负gltf妯″瀷锛屾湁鏁堜紭鍖栨ā鍨嬪ぇ灏忥紝鎻愰珮缃戦〉鍔犺浇閫熷害銆傚畨瑁卬pminstallobj2gltf--save骞跺鍒秓bj妯″瀷鍒板涓嬬洰褰昻ode_modules\obj2gltf\bin鎵ц杞爜鍛戒护nodeobj2gltf.js-idemo.obj-odemo.gltf濡傚浘锛岀被浼间互涓婂唴瀹瑰嚭鐜帮紝杞爜瀹屾垚锛屽姣斾竴涓嬭浆鎹㈠墠鍚庣殑鏂囦欢澶у皬銆傚湪鏈緥涓紝kas.obj鐨勫垵濮嬫枃浠跺ぇ灏忎负9.7M銆傝浆鎹㈠悗鐨勬枃浠秌as.gltf鍙湁4.6M锛屼綋绉缉灏忎簡涓€鍗娿€傝繖鏃跺€欒浆鎹㈠悗鐨勬ā鍨嬪氨鍔犺浇鍒伴〉闈笂浜嗭紝鑲夌溂鍑犱箮鐪嬩笉鍒般€傛ā鍨嬫晥鏋滃彂鐢熷彉鍖栵紝椤甸潰鍔犺浇閫熷害鏄庢樉鎻愬崌銆俹bj2gltf涔熷彲浠ヤ綔涓轰竴涓簱锛岄€氳繃鑺傜偣鏈嶅姟瀹炴椂杞崲妯″瀷銆傛劅鍏磋叮鐨勫悓瀛﹀彲浠ラ€氳繃鏂囨湯閾炬帴浜嗚В鏇村銆備篃鍙互浣跨敤blender绛?D寤烘ā杞欢锛岄€氳繃鍑忓皯妯″瀷闈㈡暟鍜岀缉灏忎綋绉紝鎵嬪姩浼樺寲妯″瀷鍘嬬缉銆傝繖鏍蜂紭鍖栨晥鏋滄瘮杈冩槑鏄俱€傚畬鏁翠唬鐮乿armodel=require('@/assets/models/kas.gltf');varcontainer,stats,controls;varcamera,scene,renderer,light,model;classKasextendsReact.Component{render(){return(
