Three.js(5)-常用方法封裝

天，小妖先給大家獻(xiàn)上又一個(gè)“利器”。在之前的每一個(gè) Demo 中，我們都不厭其煩地創(chuàng)建場景、創(chuàng)建相機(jī)、創(chuàng)建光源。。。經(jīng)過幾次的實(shí)踐，大家現(xiàn)在應(yīng)該也對這個(gè)流程十分熟悉了。現(xiàn)在，我們想擺脫這些煩雜的設(shè)置，更專注于每一篇的新知識點(diǎn)。于是，小妖封裝了這些基本的方法，簡化了初始化的流程。源碼見本篇 Demo : http://xngeer.frostbelt.cn/itemthreedemo/5.mgr.2.html 中引入的 ThreeMgr.js，依賴于 jQuery

這個(gè) ThreeMgr.js，提供了哪些方法呢？我們先對比一下 5.mgr.1.html 和 5.mgr.2.html 兩個(gè) Demo 頁的代碼：

1. 初始化

查看 ThreeMgr 源碼，我們自己有一套默認(rèn)設(shè)置 defaultConfig，init 時(shí)只需要設(shè)置部分值覆蓋默認(rèn)值即可。省略了煩雜的初始化過程，代碼更簡潔易記。

2. 光源

從上面也可以看到，ThreeMgr 有一個(gè) addLight 方法，支持創(chuàng)建 4 種常用的光源

3. dat.GUI

小妖也封裝了上一篇講到的 dat.GUI，見鏈接。

從這里看代碼量并沒有減少，但是不是邏輯清晰一些，可讀性強(qiáng)一些？

4. Stats

每次都要復(fù)制過來的幀率。。簡化為一行代碼

5. 動畫

ThreeMgr.render(Boolean is_loop, Function animate); is_loop 定義是否每幀重繪，animate 定義重繪前對場景中各元素如何修改。

嗯。。確實(shí)沒什么技術(shù)含量，只是對一些常用方法的簡單封裝，世界是由懶人創(chuàng)造的嘛。除了上述方法，ThreeMgr 還封裝了其它一些常用方法，感興趣的同學(xué)可以去查看下源碼，以后有用到時(shí)小妖也還會單獨(dú)說明。

裝Encapsulation

如下代碼,這就算是封裝了

(function (windows, undefined) {
 var i = 0;//相對外部環(huán)境來說,這里的i就算是封裝了
})(window, undefined);

繼承Inheritance

(function (windows, undefined) {
 //父類
 function Person() { }
 Person.prototype.name = "name in Person";
 //子類
 function Student() { }
 Student.prototype = new Person(); //修復(fù)原型
 Student.prototype.constructor = Student; //構(gòu)造函數(shù)
 Student.prototype.supr = Person.prototype; //父類
 //創(chuàng)建子類實(shí)例
 var stu = new Student();
 Student.prototype.age = 28;
 Student.prototype.name = "name in Student instance";
 //打印子類成員及父類成員
 console.log(stu.name); //name in Student instance
 console.log(stu.supr.name); //name in Person
 console.log(stu.age); //28
})(window, undefined);

運(yùn)行結(jié)果如下：

多態(tài)Polymorphism有了繼承,多態(tài)就好辦了

//這就是繼承了
(function (windows, undefined) {
 //父類
 function Person() { }
 Person.prototype.name = "name in Person";
 Person.prototype.learning = function () {
 console.log("learning in Person")
 }
 //子類
 function Student() { }
 Student.prototype = new Person(); //修復(fù)原型
 Student.prototype.constructor = Student; //構(gòu)造函數(shù)
 Student.prototype.supr = Person.prototype; //父類
 Student.prototype.learning = function () {
 console.log("learning in Student");
 }
 //工人
 function Worker() { }
 Worker.prototype = new Person(); //修復(fù)原型
 Worker.prototype.constructor = Worker; //構(gòu)造函數(shù)
 Worker.prototype.supr = Person.prototype; //父類
 Worker.prototype.learning = function () {
 console.log("learning in Worker");
 }
 //工廠
 var personFactory = function (type) {
 switch (type) {
 case "Worker":
 return new Worker();
 break;
 case "Student":
 return new Student();
 break;
 }
 return new Person();
 }
 //客戶端
 var person = personFactory("Student");
 person.learning(); //learning in Student
 person = personFactory("Worker");
 person.learning(); //learning in Worker
})(window, undefined);

運(yùn)行結(jié)果如下：

對前端的技術(shù)，架構(gòu)技術(shù)感興趣的同學(xué)關(guān)注我的頭條號，并在后臺私信發(fā)送關(guān)鍵字：“前端”即可獲取免費(fèi)的架構(gòu)師學(xué)習(xí)資料

知識體系已整理好，歡迎免費(fèi)領(lǐng)取。還有面試視頻分享可以免費(fèi)獲取。關(guān)注我，可以獲得沒有的架構(gòu)經(jīng)驗(yàn)哦??！

.id選擇器

<div id="box"></div>


function byId(id){
 return typeof(id) === "string"?document.getElementById(id):id;
}

使用方法 直接調(diào)用函數(shù): byId("box")


function $(selector){
 var c=selector.substring(0,1);//獲取第一個(gè)字符
 if(c=="#"){ 
 //返回相應(yīng)的元素 
 return document.getElementById(selector.substring(1,selector.length)); 
 }
}
使用方法 直接調(diào)用函數(shù): $("#box")

1.class選擇器

<div class="box">
 <p class="box">dom</p>
 </div>

function byClass(selector){ 
 var className=selector.substring(1); 
 if(document.getElementsByClassName){ 
 return document.getElementsByClassName(className);
 }else{ 
 var reg=new RegExp('^|\\s'+className+'$|\\s'); 
 var elems=document.getElementsByTagName("*"); 
 var arr=[]; 
 for(var i=0;i<elems.length;i++){ 
 if(reg.test(elems[i].className)){ 
 arr.push(elem[i]); 
 } 
 } 
 return arr; 
 } 
}

使用方法 直接調(diào)用函數(shù): byClass(".box") 返回的是一個(gè)數(shù)組

3.封裝標(biāo)簽選擇器

 function byTagName(element){ 

 return document.getElementsByTagName(element); 

 } 
選擇返回也是一個(gè)數(shù)組

4.向當(dāng)前元素末尾追加一個(gè)元素

function append(newEle, container) {
 container.appendChild(newEle);
}

5.向當(dāng)前元素之前追加一個(gè)元素

function prepend(newEle, container) {
var firstEle = this.firstChild(container);
if(firstEle) {
container.insertBefore(newEle, firstEle);
return;
}
this.append(newEle, container);
}

6.DOM添加class和移除class

在線咨詢

上一篇：JavaScript 函數(shù)調(diào)用
下一篇：如何在瀏覽器賬中查看網(wǎng)頁的HTML源代碼？

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Three.js(5)-常用方法封裝

您的項(xiàng)目需求