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

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

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

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

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

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-2EXstX2c-1627442299921)(https://s3.qiufengh.com/blog/image-20210726003444514.png)]

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

行動

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

1.建模

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

3.導(dǎo)入模型

4.加入 Three.js 控制器

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

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

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

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

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

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

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

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

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

建模

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

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

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

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

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

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

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

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

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

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

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

首先我們先加載 Three.js

<script type="module"> import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.129.0/build/three.module.js'; </script>

然后創(chuàng)建一個WebGL渲染器

const container = document.createElement( 'div' ); document.body.appendChild( container );let renderer = new THREE.WebGLRenderer( { antialias: true } ); container.appendChild( renderer.domElement );

再將添加一個場景和照相機

let scene = new THREE.Scene();

相機語法PerspectiveCamera(fov, aspect, near, far)

// 設(shè)置一個透視攝像機 camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 1000 ); // 設(shè)置相機的位置 camera.position.set( 0, 1.5, -30.0 );

將場景和相機添加到 WebGL渲染器中。

renderer.render( scene, camera );

2.模型加載

由于我們的導(dǎo)出的模型是 OBJ 格式的，體積非常大，我先后給它壓成了 gltf、glb 的格式，Three.js 已經(jīng)幫我們寫好了GLTF 的loader，我們直接使用即可。

// 加載模型 const gltfloader = new GLTFLoader(); const draco = new DRACOLoader(); draco.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/'); gltfloader.setDRACOLoader(draco); gltfloader.setPath('assets/obj4/'); gltfloader.load('er4-1.glb', function (gltf) {gltf.scene.scale.set(0.2, 0.2, 0.2); //設(shè)置縮放gltf.scene.rotation.set(-Math.PI / 2, 0, 0) // 設(shè)置角度const Orbit = new THREE.Object3D();Orbit.add(gltf.scene);Orbit.rotation.set(0, Math.PI / 2, 0);scene.add(Orbit);render(); });

但是通過以上代碼打開我們的頁面會是一片漆黑，這個是因為我們的還沒有添加光照。于是我們繼續(xù)來添加一束光，來照亮我們的鞋子。

// 設(shè)置燈光 const directionalLight = new THREE.AmbientLight(0xffffff, 4); scene.add(directionalLight); directionalLight.position.set(2, 5, 5);

現(xiàn)在能夠清晰地看到我們的鞋子了，仿佛黑暗中看到了光明，但是這時候無法通過鼠標或者手勢控制的，需要用到我們 Three.js 的控制器來幫助我們控制我們的模型角度。

3.添加控制器

const controls = new OrbitControls( camera, renderer.domElement ); controls.addEventListener('change', render ); controls.minDistance = 2; // 限制縮放 controls.maxDistance = 10; controls.target.set( 0, 0, 0 ); // 旋轉(zhuǎn)中心點 controls.update();

這個時候我們就能從各個角度看我們的鞋子啦。

大功告成！

在線體驗地址: https://resume.mdedit.online/erke/

開源地址（包含了工具、運行步驟以及實際demo）：https://github.com/hua1995116/360-sneakers-viewer

后續(xù)規(guī)劃

由于時間有限（花了一整天周末的時間），還是沒有得到一個非常完美的模型，后續(xù)也會繼續(xù)探索這塊的實現(xiàn)，再后續(xù)將探索是否能實現(xiàn)一條自動化的方式，從拍攝到模型的展示，以及其實我們有了模型后，離AR試鞋也不遠了，如果你有興趣或者有更好的想法建議，歡迎和我交流。

最后非常感謝楠溪，放下了原本計劃的一些事情來幫助一起拍攝加后期處理，以及陪我處理了一整天的模型。（條件有限的拍攝真的太艱難了。）

還有祝鴻星爾克能夠成為長久的企業(yè)，保持創(chuàng)新，做出更多更好的運動服裝，讓此刻的全民青睞的狀態(tài)保持下去。

附錄

得出的幾個拍攝技巧，也是官方提供的。

1.不要限制圖像數(shù)量，RealityCapture可以處理任意張圖片。

2.使用高分辨率的圖片。

3.場景表面中的每個點應(yīng)該在至少兩個高質(zhì)量的圖像中清晰可見。

4.拍照時以圓形方式圍繞物體移動。

5.移動的角度不要超過30度以上。

6.從拍攝整個對象的照片，移動它然后關(guān)注細節(jié)，保證大小都差不多。

7.完整的環(huán)繞。（不要繞半圈就結(jié)束了）

結(jié)語

??關(guān)注+點贊+收藏+評論+轉(zhuǎn)發(fā)??，原創(chuàng)不易，鼓勵筆者創(chuàng)作更好的文章

關(guān)注公眾號秋風(fēng)的筆記，一個專注于前端面試、工程化、開源的前端公眾號

總結(jié)

以上是生活随笔為你收集整理的我给鸿星尔克写了一个720°看鞋展厅的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。