javascript 基於原生登錄註冊系統搭建一個3d網頁 ( three.js r114 初探 一)

来源:https://www.cnblogs.com/weihexinCode/archive/2020/03/09/12446245.html
-Advertisement-
Play Games

1 "use strict" 2 3 //載入js文件 4 loadFile([ 5 "./js/lib/WebGL.js",//檢查 是否支持webGL 插件 6 "./js/lib/three_114.min.js",//3d庫 7 "js/func.js" 8 ], main); 9 10 / ...


  1 "use strict"
  2 
  3 //載入js文件
  4 loadFile([
  5     "./js/lib/WebGL.js",//檢查 是否支持webGL 插件
  6     "./js/lib/three_114.min.js",//3d庫
  7     "js/func.js"
  8 ], main);
  9 
 10 //創建一個ajax請求, 前往index.php驗證用戶是否已登錄
 11 //如果Ajax返回的是false說明用戶還沒有登錄成功，並前往 view.php, 
 12 //否則ajax返回用戶信息對象
 13 function main(){
 14     new Ajax({
 15         url:"./php/index.php",
 16         method:"get",
 17         success:(data)=>{
 18             let d = JSON.parse(data);
 19             if(d === false){location.href = "./login/view.php"; return;}
 20             showUserInfo(d.val, new View());//用戶信息視圖
 21             showThreeView();//場景3d視圖
 22         }
 23     });
 24 }
 25 
 26 //退出
 27 function exit(){
 28     if(new Func().isRun({id:"testId"}) !== true){console.log("你點得太快了,伺服器跟不上"); return;}
 29     new Ajax({
 30         url:"./php/exit.php",
 31         method:"get",
 32         success:(data)=>{main();}
 33     });
 34 }
 35 
 36 //創建html p元素
 37 function create(v, fel, content){
 38     let p = v.add(fel, "p");
 39     p.innerHTML = content || "";
 40     return p;
 41 }
 42 
 43 //創建登錄成功後的主頁內容
 44 function showUserInfo(user, v){//console.log(user);
 45     
 46     var lid = v.get("loginBoxId");
 47     
 48     var elem_name = create(v, lid, "你好: " + user.UserName);
 49     elem_name.innerHTML += "<input type = 'button' id = 'exitId' value = '退 出' />";
 50     v.get('exitId').onclick = ()=>{exit();}//退出按鈕
 51     
 52     create(v, lid, "我知道你的郵箱是: " + user.Email);
 53     
 54     switch(user.Like.length){
 55         case 1 : 
 56             create(v, lid, "我還知道你喜歡: " + user.Like[0]); 
 57             break;
 58         case 2 : 
 59             create(v, lid, "我還知道你喜歡: " + user.Like[0]); 
 60             create(v, lid, "還有: " + user.Like[1]); 
 61             break;
 62         case 3 : 
 63             create(v, lid, "我還知道你喜歡: " + user.Like[0]); 
 64             create(v, lid, "還有: " + user.Like[1]); 
 65             create(v, lid, "還有: " + user.Like[2]); 
 66             break;
 67         default : break;
 68     }
 69     lid.style = "visibility:visible;";
 70     //lid居中顯示
 71     /* let x = Math.round((v.client.w/2) - (lid.offsetWidth/2));
 72     let y = Math.round((v.client.h/2) - (lid.offsetHeight/2)) - 16;
 73     lid.style = "left:"+x+"px; top:"+y+"px; visibility:visible;"; */
 74 }
 75 
 76 
 77 //創建 主頁 3d 視圖
 78 /*
 79     鍵盤 w a s d移動
 80     滑鼠 點擊滑動旋轉
 81 */
 82 function showThreeView(){
 83     
 84     var three = new Three();
 85     
 86     //場景
 87     var scene = three.createScene();
 88     
 89     //相機
 90     var camera = three.createCamera(); //console.log(camera);
 91     
 92     //渲染器
 93     var renderer = three.createRenderer();
 94     
 95     //燈光
 96     var light = three.createLight(scene);
 97     
 98     //控制器
 99     three.createControl(camera, renderer);
100     
101     //動畫迴圈
102     three.animate(scene, camera, renderer);
103     
104     //創建地面
105     three.createGround();
106     
107     //創建院牆
108     three.createWall({isSetY:true});
109     
110     //創建鐵門
111     three.createGate();
112     
113     console.log(three);
114     alert("鍵盤 w a s d移動, 滑鼠 點擊滑動旋轉");
115 }
  1 "use strict"
  2 
  3 /**方法類
  4 
  5 */
  6 class Func{
  7     
  8     constructor(){}
  9     
 10     //獲取一個字元串的長度  包含中文
 11     getStrLen(str){
 12         let len = 0, i, c;
 13         for (i = 0; i < str.length; i++){
 14             c = str.charCodeAt(i);
 15             if((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)){len++;}else{len+=2;}
 16         }
 17         return len;
 18     }
 19     
 20     //獲取目標範圍隨機數(n保留浮點數數量)
 21     getran(min, max, n){
 22         return Number((Math.random() * (max - min) + min).toFixed(n || 0));//包含max
 23     }
 24     
 25     //獲取2點距離
 26     getPosLen(sdot, edot){
 27         return parseInt(Math.sqrt(Math.pow(Math.abs(sdot.x - edot.x), 2) + Math.pow(Math.abs(sdot.y - edot.y), 2)));
 28     }
 29     
 30     //檢測是否是pc端
 31     isPC(){
 32         let userAgent = navigator.userAgent;
 33         let agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
 34         let ispc = true, v;
 35         for(v = 0; v < agents.length; v++){
 36             if (userAgent.indexOf(agents[v]) > 0){ispc = false; break;}
 37         }
 38         return ispc;
 39     }
 40     
 41     //防止多次提交或執行(在規定時間段內只允許執行一次) 預設 3000ms
 42     isRun(object){
 43         //object = {id: string 必須, isExit, time}
 44         //isEnit : boolean 可選 如果為 true 則刪除對應 id 的對象
 45         //time : number 可選 預設間隔時間 3000 秒
 46         var v = object || {};
 47         if(this.list === undefined){Func.prototype.list = {};}
 48         if(v.id === undefined || typeof(v.id) !== "string"){return "參數id錯誤";}
 49         if(v.isExit === true){delete(this.list[v.id]); return "刪除對象: "+v.id;}
 50         var o = this.list[v.id];
 51         if(!o){this.list[v.id] = {time:v.time || 3000, nowTime:new Date().getTime()}; return true;}
 52         var t = new Date().getTime() - o.nowTime;
 53         if(t < o.time){return o.time - t;}
 54         o.nowTime = new Date().getTime();
 55         return true;
 56     }
 57     
 58 }
 59 
 60 
 61 
 62 /** 創建Ajax請求:
 63     obj = {
 64         url: string    必須, 請求路徑
 65         method: string    可選, post 或 get請求， 預設post請求
 66         data: string    可選, 要發送的數據, 預設為""
 67         asy: boolean    可選, 是否非同步執行, 預設為true
 68         success: function    可選, 成功回調
 69         error: function    可選, 失敗回調
 70         run: function    可選, 請求中回調
 71     }
 72     
 73     xhr.readyState:
 74     0: 請求未初始化
 75     1: 伺服器連接已建立
 76     2: 請求已接收
 77     3: 請求處理中
 78     4: 請求已完成，且響應已就緒
 79     xhr.status:
 80     200: "OK"
 81     404: 未找到頁面
 82 */
 83 class Ajax{
 84     
 85     constructor(obj){
 86         let o = obj || {}
 87         this.url = o.url || null;
 88         this.method = o.method || "post";
 89         this.data = o.data || "";
 90         this.asy = o.asy || true;
 91         this.callback_suc = o.success || function (){};
 92         this.callback_err = o.error || function (){};
 93         this.callback_run = o.run || function (){};
 94         this.request();
 95     }
 96     
 97     request(){
 98         if(!this.url){this.callback_err(); return;}
 99         let xhr = new XMLHttpRequest();
100         xhr.onreadystatechange = (e)=>{
101             if(e.target.readyState === 4 && e.target.status === 200){
102                 this.callback_suc(e.target.responseText);
103                 return;
104             }
105             this.callback_run(e);
106         }
107         xhr.onerror = (e)=>{
108             this.callback_err(e);
109         }
110         if(this.method == "get"){
111             xhr.open(this.method, this.url, this.asy);
112             xhr.send();
113             return;
114         }
115         xhr.open(this.method, this.url, this.asy);
116         xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
117         xhr.send(this.data);
118     }
119     
120 }
121 
122 
123 
124 /** 視圖類
125 
126 */
127 class View{
128     
129     constructor(){
130         if(!this.client){View.prototype.client = this.getClient();}
131     }
132     
133     //創建html元素
134     add(fel, elemName, id, cls){
135         //創建一個元素
136         let el = document.createElement(elemName);
137         //設置el id 和 class
138         if(id){el.setAttribute('id',id);}
139         if(cls){el.className = cls;}
140         //把el添加到fel並顯示（渲染el）
141         if(fel){fel.appendChild(el);}
142         return el;
143     }
144 
145     //刪除html元素
146     remove(){
147         let k, arg = arguments, err = [];
148         for(k = 0; k < arg.length; k++){
149             if(this.isEl(arg[k]) === false){err.push(arg[k]); continue;}
150             arg[k].parentNode.removeChild(arg[k]);
151         }
152         if(err.length > 0){return {err:'這裡有一些刪除失敗的元素', arr:err};}
153         return true;
154     }
155 
156     //id獲取html元素
157     get(id){
158         return document.getElementById(id);
159     }
160     
161     //獲取可視寬高
162     getClient(){
163         return {
164             w:document.documentElement.clientWidth || document.body.clientWidth, 
165             h:document.documentElement.clientHeight || document.body.clientHeight
166         };
167     }
168     
169     //通過parentNode檢查元素是否存在於頁面中
170     isEl(el){
171         if(typeof(el) !== 'object'){return false;}
172         //被刪除之後的html元素object的 parentNode等於null
173         if(!el.parentNode){return false;}
174         return true;
175     }
176     
177     //元素綁定事件
178     addEvent(target, ev, callback){
179         target.addEventListener(ev, function(e){if(callback){callback(e);}}, false);
180     }
181 
182 }
183 
184 
185 
186 /** 3d庫
187     three.js --- version number 114
188     create scene
189 */
190 class Three{
191     
192     constructor(){
193         if (WEBGL.isWebGLAvailable() === false){
194             alert("你不支持WebGL");
195             return;
196         }
197         this.view = new View();
198         THREE.Cache.enabled = true;//載入器啟用緩存
199         this.clock = new THREE.Clock();//
200         this.group = new THREE.Group();//創建一個 分組
201         this.textures = this.createTexture();//存放 紋理 的對象
202     }
203 
204     //創建 場景
205     createScene(){
206         var scene = new THREE.Scene();
207         //scene.fog = new THREE.Fog(0xcce0ff, 800, 1000);//線性霧
208         scene.background = new THREE.CubeTextureLoader()
209         .setPath('img/cube/skyboxsun25deg/')
210         .load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
211         if(this.group){scene.add(this.group);}
212         return scene;
213     }
214     
215     //創建 相機
216     createCamera(){
217         var camera = new THREE.PerspectiveCamera(75, this.view.client.w/this.view.client.h, 1, 5000);
218         camera.position.set(0, 150, 300);//相機起始位置
219         return camera;
220     }
221     
222     //創建 渲染器
223     createRenderer(){
224         var renderer = new THREE.WebGLRenderer({
225             antialias : true,//抗割齒
226             powerPreference:"high-performance"//選擇高性能GPU渲染
227         });
228         renderer.setSize(this.view.client.w, this.view.client.h);//設置渲染大小
229         renderer.setPixelRatio(window.devicePixelRatio);//渲染矯正
230         renderer.gammaFactor = 2.2;//著色校正
231         renderer.physicallyCorrectLights = true;//使其精確照明
232         renderer.shadowMap.enabled = true;//渲染陰影
233         //renderer.autoClear = true;//每幀自動清理緩存
234         if(!renderer.extensions.get('WEBGL_depth_texture')){console.log("深度紋理擴展獲取失敗:WEBGL_depth_texture");}
235         document.body.appendChild(renderer.domElement);
236         renderer.domElement.style.zIndex = "0";
237         renderer.domElement.style.position = "absolute";
238         renderer.domElement.style.top = "0px";
239         renderer.domElement.style.left = "0px";
240         return renderer;
241     }
242     
243     //創建 燈光
244     createLight(scene){
245         scene.add(new THREE.AmbientLight(0x696969));//環境光(無處不在的光，太陽光)
246         var l_d = 1000, light = new THREE.DirectionalLight(0xF0F8FF, 1);//平行光(產生陰影的光)
247         light.position.set(-3000, 3000, -3000);
248         light.position.multiplyScalar(1);
249         //陰影
250         light.castShadow = true;
251         light.shadow.mapSize.width = 1024;
252         light.shadow.mapSize.height = 1024;
253         light.shadow.camera.left = -l_d;
254         light.shadow.camera.right = l_d;
255         light.shadow.camera.top = l_d;
256         light.shadow.camera.bottom = -l_d;
257         light.shadow.camera.near = 1;
258         light.shadow.camera.far = 6000;
259         scene.add(light);
260         return light;
261     }
262     
263     //創建 控制器
264     createControl(camera, renderer){
265         var create = ()=>{
266             let control = new THREE.OrbitControls(camera, renderer.domElement);
267             control.target = new THREE.Vector3(0, 100, 0);//相機焦點
268             //control.minPolarAngle = Math.PI * 0.3;//向上最大角度
269             //control.maxPolarAngle = Math.PI * 0.4;//向下最大角度
270             control.minDistance = 1;//最小距離
271             control.maxDistance = 1000;//最大距離
272             control.autoRotateSpeed = 10;//自動旋轉速度
273             control.panSpeed = 100;//滑鼠旋轉速度
274             control.enableZoom = true;//是否啟用縮放
275             control.enableKeys = true;//是否啟用鍵盤
276             control.keyPanSpeed = 100;//按鍵速度
277             control.keys.LEFT = 65;//key a左
278             control.keys.UP = 87;//key w前
279             control.keys.RIGHT = 68;//key d右
280             control.keys.BOTTOM = 83;//key s後
281             this.control = control;
282         }
283         loadFile("./js/lib/OrbitControls.js", create);//載入 控制器 插件
284     }
285     
286     //創建 動畫迴圈
287     animate(scene, camera, renderer){
288         requestAnimationFrame(()=>{this.animate(scene, camera, renderer);});
289         if(this.control !== undefined && this.clock !== undefined){
290             this.control.update(this.clock.getDelta());//更新控制器
291         }
292         renderer.render(scene, camera);
293     }
294     
295     //創建紋理
296     createTexture(){
297         var load = new THREE.TextureLoader();
298         
299         var texture_ground = load.load("img/texture/ground.jpg");
300         texture_ground.wrapS = texture_ground.wrapT = THREE.RepeatWrapping;
301         texture_ground.repeat.set(20, 20);//x y 平鋪次數
302         texture_ground.anisotropy = 2;//紋理的清晰度(值為2的幕:1, 2, 4, 8, ... 512, 1024, 2048, ...)
303         
304         var texture_wall = load.load("img/texture/wall.jpg");
305         texture_wall.wrapS = texture_wall.wrapT = THREE.RepeatWrapping;
306         texture_wall.repeat.set(2.2, 2.2);
307         texture_wall.anisotropy = 1024;//貼圖畫質
308         texture_wall.minFilter = THREE.NearestFilter;//深度紋理貼圖:
309         texture_wall.magFilter = THREE.NearestFilter;//深度紋理貼圖:
310 
311         var texture_gate = load.load("img/texture/gate.jpg");
312         texture_gate.wrapS = texture_gate.wrapT = THREE.RepeatWrapping;
313         texture_gate.repeat.set(0.03, 0.03);
314         texture_gate.anisotropy = 1024;
315         
316         return {ground:texture_ground, wall:texture_wall, gate:texture_gate};
317     }
318     
319     //創建地面 land
320     createGround(group){
321         var gro = group || this.group, w = 10000, h = 10000;
322         //gro.add(new THREE.GridHelper(w, 100));//添加網格輔助線
323         var mesh = new THREE.Mesh(//創建 物體
324             new THREE.PlaneBufferGeometry(w, h), // geometry 幾何體
325             new THREE.MeshLambertMaterial({map:this.textures.ground}) // material 材質
326         );
327         mesh.receiveShadow = true;//接受陰影
328         mesh.rotation.x = -(Math.PI*0.5);//旋轉90度
329         mesh.matrixAutoUpdate = false;//不實時更新矩陣，提升性能
330         mesh.updateMatrix();//更新一次矩陣, 讓其旋轉90度
331         gro.add(mesh);
332         return mesh;
333     }
334     
335     //創建圍牆
336     createWall(object){
337         var o = object || {};
338         var gro = o.group || this.group;
339         var w = 256, h = 256, d = 40;
340         var mesh = new THREE.Mesh(
341             new THREE.BoxBufferGeometry(w, h, d),
342             new THREE.MeshLambertMaterial({map:this.textures.wall})
343         );
344         mesh.castShadow = true;//投射陰影
345         mesh.receiveShadow = true;//接收陰影
346         mesh.customDepthMaterial = new THREE.MeshDepthMaterial({depthPacking: THREE.RGBADepthPacking});//添加陰影
347         if(o.isSetY === true){mesh.position.y = h / 2 + 1;}//調整坐標 y
348         mesh.matrixAutoUpdate = false;//不實時更新矩陣，提升性能
349         mesh.updateMatrix();//更新一次矩陣
350         gro.add(mesh);
351         return mesh;
352     }
353     
354     //創建一塊 小鋼門...
355     createGate(group){
356         var gro = group || this.group, w = 256, h = 256;
357         var shape = new THREE.Shape(), w2 = w/2, h2 = h/2;
358         shape.moveTo(-w2, h2); shape.lineTo(w2, h2); shape.lineTo(w2, -h2);
359         shape.lineTo(-w2, -h2); shape.lineTo(-w2, h2);
360         var geometry = new THREE.ExtrudeBufferGeometry(shape, {
361             depth:0,
362             bevelThickness:2,
363             bevelSize:3,
364             bevelSegments:1
365         });
366         var material = new THREE.MeshLambertMaterial({map:this.textures.gate});
367         var mesh = new THREE.Mesh(geometry, [material, material]);
368         mesh.castShadow = true;
369         mesh.receiveShadow = true;
370         mesh.customDepthMaterial = new THREE.MeshDepthMaterial({depthPacking: THREE.RGBADepthPacking});
371         mesh.position.set(300, h/2+1, 0);
372         gro.add(mesh);
373         return mesh;
374     }
375     
376 }
Func.js

 

