你好，這里是 BIMBOX。

接觸過云平臺項目的小伙伴，一定對駕駛艙、數據中心、運營大屏這些詞耳熟能詳。

通過這樣的圖形、圖表，以及三維交互的數據展示方式，和傳統(tǒng)單一的平臺數據呈現體驗相比有了很大的變革，尤其對非專業(yè)人員而言，數據呈現更加直觀，也更有沖擊力。

在項目實際應用上，領導們也總是希望在一個頁面上既可以看到項目的 BIM 模型，也可以看到各式各樣數據匯總而成的圖表，這些場景需求在 BIM 可視化領域越來越活躍，幾乎成了常規(guī)的訴求。

市面上能說的出名的 BIM 圖形平臺廠商太多了，但是使用這些平臺是有門檻的，或是需要比較高的費用，或是需要比較強的開發(fā)能力。

如果要能靠一個人完成整個 BIM 數據大屏的開發(fā)，在呈現上有質的變化，需要掌握更多的是 Web 編程技術和 3D 知識。

關于行業(yè)發(fā)展的需求，說起來都太蒼白，咱們就聊聊一個懂 Web 和 3D的技術工程師在市面上值多少錢吧，這是我們在招聘網站上搜到的某公司 JD，是不是還挺誘人的！

這份 JD 里面提到了對 3D 圖形框架，以及前端研發(fā)工程師的一些技能需求。當然，我們不太能做到對兩個方向都很精通，但是如果針對大多數項目應用場景下，你是一個可以獨立完成數據大屏的前端研發(fā)工程師，那么在 BIM Web 可視化領域，相信你一定會成為領導和獵頭眼中的香餑餑。

最近很多小伙伴都和我們說，市場環(huán)境不好，養(yǎng)家糊口挺困難，我們覺得，越是在外部環(huán)境不太好的這段時間，咱們的小伙伴更應該把時間花在自我成長上，有一技傍身，才好在環(huán)境復蘇的時候大展鴻途。

我們在去年的線下活動中，見到了一位老朋友，聊起來他正好是做這方面的相關工作，已經在這個領域探索了很多年，活動結束后我們就商量一起做一門相關的課程，把他的絕活都教給更多的小伙伴。

先和你簡單介紹一下他，他的名字叫嚴事鴻。

事鴻最早是一名工地上監(jiān)督鋼筋綁扎，打灰旁站的監(jiān)理員，奔波在五湖四海，做著重復性的工作，職業(yè)發(fā)展也相對受限。

為了改變這樣的生活，事鴻做了一件別人不理解的事情——自學編程。剛開始也是從我們都很熟悉的 Revit 二開做起，期間為了更好理解業(yè)務，通過了一建考試。

在一份 BIM 咨詢工作中，領導讓事鴻參與了部分 Revit 研發(fā)工作，也開始做一些預研的 demo。這個過程中，他涉及了一些 Web 開發(fā)技術，進而逐步加強了自己 Web 編程能力。

通過以往的積累和經驗，在下一份工作中，事鴻正式成為一名全職前端研發(fā)人員，在項目中貢獻自己的代碼能力。

這些成果完全改變了他的個人職業(yè)發(fā)展，工作地點從工地轉移到了辦公室，擁有了從不敢奢望的雙休，工作內容雖然不斷有新的挑戰(zhàn)，但也接觸到了更多前沿的技術，逐步完善了自身的技術棧。

在過去 6 年的研發(fā)生涯中，事鴻參與過智慧城區(qū)管理平臺、某公司 BIM 后臺管理服務系統(tǒng)、某車站全壽命周期管理平臺的開發(fā)，BIM 云平臺的二次開發(fā)技術支持，熟悉前端、WebGL 技術，對如何快速熟悉 BIM 圖形平臺并應用到實際項目中，有豐富的經驗和獨到的個人理解，加上他很好的表達能力，相信可以帶領大家平滑地跨入 Web3D 之門，和你一起走出改變自己職業(yè)發(fā)展的第一步。

說起做課程的初衷，事鴻總結了三點。

