three+blender+react，实现一些简单的功能｜大帅老元threejs特训
时间：2023-04-03 01:17:38
HTML
鍓嶈█馃搩鍓嶅嚑澶╁弬鍔犱簡鍘熷畤瀹欓」鐩殑瀛︿範锛屼笉杩囨槸blender鐨勬柊鎵嬨€備笂鐝椂闂存病娉曞涔狅紝鍙兘鍋峰伔鎽告懜銆傚仛涓褰曪紝椤圭洰涓敤鍒板拰涓嶇敤鍒扮殑鏂囦欢閮藉湪src鐩綍涓嬬殑resources鏂囦欢澶逛笅銆傚鏋滄兂鍋氱偣涓嶄竴鏍风殑锛岄偅灏辨崲涓鏋讹紝鐢╲ite鎼缓鐨剅eact宸ョ▼锛屼笅杞絫hreeJs瀹夎鍖呮潵鍐欍€傚噯澶?銆佸伐鍏蜂娇鐢╞lender锛屽洜涓篵lender鏃㈠彲浠ョ敤浜巑ac涔熷彲浠ョ敤浜巜indows锛岃€?dmax鍙€傜敤浜巜indows绯荤粺锛堜絾鏄洜涓轰箣鍓嶅杩?dmax锛屾墍浠ヨ櫧鐒舵垜鏄痬ac锛屼絾鏄篃瑁呬簡涓€涓獁indows绯荤粺鐨勮櫄鎷熸満锛岃繍琛屾椂3dMax杩樻槸鍙互鐢ㄧ殑銆傦級2.缃戠珯blender涓嬭浇鍦板潃锛歨ttps://www.blender.org/thanks/涓嬭浇璐村浘鎴栨潗璐細https://www.textures.com/library涓€浜涘熀鏈ā鍨嬶細https://sketchfab.com/锛堝彲浠ュ湪sketchfab涓婅幏鍙栨ā鍨嬶紝瀹炵幇涓€灏忛儴鍒嗘ā鍨嬭嚜鐢憋級锛坬q閭锛実oogle閭閮藉彲浠ワ紝163閭娉ㄥ唽濂藉儚涓嶈锛塮ormodelbindingskeleton:https://www.mixamo.com/锛堟病鏈夊姩鐢荤殑瑙掕壊锛屾紨绀轰腑浣跨敤鐨刧lb涓嶆敮鎸侊紝涔熸病鏈変换浣曟彁绀恒€傚彲浠ョ敤fbx鏍煎紡锛?.blender涓殑涓€浜涘揩鎹烽敭blender涓娇鐢ㄧ殑鍙虫墜鍧愭爣绯诲揩鎹烽敭鍏ㄩ€夛細A鍙栨秷鍏ㄩ€夛細AA澶嶅埗瀵硅薄锛歋hift+D绉诲姩锛欸缂╂斁锛歋绉诲姩瑙嗚锛氶紶鏍囨粴杞敭鏃嬭浆锛歊鎼滅储锛欶3鍒犻櫎锛歑濉厖闈細F鍚堝苟椤剁偣锛歁缂栬緫妯″紡锛歍ab鍓嶈鍥撅細1鍙宠鍥撅細3椤惰鍥撅細7鍒囨崲瑙嗗浘锛欰lt+榧犳爣涓敭閫忚鏄剧ず妯″紡锛欰lt+Z鍒嗛殧锛歅灞炴€ф爮锛歂宸︿晶宸ュ叿鏍忥細T鐜€夛細Alt+A鍙嶉€夛細Ctrl+I闅愯棌瀵硅薄锛欻鍙栨秷闅愯棌锛欰lt+H鏌ョ湅鍏ㄩ儴锛歋hift+C鐖跺瓙閾炬帴锛欳trl+P鐩告満瑙嗗浘锛?鐫€鑹叉ā寮忥細Z寮瑰嚭涓婁竴涓覆鏌撶獥鍙ｏ細F11鍒涘缓闆嗗悎锛歁璁剧疆鍏夋爣锛歋hift+S鏈€澶у寲褰撳墠绐楀彛锛欳trl+Space瀵硅薄浜や簰妯″紡璁剧疆锛欳trl+Tab杩涘叆/閫€鍑轰笁瑙嗗浘锛欳trl+Alt+Q鎸ゅ嚭锛欶9鍏夋爣鍥炲埌鍘熺偣锛歋hift+C寮€鍚?鍏抽棴鍚搁檮鍔熻兘锛歋hift+Tab閫夋嫨杩為€氬厓绱狅細L鏅€氬鍒讹細Shift+D绉婚櫎鐖跺瓙鍏崇郴锛欰lt+P鍒涘缓鐖跺瓙-瀛愬叧绯伙細Ctrl+P绉诲姩瀵硅薄锛歁杩炴帴鑺傜偣锛欶鏂紑鑺傜偣锛欳trl+榧犳爣宸﹂敭娣诲姞杞崲鐐癸細Shift+榧犳爣宸﹂敭鏆傚仠/鎾斁锛欰lt+A涓婁竴甯?涓嬩竴甯э細宸﹀彸绠ご鍒犻櫎閿敾妗嗭細Alt+I鐐圭嚎闈㈠垏鎹細Ctrl+Tab鎾曡鍚庡～鍏咃細Alt+V鍊掕宸ュ叿锛欳trl+B鍒囧壊宸ュ叿锛欿鎷変几宸ュ叿锛欵缁嗗垎瀵硅薄锛氭寜浣廠+榧犳爣涓敭娓叉煋锛欶12淇濆瓨鐢ㄦ埛璁剧疆锛欳trl+U鏈変簺蹇嵎閿垜娌¤瘯杩囦笉杩囦綘鍙互鑷繁璇曡瘯銆?.瀹炵幇浠ｇ爜鏃跺彲鑳介亣鍒扮殑鍑犱釜闄烽槺銆備负浠€涔堝姩鐢讳笉鍔紵鎮ㄩ渶瑕佽缃姩鐢讳腑甯х殑鎾斁椤哄簭銆備负浠€涔堣窡鐫€鎿嶄綔鍏ㄩ粦灞忥紝鍥犱负鎽勫儚澶村湪閲岄潰锛岄渶瑕佽缃憚鍍忓ご鐨勪綅缃€備负浠€涔堝簳閮ㄧ殑鏉愭枡鏄粦鑹茬殑锛熷彲浠ヤ娇鐢ㄧ幆澧冨厜灏嗗懆鍥翠寒搴﹁皟浜?锛屼唬鐮?锛屼娇鐢╲ite鎼缓宸ョ▼銆傝繖閲屾槸react鐗堟湰npmcreatevite@latest2锛屼笅杞戒笁涓€備笅杞絡s瀹夎鍖呭悗锛屾煡鐪嬫枃妗ｆ煡鐪嬪搴旂殑涓嬭浇鐗堟湰锛屽洜涓轰笉鍚岀増鏈搴旂殑鏂囦欢鍙兘鏈変笉鍚岀殑鏂囦欢澶癸紝杩欓噷鎴戜娇鐢?.145.0npminstallthree@0.145.03銆佸叿浣撲唬鐮?銆佸鍏ョ浉鍏虫枃浠秈mport{useState,useEffect,useRef}from'react'import*asTHREE鏉ヨ嚜'three';//寮曞叆three.js鐨勫叾浠栨墿灞曞簱锛屾煡鐪嬪搴旂増鏈殑鏂囨。锛屾渶鏂扮殑鎵╁睍搴撳湪addons鏂囦欢澶逛笅锛宔g:'three/addons/controls/OrbitControls.js';//OrbitControls鎺т欢鏀寔榧犳爣宸︿腑鍙抽敭鍜岄敭鐩樻柟鍚戦敭鎿嶄綔鏉ヨ嚜鈥滀笁/绀轰緥/jsm/loaders/RGBELoader鈥濓紱2銆佽缃瀹介珮鍑芥暟App(){const[width,setWidth]=useState(window.innerWidth)const[height,setHeight]=useState(window.innerHeight)return(
)}exportdefaultApp3锛屽鏋滅獥鍙ｅ彂鐢熷彉鍖栵紝閲嶆柊璁剧疆绐楀彛constresizeUpdate=(e)=>{//閫氳繃浜嬩欢瀵硅薄鑾峰彇娴忚鍣ㄧ殑楂樺害绐楀彛璁﹉=e.target.innerHeight;璁﹚=e.target.innerWidth;//閲嶇疆搴旂敤绋嬪簭澶у皬renderer.setSize(w,h);璁剧疆楂樺害锛堝皬鏃讹級锛泂etWidth(w)};//閲嶇疆绐楀彛澶у皬useEffect(()=>{//鑾峰彇椤甸潰鍔犺浇鍚庢祻瑙堝櫒绐楀彛鐨勫ぇ灏弆eth=window.innerHeight;setHeight(h)letw=window.innerWidth;setWidth(w)//鑾峰彇椤甸潰鍙樺寲鏃剁殑娴忚鍣ㄧ獥鍙ｅぇ灏弚indow.addEventListener('resize',resizeUpdate);return()=>{//绉婚櫎缁勪欢閿€姣佹椂鐨勭洃鍚簨浠秝indow.removeEventListener('resize',resizeUpdate);}},[])4銆佸浜庣浉搴旂殑鍙橀噺鍒嗗埆鍛藉悕涓簂etscene,camera,renderer,controls//scene,camera,renderer,controllerletdonuts;//绋嶅悗鐢滅敎鍦堟棆杞椂鐨勫彉閲弆etmixer;//鐢滅敎鍦堝姩鐢绘槸鍙橀噺5锛屽垵濮嬪寲/閿€姣佸簲鐢ㄧ▼搴弖seEffect(()=>{//鍒涘缓鍦烘櫙scene=newTHREE.Scene();////鍒涘缓鐩告満camera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.01,10);renderer=newTHREE.WebGLRenderer({antialias:true});renderer.setSize(width,height);//璁剧疆娓叉煋鍣ㄥ昂瀵竏ocument.getElementById('container').appendChild(renderer.domElement);camera.position.set(0.3,0.3,0.5);//璁剧疆鐩告満浣嶇疆controls=newOrbitControls(camera,renderer.domElement);constdirectionLight=newTHREE.DirectionalLight(0xffffff,0.4);//Addparallellightscene.add(directionLight);gltfLoader()//灏唃lb鏂囦欢娣诲姞鍒板満鏅痳gbeLoader()//娣诲姞鑳屾櫙澶╃┖animate()//鍔ㄧ敾寰幆//褰撶粍浠惰閿€姣佹椂绉婚櫎搴旂敤绋嬪簭return()=>{鏂囨。.getElementById('container').removeChild(renderer.domElement);}},[])6銆佷笁涓垎绂荤殑鏂规硶//娣诲姞glb鏂囦欢鍒板満鏅腑constgltfLoader=()=>{newGLTFLoader().load('../src/resources/models/donuts.glb',(gltf)=>{scene.add(gltf.scene);donuts=gltf.scene;mixer=newTHREE.AnimationMixer(gltf.scene);constclips=gltf.animations;//鎾斁鎵€鏈夊姩鐢籧lips.forEach((clip)=>{constaction=mixer.clipAction(clip);action.loop=THREE.LoopOnce;//鍦ㄦ渶鍚庝竴甯у仠姝ction.clampWhenFinished=true;action.play();});})}//娣诲姞鑳屾櫙澶╃┖constrgbeLoader=()=>{newRGBELoader().load('../src/resources/sky2.hdr',function(texture){scene.background=texture;texture.mapping=THREE.EquirectangularReflectionMapping;scene.environment=texture;renderer.outputEncoding=THREE.sRGBEncoding;renderer.render(scene,camera);});}//鍔ㄧ敾寰幆constanimate=()=>{requestAnimationFrame(animate);renderer.render锛堝満鏅紝鍑歌疆鏃朵唬锛?鎺у埗.鏇存柊锛堬級锛涘鏋滐紙鐢滅敎鍦堬級{donuts.rotation.y+=0.01;}if(mixer){mixer.update(0.02);}}6銆佷唬鐮佸湴鍧€浠ｇ爜鍦ㄥ綋鍓峠ithub鍦板潃锛岀偣鍑昏繘鍏ユ煡鐪?锛屾€荤粨涓€涓嬩笉绠″仛浠€涔堥兘瑕佸潥鎸侊紝鍧氭寔灏辫耽浜嗐€傛湁鍏磋叮鐨勪篃鍙互鍔犲叆婧愬垱褰憋紙v:dashhuailaoyuan锛変竴璧蜂氦娴佸涔?/p>
