javascript 3d engine —m3d 公開

來源:互聯網
上載者:User

鑒於五一長假前應該沒時間大改了(興趣與畢業,暫時還是畢業比較重要),先放出來跟大家分享下這半個月的努力成果,4月下旬開始抽晚上的時間把剩下的mootools源碼解析補完。

先說下這個所謂的engine的特點

  1. 結構組織上是完全的OOP, 支援鏈式調用,總體上類似於mootools與prototype的風格 DEMO
  2. 核心Vector與Matrix(或繼承類)執行個體做變換時 ,通過restrain參數 可以主動控制破壞性變換以及非破壞性的變換(即是否影響原執行個體)
  3. 支援層級的Scene 各個Scene的transform獨立 只在渲染的時候計算它們的加權變換值(通過 getCurrentTransform())DEMO
  4. 簡單的光源類可以與粒子類結合DEMO  DEMO
  5. 支援事件偵聽(目前寫了個click事件,其他事件其實原理都是一致的,下次長假時會完備這一塊),建立的shape只需要添加一個如onClick方法,即自動開啟對其的click事件偵聽,偵聽範圍精確到每一個面 DEMO(可以嘗試拖動視角讓前一個物體遮蓋後一個,看點擊是否正確,點擊是真正的通過3D掃描線的方式計算,而不是簡單在轉換為二維圖形之後判斷)
  6. 支援操作非常簡單的3D貝塞爾函數的繪製DEMO 拖動查看
  7. 真正的js 3d engine  前900行(一共1300) 只跟js文法以及純粹的物理數學知識有關事實上可以很方便的通過繼承前面建立的類來達到對普通dom的支援,而不僅僅局限於canvas,比如這個demo Demo臨時湊數的,我承認 很醜
  8. 支援兩種層級的擴充,功能上的通過register可以非同步載入js檔案註冊新的執行個體方法(不建議註冊在底層的如Vector中,就跟原生js中不應該動Object一樣),類型上的可以直接通過繼承來達到
  9. canvas render在繪圖時的解析與渲染步驟獨立,支援緩衝解析後的圖形.

有人可能會問有了THREE.js了  ,你寫這個還有什麼意義呢?

  1. 首先體積  m3d壓縮後15k   three.js 壓縮後212k
  2. three.js的作者是大牛…但是代碼真的很難讀(有人看得懂不?),用也非常難用。
  3. 最重要的就是為了學習      並沒有那麼多因為所以          我當初就是準備用canvas展示我的課題的材料生長工藝才開始寫的m3d 找自己專業跟自己興趣的交叉點真的很難(我專業光電整合微納與製造)

接下來的目標

  1. 擴充壓縮後體積不超過20k
  2. 添加一個簡單的TWEEN類,估計會直接扒了mootools的Fx基類簡化一下
  3. 完善事件系統

下載

m3d.js        m3d-min.js

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.