??第一，在使用商業(yè)圖形平臺上，編程小白大都是迷茫的，他們缺的不是平臺本身開放的能力，而是使用平臺的能力。平臺對他們而言，是有門檻、有距離的，他們缺少的是更基礎的 Web 編程知識，而這門課程可以陪著他們走完這開發(fā)前的「最后一公里」。

??第二，他們都戲稱自己為「野路子」的研發(fā)，其實建筑人轉研發(fā)都是這個過程，自己希望可以把項目上沉淀的實戰(zhàn)經驗整理并分享出去，讓我們面對實際項目至少沒有「陌生感」。

??第三，事鴻希望自己的經歷可以激勵更多想要改變自己的人，哪怕自己是漫漫黑夜中的一點星光，能照亮一個迷路的建筑編程人都算是薪火相傳。

課程介紹

這部分我們就由事鴻自己來表述啦！

我是大鴻，這是我們第一次見面，我希望通過這個簡短的介紹，可以更加堅定，你對 Web3D 開發(fā)這件事的信心。

廢話不多說，我們先來看幾張數據大屏的截圖吧。

這是我在網絡上搜到的某駕駛艙大屏，我們分析一下，頁面包含了很多圖表，還有一些網頁的元素。

我們再來看一張，這是一個運維大屏，中間部分的地圖也是用圖表繪制的，兩側也還是圖表。

再來看這張，這是一個智慧工地的大屏，很多圖表，網頁元素，中間部分是一個可以交互的三維模型。

再來一張，這是一個智慧樓宇場景的大屏，一分析，也還是圖表，三維模型。

這個是智慧園區(qū)的大屏，有圖表，網頁元素，三維模型。

最后一張，是智慧城市的場景，這個也都還是由圖表，網頁元素，三維模型組成的。

要完成這一系列不同場景的大屏，你需要掌握的內容可以分為三個部分

??第一是能繪制各式各樣的圖表，包括餅狀圖，柱狀圖，地圖等等。

??第二是能加載三維模型，然后要有點選、拖拽等交互。

??第三是能繪制一些網頁元素，比如列表、按鈕之類。

有了這三項技能，你就具備了打造專屬于自己的數據大屏的能力。

也正是針對這三部分技能的需求，才有了我們今天這門 Web3D 開發(fā)入門課程，也是我為每一位渴望改變自己的編程小白而精心準備的一門課。

課程的設計都是緊緊圍繞 2 個主題來開展，一個是?Web，一個是?3D。課程總的來說有三個特色：

??第一，這門課程是完全針對編程小白而設計的，零基礎的課程。

在這門課里，你只需要準備一臺電腦，可以運行瀏覽器，可以裝一些簡單的編程工具即可。

還有一點，你需要準備安安靜靜投入的 20 個小時。其中 10 個小時來學習視頻，10 個小時來練習學習到的內容。

??第二，這門課程是真的手把手帶你飛，課程模擬了一個項目實際研發(fā)流程，是一門實戰(zhàn)課程。

假設你就是一名前端研發(fā)人員，接到了一個 BIMBOX 數據大屏的研發(fā)需求，從開始的原型和產品需求文檔，再到 UI 設計稿件、直到最后的成品，這一全過程，每一個流程都有完整的代碼編寫過程。

而且已經把最關鍵的流程產物都呈現給你，面對實際開發(fā)項目，你就再也不會有陌生感。

??第三，我們這門課程，是學習一門課，入門兩種方向：一個是 Web，一個是 3D。

Web 方向，我們會涉及到前端三劍客、前端框架基礎知識、網絡編程基礎知識，中間還會穿插一些 Web 開發(fā)的小技巧。

3D 部分，有 3D 庫的基礎概念，還有兩款圖形平臺的使用方式。

學完這門課程，你既掌握了 Web，也掌握了 3D 部分的基礎概念知識，后期你再根據自己的興趣，自由發(fā)揮，游刃有余。

學習流程

我們的實戰(zhàn)目標，也就是這個 BIMBOX 數據大屏，就是這門課程的最終目標。那這門課程是怎么達到目標的？咱們一步步來拆解。

? 開發(fā)環(huán)境

