最近因为鸿星尔克向河南捐赠了5000万物资，真的是看到很多网友哭了好久。一个普通的企业捐出5000万，未必会有这样的同理心。但是看了鸿星尔克的身世后，真的很心酸。鸿星尔克2020年营收28亿，盈利却亏损2亿。连微博公众号都不愿意开通会员。.网友们也直呼红星尔克，特别喜欢老一辈人省吃俭用把存款小心翼翼地放在铁盒子里。一听说祖国需要，立马拿出铁盒哇~我来给大家指点迷津。让最贵的鞋子，拿出一双249。然后去鸿星尔克的官网看他的鞋子。大家好，等了55秒，终于打开了网站。..（好像年久失修了，好难过，作为一个前端，看到这样的场景真的很抓狂。。。）刚好周末去了鸿星尔克，是离我最近的，去看看。买了一双136的鞋（真的很便宜，不过最重要的是舒服）。买回家后心想，像毒APP上的阿迪达斯和耐克，网上都能查到360°，想着能不能给鸿星尔克做一个，作为技术人员的微薄贡献.力量。有了这个想法后，我立即开始行动。然后我大致总结了以下几个步骤：1.建模2.使用Thee.js创建场景3.导入模型4.添加Three.js控制器模型后的显示比较扎实，所以最麻烦的就是建模，因为我们需要将3D对象放入计算机。2维的物体，如果想放到电脑上，我们都知道很简单，用相机拍张照片就可以了，但是3维的物体，如果要在电脑上看就不同了，它多了一个维度，增加的量确实呈指数级增长，于是我开始查阅各种资料，看看如何建立一个物体的模型。查了很多资料，想搭建一个鞋子模型。概括来说，有两种模式。1、摄影测量：通过拍摄照片，通过纯算法将其转化为3D模型，在图形学上也称为单目重建。2.激光雷达扫描：是激光雷达扫描，何老师最新视频中也提到了扫描出点云。放个我总结的大纲，大部分都是国外的网站/工具。在一开始的搜索结果中，大多数人提到了123DCatch，也看了很多视频，说它建模很快，很逼真，但进一步探索后，似乎它的业务是从2017年开始合并的。集成的R??eMake需要付费，出于成本考虑我没有继续。（毕竟只是demo尝试）后来找了个叫Polycam的软件，成品效果很好。但是当我选择使用它时，我发现它需要激光雷达扫描仪（LiDAR），并且必须是iPhone12pro或以上才能使用。最后，我选择了RealityCapture来创建模型。他可以通过多张图片合成一个模型。看了b站的一些视频，感觉它的渲染效果也不错，但是只支持windows，跑内存。需要8g。这时候，我搬出了我7年前的windows电脑……惊奇地发现它还在使用中。正式内容从建模之后开始。主角是我这次买的鞋子（开头那双）然后我们就开拍了。先是围绕着鞋子随意拍了一组照片，结果发现这个款式实在是差强人意。。。后来我也采用了白屏的形式，加了一层背景，后来发现还是不行，应用更容易识别后面的背景数字。终于……在楠溪的帮助下，背景图改成了白色。天不负有心人，最终效果还不错，基本的点云模型就出来了。（这个感觉还不错，感觉像电影里的黑科技）下面是模型的样子，已经是我花了一天训练出来的最好的模型了（但还是有一些轻微的粗糙）为了为了让模型看起来更完美，测试模型一共花了一天时间，因为拍摄角度和模型的生成影响很大，我一共拍了1G左右的图片，大概500张左右（因为我没有前期知道怎么调整模型，所以试了很多方法。）有了模型之后，我们就可以在网上展示了。这里我们使用Three.js（因为很多人和这个领域不相关，所以说的比较基础，请大佬见谅。)构建应用主要由三部分组成（构建场景、加载模型、添加控制器）1.构建3d场景首先我们加载Three.js然后创建WebGL渲染器constcontainer=document.createElement('div');document.body.appendChild(container);letrenderer=newTHREE.WebGLRenderer({antialias:true});container.appendChild(renderer.domElement);然后添加一个场景和相机letscene=newTHREE.Scene();camerasyntaxPerspectiveCamera(fov,aspect,near,far)//设置透视相机camera=newTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.25,1000);//设置相机camera的位置。position.set(0,1.5,-30.0);将场景和相机添加到WebGL渲染器。renderer.render（场景，相机）;2。模型加载由于我们导出的模型是OBJ格式，体积非常大，所以我先后压缩成gltf和glb格式，Three.js已经为我们写好了GLTF的加载器，我们可以直接使用。//加载模型constgltfloader=newGLTFLoader();constdraco=newDRACOLoader();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)//设置角度constOrbit=newTHREE.Object3D();Orbit.add(gltf.scene);Orbit.rotation.set(0,数学.PI/2,0);scene.add(Orbit);render();});但是当我们通过上面的代码打开我们的页面时，会是一片漆黑，因为我们还没有加光。因此，让我们继续添加一束光来照亮我们的鞋子。//设置光源constdirectionalLight=newTHREE.AmbientLight(0xffffff,4);scene.add（定向光）；directionalLight.position.set(2,5,5);现在我们可以清楚地看到我们的鞋子了，好像是黑的我们看到中间有光，但是此时我们不能通过鼠标或者手势来控制它，我们需要使用我们的Three.jscontroller来帮助我们控制我们模型的角度。3.添加控制器constcontrols=newOrbitControls(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层交叉解开“文件下载”的奥秘-领域解决方案（有绝招）结语??关注+点赞+收藏+评论+转发??，原创不易，鼓励作者创作更好的文章关注公众号秋风的笔记，一个专注于前端公众号的前端前端面试、工程和开源
