SegmentFault 最新的文章

让交互更加生动！有意思的鼠标跟随 3D 旋转动效
商品3D展示来啦，HMS Core3D建模服务助力电商发展
招聘季征文活动获奖名单公布，快来领奖~

让交互更加生动！有意思的鼠标跟随 3D 旋转动效

Posted: 25 Apr 2022 08:28 PM PDT

今天，群友问了这样一个问题，如下所示的鼠标跟随交互效果，如何实现：

简单分析一下，这个交互效果主要有两个核心：

借助了 CSS 3D 的能力
元素的旋转需要和鼠标的移动相结合

本文，就将讲述如何使用纯 CSS 实现类似的交互效果，以及，借助 JavaScript 绑定鼠标事件，快速还原上述效果。

纯 CSS 实现元素的 3D 旋转

如果不借助 JavaScript，仅仅只是 CSS，如何实现类似的 3D 旋转效果呢？

这里会运用到一种名为正反旋转相消或者是正负旋转相消的小技巧。嗯，名字起的很奇怪，好像数学概念一样。

在动画中，旋转是非常常用的属性，

{   transform: rotate(90deg); }

如果我们给不同的层级的元素，添加不同方向的旋转，会发生什么呢？

首先假设一下场景，我们有这样的一层 HTML 结构：

<div class="reverseRotate">     <div class="rotate">         <div class="content">正负旋转相消3D动画</div>     </div> </div>

样式如下：

.content 内是我们的主要内容，好了，现在想象一下，如果父元素 .rotate 进行正向 linear 360° 旋转，最外层的父级元素 .reverseRotate 进行反向 linear 360° 旋转，效果会是啥样？

CSS 代码如下：

.rotate {     animation: rotate 5s linear infinite; } .reverseRotate {     animation: reverseRotate 5s linear infinite; } @keyframes rotate {     100% {         transform: rotate(360deg);     } } @keyframes reverseRotate {     100% {         transform: rotate(-360deg);     } }

我们可以得到这样一种动画（注意，下图是 GIF 不是 PNG）：

神奇！因为一正一反的旋转，且缓动函数一样，所以整个 .content 看上去依然是静止的！注意，这里整个 .content 静止的非常重要。

有读者看到这里就要骂人了，作者你个智障，静止了不就没动画了吗？哪来的动画技巧？

别急！虽然看上去是静止的，但是其实祖先两个元素都是在旋转的！这会看上去风平浪静的效果底下其实是暗流涌动。用开发者工具选取最外层祖先元素是这样的：

既然如此，我们继续思考，如果我在其中旋转的一个父元素上，添加一些别的动画会是什么效果？想想就很刺激。

首先，我们先给这几个元素添加 CSS 3D 转换：

div {     transform-style: preserve-3d;     perspective: 100px; }

接着，尝试修改上面的旋转动画，在内层旋转上额外添加一个 rotateX：

@keyframes rotate {     0% {         transform: rotateX(0deg) rotateZ(0deg);     }     50% {         transform: rotateX(40deg) rotateZ(180deg);     }     100% {         transform: rotateX(0deg) rotateZ(360deg);     } }

效果如下：

Wow，这里需要好好理解一下。由于内容 .content 层是静止的但其实外层两个图层都在旋转，通过设置额外的 rotateX(40deg)，相当于叠加多了一个动画，由于正反旋转抵消了，所有整个动画只能看到旋转的 rotateX(40deg) 这个动画，产生了上述的效果。

这样，在没有 JavaScript 介入的情况下，我们就模拟了题图所示的 3D 效果。当然，仅仅是这样，与用户的联动是不够的，如果一定要结合鼠标移动，我们就需要 JavaScript 的一些辅助了。

借助 Javascript 实现鼠标跟随 3D 旋转动效

我们的目标是实现这样一个动画效果：

这里，我们其实有两个核心元素：

鼠标活动区域
旋转物体本身

鼠标在鼠标活动区域内的移动，会影响旋转物体本身的 3D 旋转，而旋转的方向其实可以被分解为 X 轴方向与 Y 轴方向。

我们来看一下，假设我们的 HTML 结构如下：

<body>     <div id="element"></div> </body>

得到这样一个图形：

这里，body 的范围就是整个鼠标可活动区域，也是我们添加鼠标的 mousemove 事件的宿主 target，而 #element 就是需要跟随鼠标一起转动的旋转物体本身。

