我給鴻星爾克寫了一個720°看鞋展廳

本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！前端

最近由於鴻星爾克給河南捐了5000萬物資，真的是看哭了不少的網友，普通一家公司捐款5000萬可能不會有這樣的共情，可是看了鴻星爾克的背景以後，發現真的是使人心酸。鴻星爾克2020年的營收是28億，可是利潤倒是虧損2個億，甚至連微博的官方帳號都捨不得開會員，在這種狀況下，還豪氣地捐贈5000萬，真的是破防了。git

網友還稱鴻星爾克，特別像是老一輩人省吃儉用一分一毛攢起來的存款，當心翼翼存在鐵盒裏。一據說祖國須要，立馬拿出鐵盒子，譁~全導給你。讓上最貴的鞋，拿出了雙 249 的。github

而後我去鴻星爾克的官網看了看他家的鞋子。面試

好傢伙，等了55秒，終於把網站打開了。。。（看來真的是年久失修了，太使人心酸了。做爲一個前端看到這一幕真的瘋了...）算法

恰逢週末，我就去了離我最近的鴻星爾克看了看。買了一雙 136 的鞋子（是真的便宜，最關鍵的仍是舒服）。npm

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

行動

有了這個想法後，我就立馬開始行動了。而後我大體總結了如下幾個步驟：後端

1.建模跨域

2.使用 Thee.js 建立場景markdown

3.導入模型

4.加入 Three.js 控制器

因爲以前學習了一些 Three.js 的相關知識，所以對於有了模型後的展現仍是比較有底的，所以其中最麻煩的就是建模了，由於咱們須要把一個3維的東西，放到電腦中。對於2維的物體，想要放到電腦上，咱們都知道，很是簡單，就是使用相機拍攝一下就行了，可是想要在電腦中查看3維的物體卻不同，它多了一個維度，增長的量確實成倍的增加，因而開始查閱各類資料來看如何可以創建一個物體的模型。

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

1.攝影繪圖法（photogrammetry）：經過拍攝照片，經過純算法轉化成3d模型，在圖形學中也稱爲單目重建。

2.雷達掃描（Lidar scan）：是經過激光雷達掃描，何同窗的最新一期視頻中也提到了這種方式掃描出點雲。

放上一個我總結的大綱，大部分都是國外的網站/工具。

一開始搜索結果中，絕大多數人都在提 123D Catch，而且也看了不少視頻，說它創建模型快速且逼真，可是再進一步的探索中，發現它貌似在2017年的時候業務就進行了合併進行了整合。整合後的 ReMake 須要付費，處於成本考慮我就沒有繼續了。（畢竟只是demo嘗試）

後面發現一款叫作 Polycam 的軟件，成品效果很是好。

可是當我選擇使用的時候，發現它須要激光雷達掃描儀（LiDAR），必需要 iphone 12 pro 以上的機型才能使用。

最終我選擇了 Reality Capture 來建立模型，他是能夠經過多張圖片來合成一個模型的方式，看了一些b站的視頻，感受它的呈像效果也不錯，不過它只支持 windows，且運行內存須要8g，這個時候我搬出了我7年前的windows電腦... 發現沒想到它還能服役，也是驚喜。

建模

下面就開始正式的內容，主角就是我此次買的鞋子（開頭放的那雙）

而後咱們開始拍攝，首先我環繞着鞋子隨意拍攝了一組照片，可是發現這個模型真的差強人意...

後面我也採用了白幕的形式，加了一層背景，後面發現仍是不行，應用更可能是識別到了後面的背景數字。

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

皇天不負有心人，最終的效果還不錯，基本上的點雲模型已經出來了。（這感受還不錯，有種電影裏的黑科技的感受）

下面是模型的樣子，已是我花了一天的時間訓練出的最好的模型了（可是仍是有一些輕微的粗糙）

爲了儘量的讓模型看起來完美，中間一共花了一天的時間來測試模型，由於拍攝的角度以及很是影響模型的生成，我一共拍了大約1G的圖片，大約500張圖片（因爲前期不懂如何調整模型，所以嘗試了大量的方法。）

有了模型後，咱們就能夠將它展現在互聯網上啦，這裏採用了 Three.js（因爲這裏考慮到不少人不是這塊領域相關的人員，所以會講的比較基礎，大佬們請見諒。）

構建應用

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

1.構建3d場景

首先咱們先加載 Three.js

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

而後建立一個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)

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

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

renderer.render( scene, camera );
複製代碼

2.模型加載

因爲咱們的導出的模型是 OBJ 格式的，體積很是大，我前後給它壓成了 gltf、glb 的格式，Three.js 已經幫咱們寫好了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); //設置縮放
  gltf.scene.rotation.set(-Math.PI / 2, 0, 0) // 設置角度
  const Orbit = new THREE.Object3D();
  Orbit.add(gltf.scene);
  Orbit.rotation.set(0, Math.PI / 2, 0);

  scene.add(Orbit);
  render();
});
複製代碼

可是經過以上代碼打開咱們的頁面會是一片漆黑，這個是由於咱們的尚未添加光照。因而咱們繼續來添加一束光，來照亮咱們的鞋子。

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

如今可以清晰地看到咱們的鞋子了，彷彿黑暗中看到了光明，可是這時候沒法經過鼠標或者手勢控制的，須要用到咱們 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 );  // 旋轉中心點
controls.update();
複製代碼

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

大功告成！

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

開源地址（包含了工具、運行步驟以及實際demo）：github.com/hua1995116/…

後續規劃

因爲時間有限（花了一成天週末的時間），仍是沒有獲得一個很是完美的模型，後續也會繼續探索這塊的實現，再後續將探索是否能實現一條自動化的方式，從拍攝到模型的展現，以及其實咱們有了模型後，離AR試鞋也不遠了，若是你有興趣或者有更好的想法建議，歡迎和我交流。

最後很是感謝楠溪，放下了本來計劃的一些事情來幫助一塊兒拍攝加後期處理，以及陪我處理了一成天的模型。（條件有限的拍攝真的太艱難了。）

還有祝鴻星爾克可以成爲長久的企業，保持創新，作出更多更好的運動服裝，讓此刻的全民青睞的狀態保持下去。

附錄

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

1.不要限制圖像數量，RealityCapture能夠處理任意張圖片。

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

3.場景表面中的每一個點應該在至少兩個高質量的圖像中清晰可見。

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

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

6.從拍攝整個對象的照片，移動它而後關注細節，保證大小都差很少。

7.完整的環繞。（不要繞半圈就結束了）

回看筆者往期高贊文章，也許能收穫更多喔！

結語

❤️關注+點贊+收藏+評論+轉發❤️，原創不易，鼓勵筆者創做更好的文章

關注公衆號秋風的筆記，一個專一於前端面試、工程化、開源的前端公衆號