归尘の小酒馆

介绍这段时间项目很繁忙，遇到一个需求，需要在 uniapp 的微信小程序中使用图表。经过调研，uniapp 官方推荐跟他自己生态绑定的 UCharts，但是我在使用过程中真心难受，因为我们图表的需求个人认为较复杂，所以在开发途中踩了很多坑，下面我列举下我这段时间踩到的坑： UCharts 图表开启 X 轴滚动后，如果元素在 scrollview 中，会造成触摸不灵，在 ios 中的体验式触摸回弹（这个也是让我奔溃的原因，因为现场反馈用户体验感很差） UCharts 的 Mix 混合图只能支持柱状和折线两类图，当我需要实现堆叠柱状图 + 折线图时就无法使用 UCharts 实现 自由度不够，因为图表需求需要大量定制化，所以这里推荐仅仅只是简单展示的话，可以使用 UCharts ，如果需要定制化，建议使用 ECharts 社区原因， UCharts 有很多 bug 都没有在社区收录，但是他提供了很多个交流群，可惜都没什么人说话 上面的问题经过组内商量，决定使用 Echarts ，下面展开说说如何在 uniapp 的小程序中使用 ECharts 方案查找确认要使用 ECharts 后我们 ...

介绍该网页是我模仿一位国外大佬的网页实现，网页功能大概模仿实现了 7 成，如果想看原网页效果可以前往传送门 下面简单聊聊在该 demo 中我做了什么以及各位能学到什么： 二维方面实现了网页滚动翻页和元素展示动画 三维方面实现了天空图、相机模型位置根据滚动位置变化 大模型预览 使用精灵实现标点 精灵标点被模型遮挡隐藏 鼠标移到标点处弹出提示框 点击标点进入下一场景 演示地址(在 github 上有点卡，请见谅) 实现二维实现滚动翻页和元素展示动画1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271 ...

介绍该项目是我个人练习 threejs 所实现的 3D 地球 demo，该 demo 中所用到的模型包括贴图都会放到文末的百度云链接中，若有错误请指正，感谢大佬。在该 demo 中各位能学到什么： 使用粒子效果模拟宇宙星空 贴图、模型等资源的加载 加载资源的监听 效果合成器EffectComposer的初级使用 在地球上设置坐标以及坐标涟漪动画 标点间建立飞线 以及一些简单动画 演示地址(在 github 上有点卡，请见谅) 实现场景创建略，场景创建相关在下雨场景的文章中已详细讲解，不了解的朋友请跳转 接下来我们继续开始正文！ 粒子星空123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354const createStar = (): void => { let geometry: THREE.BufferGeometry = new THREE.BufferGeometry(); // 顶点集合 let verti ...

介绍该实例是threejs制作的下雨场景，使用Points创建一个粒子集合，PointsMaterial加贴图方式美化粒子，项目是一个练习demo，若有错误请指正，感谢大佬。 演示地址(在github上有点卡，请见谅) 实现场景创建1let scene: THREE.Scene = new THREE.Scene(); 相机透视相机：PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number ) fov — 摄像机视锥体垂直视野角度 aspect — 摄像机视锥体长宽比 near — 摄像机视锥体近端面 far — 摄像机视锥体远端面 若想了解正交相机与透视相机的区别请移步到官网demo 1234567const initCamera = (width: number, height: number): void => { camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 40); // 设置相 ...

最近需要部署一套分内外网的项目。各位大佬都知道，在内网环境中，我们是不能随便访问外网的，所以这个项目用到的高德地图web服务就歇菜了😖 由于项目时间紧凑，所以我们通过简单的方法实现内网服务访问外网的GIS服务 分析项目中使用高德地图一般有两种方式，直接script脚本加载或者使用@amap/amap-jsapi-loader，两种方式都是通过访问 https://webapi.amap.com/maps，来获取js api文件，所以我们将会通过这个文件追踪之后访问链接 通过浏览器F12 Network和Sources分析能得到它主要调用以下链接： webapi.amap.com && http://webapi.amap.com && https://webapi.amap.com restapi.amap.com a.amap.com vdata.amap.com vdata01.amap.com && vdata02.amap.com && vdata03.amap.com && vdat ...

