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

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

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

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

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

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

行動

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

1.建模

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

3.導(dǎo)入模型

4.加入 Three.js 控制器

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

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

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

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

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

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

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

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

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

建模

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

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

后面我也采用了白幕的形式，加了一層背景，后面發(fā)現(xiàn)還是不行，應(yīng)用