鏈枃浠嬬粛鐐硅禐+鍏虫敞+涔︾=瀛︿範浜嗚繕璁板緱鍒氬CSS鐨勬椂鍊欙紝鏈変簡涓€鐐瑰熀纭€灏辩珛椹兂鍋氱偣鍔ㄧ敾鐜╃帺銆傚湪浜嗚В浜員hree.js鐨勫熀鏈蹇靛悗锛屾垜涔熸湁杩欎釜鎯虫硶銆傜畝鍗曠殑鍔ㄧ敾鍙互鎻愰珮Three.js鍒濆鑰呯殑瀛︿範鍏磋叮鍜屼俊蹇冦€傛湰鏂囧皢浠庡垵瀛﹁€呯殑瑙掑害璁茶В鍑犱釜绠€鍗曠殑鍔ㄧ敾锛屽寘鎷細骞崇Щ銆佹棆杞€佺缉鏀俱€佽烦璺冦€傚噯澶囧伐浣滃湪寮€濮嬪埗浣滃姩鐢讳箣鍓嶏紝闇€瑕佸垱寤哄熀鏈厓绱狅紝鐒跺悗鎵€鏈夌殑鍔ㄧ敾妗堜緥閮芥槸鍩轰簬浠ヤ笅浠ｇ爜銆傚熀鏈厓绱犲寘鎷細scenecamerarenderercubeauxiliaryaxis杩欐椂鍊欓〉闈笂浼氬嚭鐜颁竴涓潗鏍囪酱鍜屼竴涓粍鑹茬殑绔嬫柟浣擄紝鐒跺悗鎺у埗绔嬫柟浣撶殑绉诲姩銆備笂闈㈢殑浠ｇ爜濡傛灉鐪嬩笉鎳傚彲浠ュ厛鐪嬬湅銆娿€嶵hree.js銆忚捣椋烇紒銆嬶紝鍙互鐪嬬湅鍧愭爣杞淬€娿€嶵hree.js銆忚緟鍔╁潗鏍囪酱銆嬨€傚姩鐢诲師鐞嗚繖閲屾墍璇寸殑鍔ㄧ敾涓昏鏄寚鐗╀綋杩愬姩鐨勬晥鏋溿€傜涓€涓兂鍒扮殑杩愬姩鐩稿叧鐨凙PI灏辨槸setInterval锛屽彲浠ヨ缃瘡闅斾竴瀹氭椂闂存墽琛屼竴娆°€傛瘮濡俿etInterval(()=>{},1000)姣忕鎵ц涓€娆￠噷闈㈢殑鍑芥暟銆備絾鏄痵etInterval鍦ㄥ仛鍔ㄧ敾鐨勬椂鍊欏彲鑳戒細閬囧埌闃诲銆傛墍浠ヤ笉鑳戒繚璇佹瘡娆℃墽琛岀殑鏃堕棿闂撮殧閮戒竴鏍枫€傛墍浠ユ帹鑽愪娇鐢╮equestAnimationFrame()銆傛渶绠€鍗曠殑鍔ㄧ敾灏辨槸姣忎竴甯ч兘绉诲姩锛屾瘮濡傚钩绉汇€佹棆杞€佺缉鏀剧瓑銆傚钩绉诲钩绉诲彲浠ョ悊瑙ｄ负鏀瑰彉鐗╀綋鐨勪綅缃€傚湪涓夌淮涓栫晫涓紝涓変釜缁村害鐢眡銆亂鍜寊琛ㄧず銆傚彧闇€姣忓抚绉诲姩瀹冿紝鏃犺鍝釜缁村害锛屼綘閮藉彲浠ュ埗浣滃钩绉诲姩鐢汇€傛瘮濡傚仛涓€涓獂杞存柟鍚戠殑鍔ㄧ敾锛堝墠鍚庣Щ鍔級銆?/鐪佺暐涓€浜涗唬鐮?..//鎶婂師鏉ョ殑娓叉煋鏂规硶娉ㄩ噴鎺夛紝鎴戜滑闇€瑕佸啀鍐欎竴涓€?/renderer.render(scene,camera)letstep=0//motionstepfunctionrender(){if(cube.position.x>=4){step=-0.08}if(cube.position.x<=0){step=0.08}cube.position.x+=step//淇敼绔嬫柟浣撳湪x杞翠笂鐨勪綅缃畆enderer.render(scene,camera)requestAnimationFrame(render)//閲嶅娓叉煋鏂规硶}render()if浣犳兂鏀瑰彉閫熷害瀵逛簬鍔ㄧ敾锛屽彲浠ヤ娇鐢╟os璁＄畻鏂扮殑姝ラ暱銆?/鐪佺暐涓€浜涗唬鐮?..//鎶婂師鏉ョ殑娓叉煋鏂规硶娉ㄩ噴鎺夛紝鎴戜滑闇€瑕佸啀鍐欎竴涓€?/renderer.render(scene,camera)letstep=0//motionstepfunctionrender(){step+=0.1cube.position.x=2+Math.cos(step)renderer.render(scene,camera)requestAnimationFrame(render)//閲嶅鎵ц娓叉煋鏂规硶}render()Rotation鏃嬭浆涔熷彲浠ユ寜鐓,y,z杞存柟鍚戣繘琛屾棆杞€備慨鏀瑰悗鐨勫睘鎬ф槸rotation銆俧unctionrender(){cube.rotation.x+=0.01cube.rotation.y+=0.01cube.rotation.z+=0.01renderer.render(scene,camera)requestAnimationFrame(render)}render()缂╂斁涔熸槸3鐨勭淮搴︽柟鍚戜篃寰堢畝鍗曪紝鍙渶瑕佷慨鏀圭珛鏂逛綋鐨剆cale灞炴€у嵆鍙€傝step=0.05functionrender(){cube.scale.x+=stepcube.scale.y+=stepcube.scale.z+=stepif(cube.scale.x>=2){step=-0.05}if(cube.scale.x<=1){step=0.05}renderer.render(scene,camera)requestAnimationFrame(render)}render()璺宠浆闇€瑕佹敼鍙?缁寸殑鍊笺€備负浜嗚璺宠穬鏁堟灉鏇磋垝鏈嶏紝鍙互浣跨敤涓夎鍑芥暟鏉ヨ绠楁闀裤€傝step=0functionrender(){step+=0.08cube.position.x=4*(Math.cos(step))cube.position.y=3*Math.abs(Math.sin(step))renderer.render(scene,camera)requestAnimationFrame(render)}render()鎬荤粨鏁板寰堥噸瑕侊紒浠ｇ爜浠撳簱猸愬嚑涓猅hree.js绠€鍗曞姩鐢绘帹鑽愰槄璇火煈嶃€娿€嶵hree.js銆忚捣椋烇紒銆嬸煈嶃€娿€嶵hree.js銆忚緟鍔╁潗鏍囪酱銆嬸煈嶃€娿€嶵hree.js銆忓満鏅?Scene銆嬸煈嶃€奀anvas 浠庡叆闂ㄥ埌鍔濇湅鍙嬫斁寮冿紙鍥捐В鐗堬級銆嬸煈嶃€奀anvas 10娆惧熀纭€婊ら暅锛堝師鐞嗙瘒锛夈€嬬偣璧?鍏虫敞+涔︾=瀛︿範浜嗕唬鐮佷粨搴?/p>