展示:

three.js 版本號

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Node.js Buffer(緩衝區)
    JavaScript 語言自身只有字元串數據類型，沒有二進位數據類型。 但在處理像TCP流或文件流時，必須使用到二進位數據。 因此在 Node.js中，定義了一個 Buffer 類，該類用來創建一個專門存放二進位數據的緩存區。 在v6.0之前創建Buffer對象直接使用new Buffer()構造函 ...
  • Node.js EventEmitter
    events 模塊只提供了一個對象： events.EventEmitter。EventEmitter 的核心就是事件觸發與事件監聽器功能的封裝。 你可以通過require("events");來訪問該模塊。 //引入events模塊 var events=require("events"); // ...
  • 現在Web前端的發展趨勢和行業前景，還能轉行學習前端開發嗎？
    2020還能轉行學web前端開發嗎？這是很多人在網路上搜索的問題。及其原因，還是因為目前網路上充斥著前端飽和的說法，這讓不少人懷疑還能不能轉行web前端，目前程式員行業前景很好，而web前端的前景也不差。 不否認初級前端程式員供給泛濫，待遇惡化，發展遇冷。但是當你堅持到中高級web前端工程師時，就會 ...
  • Node.js 事件迴圈
    Node.js 是單進程單線程應用程式，但是因為 V8 引擎提供的非同步執行回調介面，通過這些介面可以處理大量的併發，所以性能非常高。 Node.js 幾乎每一個 API 都是支持回調函數的。 Node.js 單線程類似進入一個while(true)的事件迴圈，直到沒有事件觀察者退出，每個非同步事件都生 ...
  • Node.js 回調函數（阻塞與非阻塞）
    Node.js 非同步編程的直接體現就是回調。 回調函數在完成任務後就會被調用，Node 使用了大量的回調函數，Node 所有 API 都支持回調函數。 例如，我們可以一邊讀取文件，一邊執行其他命令，在文件讀取完成後，我們將文件內容作為回調函數的參數返回。 這樣在執行代碼時就沒有阻塞或等待文件 I/O ...
  • Node.js REPL(互動式解釋器)
    Node.js REPL(Read Eval Print Loop:互動式解釋器) 表示一個電腦的環境，類似 Window 系統的終端或 Unix/Linux shell，我們可以在終端中輸入命令，並接收系統的響應。 Node 自帶了互動式解釋器，可以執行以下任務： 讀取 - 讀取用戶輸入，解析輸入 ...
  • NPM使用介紹
    NPM是隨同NodeJS一起安裝的包管理工具 允許用戶從NPM伺服器下載別人編寫的第三方包到本地使用 允許用戶從NPM伺服器下載並安裝別人編寫的命令行程式到本地使用 允許用戶將自己編寫的包或命令行程式上傳到NPM伺服器供別人使用 由於新版的nodejs已經集成了npm，所以npm也一併安裝好了。同樣 ...
  • vue中的事件修飾符
    1.stop 阻止事件冒泡 2.prevent 阻止預設事件發生 3.capture 當元素髮生冒泡時，先觸髮帶有該修飾符的元素。若有多個該修飾符，則由外而內觸發。 4.passive 不攔截預設事件，每次事件產生，瀏覽器都會去查詢一下是否有preventDefault阻止該次事件的預設動作。我們加 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類