各位大家好😊，最近一直在学习 threejs ，在学习过程中不断进步，在将来我会不断完善我的 threejs 案例库，希望能在学习路上帮到大家🌹 接下来为各位介绍的是一个全景看房的demo，我们先上地址： 源码地址：https://github.com/ljnMeow/360-house-viewing.git 预览地址：https://ljnmeow.github.io/360-house-viewing/dist 全景图切割工具：https://matheowis.github.io/HDRI-to-CubeMap/ 前言threejs 是 javascript 编写的一个 WebGL 第三方库。在 threejs 中，我们通过 Scene(场景) 、 Camera(相机) 和 Renderer(渲染器) 来实现一个3d的场景，然后往里面添加各种光源、物体等等，形成一个3d世界。 threejs支持程度因为 threejs 是基于 webgl 写的，所以我们主要看设备是否支持 webgl 。据我所知目前主流最新版本的设备、浏览器都支持 webgl，但如果客服要在一些早期的设 ...

在我们学习TypeScript的过程中发现，TypeScript定义了一些名字相似但是概念不同的类型，下面我们来一起讨论下object、Object 和 {} 之间的区别。 objectobject 类型他表示非原始对象，number，string，boolean，symbol，null或undefined在JavaScript中为原始类型 使用object类型，就可以更好的表示像Object.create这样的API，在TypeScript2.2的发布，标准库的类型声明已经更新，以使用新的对象类型。例如，Object.create() 和Object.setPrototypeOf() 方法，现在需要为它们的原型参数指定 object | null 类型： 12345678declare function create(o: object | null): void;create({ prop: 0 }); // OKcreate(null); // OKcreate(42); // Errorcreate("string"); // Error ...

TypeScript和JavaScript是目前项目开发中比较流行的两种脚本语言，但JavaScript能否创建大型复杂的web应用，这恐怕没那么容易 于是我们选中另外一个解决方案——TypeScript 在过去的几年中，TypeScript受欢迎程度和使用率一直增长。目前最大的前端框架之一Angular就是使用TypeScript。并且2020年之后，React、Vue3.0也逐步像TypeScript靠拢。根据数据显示，大约60%的前端程序员正在使用或者使用过TypeScript，约22%希望使用并且保留学习意向 什么是TypeScript？TypeScript简称TS，JavaScript的超集，就是在JavaScript的基础上做一层封装，封装出TS的特性，最终可以编译为JavaScript TS最初是为了让习惯编写强类型语言的后端程序员能快速编写web应用，因为 JavaScript 没有强数据类型，所以 TypeScript 提供了静态数据类型，这是 TypeScript 的核心 随着项目不断壮大，越来越多的情断意识到静态数据类型的重要性。随着 TypeScript 越来 ...

各位大佬们大家好😊，很久没更新文章了。因为前端时间挺忙的，各种项目、准备软考等等给耽搁了🙏。最近这段时间有点迷上threeJs，经过搜寻发现网络上关于threeJs的资源还是相对较少的，而且比较旧。 今天我使用threeJs来实现一个全景视频，带领大家观看梅赛德斯的科技展览🎆，效果大概如下： 在开始之前，您必须先了解threeJs的知识，这里为了节省篇幅，就不做过多的说明，有关threeJs入门的只是各位可以查看以下链接： threeJs官方英文文档 https://threejs.org/ 郭隆邦技术博客 http://www.yanhuangxueyuan.com/ threeJs github地址 https://github.com/mrdoob/three.js/ 下面我们开始进入正题 资源准备我们进入threeJs github地址下载 three.min.js 和 OrbitControls.js，这两个我们等下会用到，其次需要准备一个 360全景视频 ，还有一些小图标之类的。视频下载地址我已经忘了，不过不用担心，上面提到的所有资源我都会放在源码 ...

最近在大屏可视化项目中有个展示地图的功能，要求： 好看排第一 支持钻入钻出 能单独展示省份、地市，因为客户数据有的是省级，有的是市级 得到这个需求后第一个想到的就是Echarts，所以打开Echarts官方案例查看，找到一个类似的地图 demo 查看完整代码看到他是请求一个路径获取数据，反问了下路径看到他是一串带坐标的json数据https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/geo/HK.json 到这一步我涉及到知识盲区了，于是百度了下geoJson，发现阿里云dataV提供一个网站能获取geoJson数据https://datav.aliyun.com/tools/atlas/index.html#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5 按照demo教程，尝试实现： 1. 先布局一下并引入所需文件1234567891011121314151617181920212223 ...