使用Three.js如何通过代码动态改变模型的视角

1 月 17 日
阅读 7 分钟
69
场景作为刚刚接触 Three.js 的小白,在工作中遇到下面的需求:加载一个 3D 模型通过代码切换预设的任意模型的视角最终效果(在线示例):👆基于官方示例增加的控制代码我们通过官方示例可以知道,只要使用 OrbitControls 就可以通过鼠标调整模型的视角。可是,能不能通过代码,切换特定的视角呢?有没有官方的 API 可以实...
封面图

基于 CSS Grid 的简易拖拉拽 Vue3 组件,从代码到NPM发布(3)- 小结

1 月 16 日
阅读 2 分钟
176
基本完成了拖动、调整大小、拖入、拖出、嵌套、删除等特性,可以基于组件嵌套,也可以基于数据结构嵌套。算是告一段落了,后面在使用过程发现问题解决问题好了。
封面图

基于 CSS Grid 的简易拖拉拽 Vue3 组件,从代码到NPM发布(2)- NPM发布、在线示例

1 月 16 日
阅读 6 分钟
168
这里分享一下本开源项目是如何构建组件库及其如何发布到NPM上的,还有组件库与在线示例的构建有什么差异。请大家动动小手,给我一个免费的 Star 吧~大家如果发现了 Bug,欢迎来提 Issue 哟~ github源码NPM示例地址文档版本更新信息拖动调整大小拖入嵌套有限的嵌套关于构建与构建有关的文件,主要有: {代码...} 关键构建...
封面图

基于 CSS Grid 的简易拖拉拽 Vue3 组件,从代码到NPM发布(1)- 拖拉拽交互

1 月 16 日
阅读 12 分钟
151
基于特定的应用场景,需要在页面中以网格的方式,实现目标组件在网格中可以进行拖拉拽、修改大小等交互。本章开始分享如何一步步从代码设计,最后到如何在 NPM 上发布。
封面图

手把手实现一个图片可缩放可拖拽的 Vue3 组件

1 月 16 日
阅读 14 分钟
143
在工作中经常遇到需要预览一张尺寸可能非常大的图片,初始化显示的时候,希望它自适应显示区域后,还可以缩放并可以在显示区域中拖拽。在这里,手把手展示一下如何实现一个简单的组件,以实现上述的需求。效果展示先看看效果可以直达👇示例仓库 | 示例文档 | 在线示例别忘了,可以带话,给我一个 Star 哟!实现 Hook在实...
封面图

手把手使用 SVG + CSS 实现渐变进度环效果

1 月 16 日
阅读 9 分钟
162
效果在线Demo轨道使用 svg 画个轨道 {代码...} 简单的说,就是使用 circle 画个圆。需要注意的是,轨道实际是 circle 的 stroke,所以目标 svg 尺寸是 100,则圆的半径是 40,而 stroke 为 10。接着,按设计,轨道只需要 3/4 个圆即可: {代码...} 为了实现这轨道,这个时候需要用到 stroke-dasharray。为了更好理解这里...
封面图

CSS mask-image 实现边缘淡出过渡效果

1 月 16 日
阅读 5 分钟
161
使用场景在生产环境中,遇到一个需求,需要在一个深色风格的大屏页面中,嵌入 Google Maps。为了减少违和感,希望地图四边能够淡出过渡。这里的“淡出过渡”,关键是淡出,而非降低透明度。基于 Google Maps 的深色示例中,附加上述需求,效果如下:简单的说,就是中间放地图,四周放标题和其它展板内容。CSS mask-image +...
封面图

axios-api,js结构化定义、调用业务api接口。

2022-01-16
阅读 5 分钟
1.2k
axios-api@no-996/axios-api基于 axios 可建立结构化实例的工具,有以下特点:基于 axios,兼容 axios 的 api,可无缝的迁移使用。内置了两种常用的请求终止(基于cancelToken)场景,可防止接口重复调用。内置了接口调用的缓存机制,在设置的有效期内,可从缓存中获得历史请求结果。内置了接口地址模板插入功能,满足基...
封面图