共计 3968 个字符，预计需要花费 10 分钟才能阅读完成。
最近因为鸿星尔克给河南捐了 5000 万物资，真的是看哭了很多的网友，一般一家公司捐款 5000 万可能不会有这样的共情，然而看了鸿星尔克的背景之后，发现真的是令人心酸。鸿星尔克 2020 年的营收是 28 亿，然而利润却是亏损 2 个亿，甚至连微博的官网账号都舍不得开会员，在这种状况下，还豪气地捐献 5000 万，真的是破防了。
网友还称鸿星尔克，特地像是老一辈人省吃俭用一分一毛攒起来的贷款，小心翼翼存在铁盒里。一据说祖国须要，立马拿出铁盒子，哗~ 全导给你。让上最贵的鞋，拿出了双 249 的。
而后我去鸿星尔克的官网看了看他家的鞋子。
好家伙，等了55 秒，终于把网站关上了。。。（看来真的是年久失修了，太令人心酸了。作为一个前端看到这一幕真的疯了 …）
恰逢周末，我就去了离我最近的鸿星尔克看了看。买了一双 136 的鞋子（是真的便宜，最要害的还是难受）。
买回家后心里想着，像毒 APP 下面那些阿迪、耐克的都有线上 360° 查看，就想着能不能给鸿星尔克也做一个呢，算作为一个技术人员为它出的一份绵薄之力。
口头
有了这个想法后，我就立马开始口头了。而后我大抵总结了以下几个步骤：
1. 建模
2. 应用 Thee.js 创立场景
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();这个时候咱们就能从各个角度看咱们的鞋子啦。
功败垂成！
在线体验地址: https://resume.mdedit.online/…
开源地址（蕴含了工具、运行步骤以及理论 demo）：https://github.com/hua1995116…
后续布局
因为工夫无限（花了一整天周末的工夫），还是没有失去一个十分完满的模型，后续也会持续摸索这块的实现，再后续将摸索是否能实现一条自动化的形式，从拍摄到模型的展现，以及其实咱们有了模型后，离 AR 试鞋也不远了，如果你有趣味或者有更好的想法倡议，欢送和我交换。
最初非常感谢楠溪，放下了本来打算的一些事件来帮忙一起拍摄加前期解决，以及陪我解决了一整天的模型。（条件无限的拍摄真的太艰巨了。）
还有祝鸿星尔克可能成为短暂的企业，放弃翻新，做出更多更好的运动服装，让此刻的全民青眼的状态放弃上来。
附录
得出的几个拍摄技巧，也是官网提供的。
1. 不要限度图像数量，RealityCapture 能够解决任意张图片。
2. 应用高分辨率的图片。
3. 场景外表中的每个点应该在至多两个高质量的图像中清晰可见。
4. 拍照时以圆形形式围绕物体挪动。
5. 挪动的角度不要超过 30 度以上。
6. 从拍摄整个对象的照片，挪动它而后关注细节，保障大小都差不多。
7. 残缺的盘绕。（不要绕半圈就完结了）
回看笔者往期高赞文章，兴许能播种更多喔！
- 2021 前端学习门路书单—自我成长之路
- 从破解某设计网站谈前端水印(具体教程)
- 一文带你层层解锁「文件下载」的神秘
- 10 种跨域解决方案（附终极大招）
结语
❤️关注 + 点赞 + 珍藏 + 评论 + 转发❤️ ，原创不易，激励笔者创作更好的文章
关注公众号 秋风的笔记，一个专一于前端面试、工程化、开源的前端公众号