最近因?yàn)轼櫺菭柨私o河南捐了5000萬物資，真的是看哭了很多的網(wǎng)友，普通一家公司捐款5000萬可能不會(huì)有這樣的共情，但是看了鴻星爾克的背景之后，發(fā)現(xiàn)真的是令人心酸。鴻星爾克2020年的營收是28億，但是利潤卻是虧損2個(gè)億，甚至連微博的官方賬號(hào)都舍不得開會(huì)員，在這種情況下，還豪氣地捐贈(zèng)5000萬，真的是破防了。

網(wǎng)友還稱鴻星爾克，特別像是老一輩人省吃儉用一分一毛攢起來的存款，小心翼翼存在鐵盒里。一聽說祖國需要，立馬拿出鐵盒子，嘩~全導(dǎo)給你。讓上最貴的鞋，拿出了雙 249 的。

然后我去鴻星爾克的官網(wǎng)看了看他家的鞋子。

好家伙，等了55秒，終于把網(wǎng)站打開了。。。（看來真的是年久失修了，太令人心酸了。作為一個(gè)前端看到這一幕真的瘋了...）

恰逢周末，我就去了離我最近的鴻星爾克看了看。買了一雙 136 的鞋子（是真的便宜，最關(guān)鍵的還是舒服）。

買回家后心里想著，像毒APP上面那些阿迪、耐克的都有線上 360° 查看，就想著能不能給鴻星爾克也做一個(gè)呢，算作為一個(gè)技術(shù)人員為它出的一份綿薄之力。

行動(dòng)

有了這個(gè)想法后，我就立馬開始行動(dòng)了。然后我大致總結(jié)了以下幾個(gè)步驟：

1.建模

2.使用 Thee.js 創(chuàng)建場景

3.導(dǎo)入模型

4.加入 Three.js 控制器

由于之前學(xué)習(xí)了一些 Three.js 的相關(guān)知識(shí)，因此對(duì)于有了模型后的展示還是比較有底的，因此其中最麻煩的就是建模了，因?yàn)槲覀冃枰岩粋€(gè)3維的東西，放到電腦中。對(duì)于2維的物體，想要放到電腦上，我們都知道，非常簡單，就是使用相機(jī)拍攝一下就好了，但是想要在電腦中查看3維的物體卻不一樣，它多了一個(gè)維度，增加的量確實(shí)成倍的增長，于是開始查閱各種資料來看如何能夠建立一個(gè)物體的模型。

查了一堆資料，想要建立一個(gè)鞋子模型，總結(jié)起來共有兩種模式。

1.攝影繪圖法（photogrammetry）：通過拍攝照片，通過純算法轉(zhuǎn)化成3d模型，在圖形學(xué)中也稱為單目重建 。

2.雷達(dá)掃描（Lidar scan）：是通過激光雷達(dá)掃描，何同學(xué)的最新一期視頻中也提到了這種方式掃描出點(diǎn)云。

放上一個(gè)我總結(jié)的大綱，大部分都是國外的網(wǎng)站/工具。

一開始搜索結(jié)果中，絕大多數(shù)人都在提 123D Catch，并且也看了很多視頻，說它建立模型快速且逼真，但是再進(jìn)一步的探索中，發(fā)現(xiàn)它貌似在2017年的時(shí)候業(yè)務(wù)就進(jìn)行了合并進(jìn)行了整合。整合后的 ReMake 需要付費(fèi)，處于成本考慮我就沒有繼續(xù)了。（畢竟只是demo嘗試）

后面發(fā)現(xiàn)一款叫做 Polycam 的軟件，成品效果非常好。

但是當(dāng)我選擇使用的時(shí)候，發(fā)現(xiàn)它需要激光雷達(dá)掃描儀（LiDAR），必須要 iphone 12 pro 以上的機(jī)型才能使用。

最終我選擇了 Reality Capture 來創(chuàng)建模型，他是可以通過多張圖片來合成一個(gè)模型的方式，看了一些b站的視頻，感覺它的呈像效果也不錯(cuò)，不過它只支持 windows，且運(yùn)行內(nèi)存需要8g，這個(gè)時(shí)候我搬出了我7年前的windows電腦... 發(fā)現(xiàn)沒想到它還能服役，也是驚喜。

建模

下面就開始正式的內(nèi)容，主角就是我這次買的鞋子（開頭放的那雙）

然后我們開始拍攝，首先我環(huán)繞著鞋子隨意拍攝了一組照片，但是發(fā)現(xiàn)這個(gè)模型真的差強(qiáng)人意...

后面我也采用了白幕的形式，加了一層背景，后面發(fā)現(xiàn)還是不行，應(yīng)用更多是識(shí)別到了后面的背景數(shù)字。

最后... 還是在楠溪的幫助下，將背景圖P成了白色。

皇天不負(fù)有心人，最終的效果還不錯(cuò)，基本上的點(diǎn)云模型已經(jīng)出來了。（這感覺還不錯(cuò)，有種電影里的黑科技的感覺）

下面是模型的樣子，已經(jīng)是我花了一天的時(shí)間訓(xùn)練出的最好的模型了（但是還是有一些輕微的粗糙）

為了盡可能的讓模型看起來完美，中間一共花了一天的時(shí)間來測試模型，因?yàn)榕臄z的角度以及非常影響模型的生成，我一共拍了大約1G的圖片，大約500張圖片（由于前期不懂如何調(diào)整模型，因此嘗試了大量的方法。）

有了模型后，我們就可以將它展示在互聯(lián)網(wǎng)上啦，這里采用了 Three.js（由于這里考慮到很多人不是這塊領(lǐng)域相關(guān)的人員，因此會(huì)講的比較基礎(chǔ)，大佬們請(qǐng)見諒。）

構(gòu)建應(yīng)用

主要由三部分組成（構(gòu)建場景、模型加載、添加控制器）

1.構(gòu)建3d場景

首先我們先加載 Three.js