作為小白入門課程，首先我會帶著你先從最基本開發(fā)環(huán)境搭建開始，作為一名合格的前端工程師，我們該如何更加高效的開發(fā)。

? js，css，html

接著，你會學習到我們前端大名鼎鼎的三劍客的基礎知識，學完之后就可以加入頂部的交互按鈕，讓它顯示在你的頁面上了，這里你可以立一個小的 flag。

? vue 框架

接下來，你會開始學習前端框架的基礎用法，了解工程化的前端項目，學到這里，你又可以實現數據大屏左側那些框框的網頁元素了，這里你又立了一個 flag。

? 網絡編程

這部分你需要學習網絡編程，既然是 Web 開發(fā)，這個自然就少不了，你還會學習接口文檔，以及怎么調用接口獲取數據。

? 圖表

接著就到了重頭戲之一的圖表了，學習完成之后，你就可以把數據大屏中涉及的折線圖和柱狀圖完成了，距離目標又近了一步。

? 3D 庫

最后，也就是這整個課程最重要的部分——三維模型了。你會嘗試使用三種方式來實現項目中的三維需求，切身體會到在自研和商業(yè)平臺上使用的差異。

我把這個課程的學習路線給你描繪了一下，咱們把數據大屏這個目標經過拆解，形成了一個一個小的學習目標，經過這樣的學習路徑，你就可以一步一步到達我們最初夢想的地方。

你可能會覺得這個課程目標，看起來感覺有點小 low，但是通過切換模型，你可以一秒切換到智慧園區(qū)平臺。

你還可以再一秒切換到智慧城市平臺。

而這一切技巧，都在這門 Web3D 開發(fā)入門課當中，讓我們一起學習，悄悄變強大吧！

看看學過的小伙伴們怎么說

為了給還沒開始學習的小伙伴們一些真實的反饋建議，我們在課程上線之前找來兩位小伙伴來學習這門課程，他們是 BOX 合作 Revit 二次開發(fā)課的老師 Kevin（武漢悉道建筑科技有限公司），和北京市建筑設計研究院有限公司的產品經理九哥。

希望他們從課程學習體驗，實用性等方面給這個課程一些建議，也希望他們的評價給小伙伴們一些參考。

九哥

課程節(jié)奏控制的特別好，很有代入感，學習過程不會覺得枯燥乏味。讓我從一個產品經理的角度，突然明白了前端是如何實現的，一下子豁然開朗。教程內容很飽滿，信息量很大。學習的小伙伴可以多看幾遍，方能體會老師的用心。我自己非常認真的看完了教程每一節(jié)課，從中受益頗多，雖然我不會轉前端開發(fā)，但是卻讓我深刻的了解和認識了前端開發(fā)的流程，對我之后的產品設計，有很大的參考意義。在之后的設計中，能夠更充分的考慮 UI 如何實現。

kevin

嚴老師的課件制作精良，非常用心，讓我很有學習的欲望。課程內容循序漸進，講課節(jié)奏有的放矢，非常適合非科班 Web 開發(fā)人員學習。學完整個課程，不僅會對 Web3D 開發(fā)有一個全面的了解，也會從最基礎、最細節(jié)的地方掌握 Web3D 開發(fā)的流程、方法和應用。對于已經有 Revit 二開基礎的同學來說，上手會更加絲滑，課程為那些有邁向全棧開發(fā)目標的小伙伴們提供了加速彈道。

以上是兩位的學習體驗，希望他們的反饋可以給你一些學習前的建議。整個課程都做了后期剪輯，幫助你節(jié)省學習時間，這門課程也是籌備了幾個月之久，我們和事鴻花了這么大的力氣制作這門課程，就是希望能幫助更多的人打開開發(fā)的大門，突破學習的壁壘，并能學有所成，學有所用。

我們會為購買課程的人建立學習交流群，事鴻、kevin、九哥都會在群里，大家一起相互學習和幫助，創(chuàng)造一個好的學習交流氛圍，也希望你再學習的過程中結交一些志同道合的伙伴，認識一群朋友。

課程上線有優(yōu)惠，還有團購可以參與，一定不要錯過這門好課！

有態(tài)度，有深度，這里是 BIMBOX，我們下次再見！