因为整个效果是需要基于 CSS 3D 的，我们首先加上简单的 CSS 3D 效果：

body {     width: 100vw;     height: 100vh;     transform-style: preserve-3d;     perspective: 500px; }  div {     width: 200px;     height: 200px;     background: #000;     transform-style: preserve-3d; }

效果如下：

没有什么不一样。这是因为还没有添加任何的 3D 变换，我们给元素添加 X、Y 两个方向的 rotate() 试一下（注意，这里默认的旋转圆心即是元素中心）：

div {      transform: rotateX(15deg) rotateY(30deg); }

效果如下，是有那么点意思了：

好，接下来，我们的目标就是通过结合 mouseover 事件，让元素动起来。

控制 X 方向的移动

当然，为了更加容易理解，我们把动画拆分为 X、Y 两个方向上的移动。首先看 X 方向上的移动：

这里，我们需要以元素的中心为界：

当鼠标在中心右侧连续移动，元素绕 Y 轴移动，并且值从 0 开始，越来越大，范围为(0, +∞)deg
反之，当鼠标在中心左侧连续移动，元素绕 Y 轴移动，并且值从 0 开始，越来越小，范围为(-∞, 0)deg

这样，我们可以得到这样一个公式：

rotateY = (鼠标 x 坐标 - 元素左上角 x 坐标 - 元素宽度的一半)deg

通过绑定 onmousemove 事件，我们尝试一下：

const mouseOverContainer = document.getElementsByTagName("body")[0]; const element = document.getElementById("element");  mouseOverContainer.onmousemove = function(e) {   let box = element.getBoundingClientRect();   let calcY = e.clientX - box.x - (box.width / 2);        element.style.transform  = "rotateY(" + calcY + "deg) "; }

效果如下：

好吧，旋转的太夸张了，因此，我们需要加一个倍数进行控制：

const multiple = 20; const mouseOverContainer = document.getElementsByTagName("body")[0]; const element = document.getElementById("element");  mouseOverContainer.onmousemove = function(e) {   let box = element.getBoundingClientRect();   let calcY = (e.clientX - box.x - (box.width / 2)) / multiple;        element.style.transform  = "rotateY(" + calcY + "deg) "; }

通过一个倍数约束后，效果好了不少：

控制 Y 方向的移动

同理，我们利用上述的方式，同样可以控制 Y 方向上的移动：

const multiple = 20; const mouseOverContainer = document.getElementsByTagName("body")[0]; const element = document.getElementById("element");  mouseOverContainer.onmousemove = function(e) {   let box = element.getBoundingClientRect();   let calcX = (e.clientY - box.y - (box.height / 2)) / multiple;        element.style.transform  = "rotateX(" + calcX + "deg) "; };

效果如下：

当然，在这里，我们会发现方向是元素运动的方向是反的，所以需要做一下取反处理，修改下 calcX 的值，乘以一个 -1 即可：

let calcX = (e.clientY - box.y - (box.height / 2)) / multiple * -1;

结合 X、Y 方向的移动

OK，到这里，我们只需要把上述的结果合并一下即可，同时，上面我们使用的是 onmousemove 触发每一次动画移动。现代 Web 动画中，我们更倾向于使用 requestAnimationFrame 去优化我们的动画，确保每一帧渲染一次动画即可。

完整的改造后的代码如下：

const multiple = 20; const mouseOverContainer = document.getElementsByTagName("body")[0]; const element = document.getElementById("element");  function transformElement(x, y) {   let box = element.getBoundingClientRect();   let calcX = -(y - box.y - (box.height / 2)) / multiple;   let calcY = (x - box.x - (box.width / 2)) / multiple;      element.style.transform  = "rotateX("+ calcX +"deg) "                         + "rotateY("+ calcY +"deg)"; }  mouseOverContainer.addEventListener('mousemove', (e) => {   window.requestAnimationFrame(function(){     transformElement(e.clientX, e.clientY);   }); });

至此，我们就能简单的实现题图所示的鼠标跟随 3D 旋转动效：

设置平滑出入

现在，还有最后一个问题，就是当我们的鼠标离开活动区域时，元素的 transform 将停留在最后一帧，正确的表现应该是复原到原状。因此，我们还需要添加一些事件监听做到元素的平滑复位。

通过一个 mouseleave 事件配合元素的 transition 即可。

div {     // 与上述保持一致...     transition: all .2s; }

mouseOverContainer.addEventListener('mouseleave', (e) => {   window.requestAnimationFrame(function(){     element.style.transform = "rotateX(0) rotateY(0)";   }); });

至此，我们就可以完美的实现平滑出入，整体效果最终如下：

完整的代码，你可以戳这里：CodePen Demo -- CSS 3D Rotate With Mouse Move

最后

怎样，其实也不是很难吧？好了，本文到此结束，希望本文对你有所帮助 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 -- iCSS前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

商品3D展示来啦，HMS Core3D建模服务助力电商发展

Posted: 23 Apr 2022 06:30 PM PDT

传统电商商品展示采用图文结合的形式，文案介绍产品的相关参数，搭配精美图片去吸引客户眼球。但图文商品展示由于色差、尺寸不符等原因，会让消费者产生图片和实物不一致的疑虑，且消费者需要消耗大量精力阅读和比较后才能做出购买决定。

随着互联网电商平台的不断完善，短视频逐渐成为商品展示的主流形式。通过拍短视频的形式可以多方位展示产品，让消费者在短时间内可以了解产品的参数和优势，极大提高了消费者的购物速度。但短视频展示的劣势在于，展示时间短且很难和消费者进行互动。

3D技术的发展赋予了电商行业最新的商品展示方式，3D模型可以360°全方位细节展示商品，让消费者更直观了解商品，增强他们对产品的信心。消费者还能隔着屏幕与商品产生互动，通过单指拖动来实现360度查看商品、自由放大查看高清细节，从而提高下单机率。

然而，目前效果佳的3D建模技术因其较高的成本而使得让广大开发者望而却步。

1.技术门槛高：专业人员加上深度相机等专业设备。

2.时间成本高：专业人员手动完成模型的制作渲染和调整。完成一个简单物体的低精度模型，工作量以小时起步，而高精度模型耗时更长。

3.耗费高：单个商品的专业建模成本高，平均价格达到上千元，复杂模型则更贵。

HMS Core的3D建模服务，助力轻松建模。用户只需使用普通的RGB相机，通过拍摄物体的不同角度图像，便可实现物体的3D几何模型和纹理的自动化生成，如在电商实物展示的场景，您可以通过此能力自动生成想展示商品模型，用于3D展示，用户可360°随心放大或缩小商品，查看商品细节，为用户提供差异化的购买体验。

3D物体建模能力由端云协同完成，端侧负责采集RGB图像，通过环绕物体拍摄多张图像，从而获取物体的不同角度图像，拍摄完毕后上传至云端实现3D物体建模。云端建模的流程及关键技术包括目标检测分割、特征检测与匹配、稀疏点云计算、稠密点云计算以及纹理重建等模块。

效果展示

以面包为例，只需环绕面包拍摄多张图像，即可得到一个逼真的面包3D模型。那这个功能是如何实现的呢？以下是详细的开发步骤。

开发前准备

配置集成的SDK包

在应用的build.gradle文件中，dependencies内添加3D建模服务的SDK依赖

// 3D Modeling Kit SDK implementation 'com.huawei.hms:modeling3d-object-reconstruct:1.0.0.300'

配置AndroidManifest.xml

打开main文件夹中的AndroidManifest.xml文件，可以根据场景和使用需要，配置读取和写入手机存储以及相机权限，在<application>前添加

<!-- 往sdcard中写入数据的权限 --> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <!-- 使用相机的权限 --> <uses-permission android:name="android.permission.CAMERA" />

开发步骤

使用云侧服务的能力，需要使用"agconnect-services.json"里的api_key值，在应用初始化时通过api_key或者AccessToken来设置应用鉴权信息，AccessToken的优先级较高。两种方式均在应用启动时初始化设置一次即可，无需多次设置。

（1）通过setAccessToken方法设置AccessToken。

ReconstructApplication.getInstance().setAccessToken("your AccessToken");

（2）通过setApiKey方法设置api_key。当您在AppGallery Connect上注册应用时，会给您的应用分配api_key。

 ReconstructApplication.getInstance().setApiKey("your api_key");

新建3D物体建模引擎并初始化，新建3D物体建模配置器。

// 新建3D物体建模引擎。 Modeling3dReconstructEngine modeling3dReconstructEngine = Modeling3dReconstructEngine.getInstance(context); // 新建3D物体建模配置器。 Modeling3dReconstructSetting setting = new Modeling3dReconstructSetting.Factory()     // 设置工作模式为图片模式。     .setReconstructMode(Modeling3dReconstructConstants.ReconstructMode.PICTURE)     // 设置贴图模式为普通模式或PBR模式。     .setTextureMode(Modeling3dReconstructConstants.TextureMode.PBR)     .create();

新建上传监听器回调，用于处理拍摄的物体图片上传结果。

private Modeling3dReconstructUploadListener uploadListener = new Modeling3dReconstructUploadListener() {     @Override     public void onUploadProgress(String taskId, double progress, Object ext) {          // 上传进度。     }     @Override     public void onResult(String taskId, Modeling3dReconstructUploadResult result, Object ext) {          // 上传成功处理。     }     @Override     public void onError(String taskId, int errorCode, String message) {         // 上传失败处理。     } };

使用3D物体建模配置器初始化任务，并且给新建的3D物体建模引擎设置上传监听器，上传采集的图片数据。

// 使用3D物体建模配置器初始化任务（该接口需要在子线程中调用）。 Modeling3dReconstructInitResult modeling3dReconstructInitResult = modeling3dReconstructEngine.initTask(setting); String taskId = modeling3dReconstructInitResult.getTaskId(); // 设置上传监听器。 modeling3dReconstructEngine.setReconstructUploadListener(uploadListener); // 调用3D建模引擎的上传接口，上传采集的图片数据。 modeling3dReconstructEngine.uploadFile(taskId, filePath);

查询3D物体建模任务状态。

// 查询3D物体建模任务状态需要初始化任务处理类。 Modeling3dReconstructTaskUtils modeling3dReconstructTaskUtils = Modeling3dReconstructTaskUtils.getInstance(context); // 调用查询接口获取3D物体建模任务状态（该接口需要在子线程中调用）。 Modeling3dReconstructQueryResult queryResult = modeling3dReconstructTaskUtils.queryTask(taskId); // 获取建模任务状态。 int status = queryResult.getStatus();

新建侦听器回调，调用预览函数，预览3D模型

Modeling3dReconstructPreviewListener previewListener = new Modeling3dReconstructPreviewListener() {     @Override     public void onResult(String taskId, Object ext) {         // 3D物体建模预览结果。     }     @Override     public void onError(String taskId, int errorCode, String message) {         // 预览错误回调函数。     } }; // 预览模型配置。 Modeling3dReconstructPreviewConfig config = new Modeling3dReconstructPreviewConfig.Factory().setTextureMode(Modeling3dReconstructConstants.TextureMode.PBR).create(); // 预览模型。 modeling3dReconstructEngine.previewModelWithConfig(taskId, context,config, previewListener);

新建下载监听器回调，用于处理3D物体建模模型文件的下载结果。

private Modeling3dReconstructDownloadListener modeling3dReconstructDownloadListener = new Modeling3dReconstructDownloadListener() {     @Override     public void onDownloadProgress(String taskId, double progress, Object ext) {         // 下载进度。     }         @Override     public void onResult(String taskId, Modeling3dReconstructDownloadResult result, Object ext) {         // 下载成功处理。     }     @Override     public void onError(String taskId, int errorCode, String message) {         // 下载失败处理。     } };

新建的下载配置项并将新建的下载监听器传入新建的3D物体建模引擎，下载重建成功的模型文件。

// 设置下载配置项。 Modeling3dReconstructDownloadConfig downloadConfig = new Modeling3dReconstructDownloadConfig.Factory()     // 配置OBJ或glTF格式。     .setModelFormat(Modeling3dReconstructConstants.ModelFormat.OBJ)     // 配置普通或PBR模式。     .setTextureMode(Modeling3dReconstructConstants.TextureMode.PBR)     .create(); // 设置下载监听器。 modeling3dReconstructEngine.setReconstructDownloadListener(modeling3dReconstructDownloadListener); // 调用3D物体建模引擎的下载接口，传入任务id，下载地址和下载配置项，下载模型文件。 modeling3dReconstructEngine.downloadModelWithConfig(taskId, savePath, downloadConfig);

完成以上步骤就可以在电商应用中实现3D建模能力，用手机就能快速给商品建立3D模型，感兴趣的开发者们可以马上动手体验！

除了商品3D建模和展示，HMS Core电商解决方案还提供了AR交互式购物能力，可实现商品试穿功能，为消费者创造虚拟与现实融合的购物体验，相关内容会在下一期进行详细讲解，敬请期待。

了解更多详情>>

访问华为开发者联盟官网
获取开发指导文档
华为移动服务开源仓库地址：GitHub、Gitee

关注我们，第一时间了解 HMS Core 最新技术资讯~

招聘季征文活动获奖名单公布，快来领奖~

Posted: 25 Apr 2022 02:31 AM PDT

哈喽各位社区的小伙伴！2022招聘季有奖征文活动如约开奖啦~

废话不多说，我们直接来揭晓获奖名单吧~

🌟`获奖名单`

江辰：5年经验(专升本)入职B站分享
范文杰：Offer 提速：如何写出有亮点的简历
杨成功：一个小厂前端 Leader 如何筛选候选人？
程序员海军：2022 招聘季｜面试了一个月，我经历了什么
小傅哥：【躲过裁员，成功上岸】发现小公司有不好的苗头，赶紧学习！
linong：2022招聘季 | 怎么准备面试？面试官一般会问些什么问题？ | web 前端
山头人汉波：从 Redux 说起，到手写，再到状态管理
Meathill：2022招聘季｜从招聘方的角度理解求职
wscats：2022招聘季｜如何写一份好的前端面试简历?
三掌柜：面试周连续剧之轻车熟路
七淅在学Java：简历准备和面试技巧，你所应该知道的一切
chokcoco：一道有意思的 CSS 面试题，FizzBuzz ~
_usw：伪经验；不称职面试官的面试经
不会写代码的小白：一个格子衫女孩的成长史——面试篇
leexiaoran：【面试系列一】如何回答如何理解重排和重绘
xiangzhihong：Android Handler面试总结
why技术：当面试官问你这个问题的时候，他想听到什么？
沈唁：不管是青蛙跳台阶还是who爬楼梯，能上去就行
执笔看墨花开：在ONES的工作体验分享
小奇Java面试：面试官：Redis集群有哪些方式，Leader选举又是什么原理呢？
白羊沈歌：校招与内推：软实力的技巧
大菠萝：面试了字节跳动和阿里，他们都问了这个K8S问题
ljiran：高频面试题-说清楚Spring如何解决循环依赖？
宇宙之一粟：2022招聘季｜如何才能让校招项目准备的高大上一点
wangyq_sure：浅析Kafka面试题
yangyangyang：【金三银四】Js 面试常见问题总结
园陌：最新大厂数据湖面试题，知识点总结
java金融：阿里三面：Java的synchronized 能防止指令重排序吗？
夏夏是只猫：美团Android 岗3次挂了，这次终于成功拿下！
McQueen：我的面试体会
苏易困：Redis数据结构详解（4）-为了节约内存的数据结构（压缩列表ziplist）
lsqingfeng：不会微服务，不懂分布式该如何去面试(20天面试经验分享，非大厂)
程序员田同学：如何在一票面试者中，脱颖而出
JerryWang_汪子熙：程序员笔试和面试过程中，有哪些是面试官眼中的减分项和加分项？
暗星涌动：【面试技巧】无领导小组面试怎么面
小月：如何写一份好简历

特别说明：参选文章依据内容干货程度、阅读、点赞、评论、收藏等综合数据由高到低排序；
若同时有多篇文章被收录，则选取综合数据最高的一篇参与最终评奖。

💝`奖品概览`

综合数据前15名（依据上面的排序）：获得技术书籍一本（随机）；
其余获奖文章：思否猫手办/思否文化衫（随机）。

感谢企业级研发管理工具 ONES，由 Apache Pulsar 与 Apache BookKeeper 创始团队成员组建，致力于打造云原生批流融合数据平台的 SteamNative 对本次活动的大力支持。

🎁`如何领取奖品`

请各位获奖的小伙伴在2022年5月5日之前，将收货信息填写至以下表格：https://jinshuju.net/f/yxNEu1
逾期则视为自动放弃哦~~

PS：疫情地区若无法接收快递，发货时间会适当延后~

如有问题可以添加小姐姐微信~

e-techbytes

Tuesday, April 26, 2022