vue3 数据可视化大屏边框-机房动力环境监控大屏
边框由标题 主体 背景图片 下展背景动画等组成。
效果截图
动画效果
动画处理
默认隐藏边框,然后使用gsap来加载一个自上而下展开的动画效果,动画效果完成后,再将边框主体渐显出来。可以父组件可以通过 :duration=&...
yekong
1年前 (2023-09-17)
喜欢
前端项目开发中,需要用到很多字体,经常会遇到重复的字体,想着每次重新找设计要或者自己百度也麻烦,不然记录下来,方便后续遇到一样的可以直接下载使用。
字体名称
阿里巴巴普惠体 AlibabaPuHuiTi
字体介绍
阿里巴巴普惠体是一套全球永久免费正版商用的字体家族。阿里巴巴普惠体...
yekong
1年前 (2023-09-17)
喜欢
我们在下载字体文件后会发现字体有很多种,格式也各不相同eot woff2 woff otf ttf都有,导致我们不知道如何引入了!
这里我们可以使用CSS的@font-face规则来引入多种字体文件格式。这样做的好处是,不同的浏览器可以选择支持的最佳文件格式来加载字体。以下是如何...
yekong
1年前 (2023-09-17)
喜欢
cesium给视角一个飞过去的动画效果,我们可以通过flyTo这个方法来实现飞行动画效果。
cesium让相机飞到某个位置
viewer.camera.flyTo({
// 指定相机的位置
destination: cartesian3,
orienta...
yekong
1年前 (2023-09-16)
喜欢
threejs 旋转的3d地球纹理效果,海面为蓝色,陆地为绿色的纹理图。
动态效果
实例代码
// 加载地球的纹理
var img1 = new THREE.TextureLoader().load(imgs);
// 初始化用于记录动画帧ID的变量
var anima...
yekong
1年前 (2023-09-16)
喜欢
threejs 地图项目中,需要插入弹窗div,因为地图需要下钻所以会多次初始化,但是每次初始化后div中都会重复插入div,为了避免重复插入,需要在插入前判断是否存在,如果存在则移除再重现插入。
为了确保每次初始化时都只有一个tooltip元素,你可以首先检查document....
yekong
1年前 (2023-09-16)
喜欢
three项目开发中会集成gui插件用来做一些交互,因为项目需要多次初始化,导致gui也重复初始化出现了多个gui插件,这时候我们需要销毁旧的避免出现多个gui界面。
旧代码
import {GUI} from 'three/examples/jsm/libs/lil-gui.m...
yekong
1年前 (2023-09-16)
喜欢
我们可以通过cesium相机的orientation和destination来控制相机的位置以及相机的朝向俯仰角以及相机的滚转角。
指定cesium地图显示的位置
// 生成position北京天安门位置
var cartesian3 = Cesium.Cartesian3...
yekong
1年前 (2023-09-15)
喜欢
移动物体(快捷键g)
选中左侧工具栏移动按钮后,
当鼠标点击物品后会出现坐标轴,这时候我们就可以按住鼠标进行物体的拖动了。
旋转物体(快捷键r)
当我们选中旋转按钮后,
这时候我们选中物体时,效果如下,这时候我们可以沿着对应颜色的线条进行物体的旋转。
我们可以沿着红(x轴)...
yekong
1年前 (2023-09-15)
喜欢
工具栏
长按工具栏图标可以对按钮进行选择,通过框选进行多物品选择,可以套索选择,进行绕选。
套索选择
全选
我们通过快捷键a进行全选
反转
我们可以通过ctrl+i进行反转选择。
刷选
我们可以通过快捷键c来调整刷选按钮的大小,按esc退出大小调整。
学习笔记
当前内容为 ...
yekong
1年前 (2023-09-15)
喜欢