数据可视化大屏 项目开发过程中，会需要各种效果，今天将看到的星空效果整理出来供大家参考。
效果截图
动态效果
演示地址
参数
var settings = {
width: 0, // 使用动态获取的画布宽度
height: 0, // 使用动态获取的画布高度
autoResize: true, // 是否自动调整大小
autoResizeMinWidth: null, // 自动调整大小时的最小宽度
autoResizeMaxWidth: null, // 自动调整大小时的最大宽度
autoResizeMinHeight: null, // 自动调整大小时的最小高度
autoResizeMaxHeight: null, // 自动调整大小时的最大高度
addMouseControls: false, // 是否添加鼠标控制
addTouchControls: false, // 是否添加触摸控制
hideContextMenu: true, // 是否隐藏上下文菜单
starCount: 6666, // 星星的数量
starBgCount: 2222, // 背景星星的数量
starBgColor: {r: 255, g: 255, b: 255}, // 背景星星的颜色
starBgColorRangeMin: 10, // 背景星星颜色范围的最小值
starBgColorRangeMax: 40, // 背景星星颜色范围的最大值
starColor: {r: 255, g: 255, b: 255}, // 星星的颜色
starColorRangeMin: 10, // 星星颜色范围的最小值
starColorRangeMax: 100, // 星星颜色范围的最大值
starfieldBackgroundColor: {r: 0, g: 0, b: 0}, // 星空背景颜色
starDirection: 1, // 星星移动的方向
starSpeed: 20, // 星星的速度
starSpeedMax: 200, // 星星的最大速度
starSpeedAnimationDuration: 2, // 星星速度动画的持续时间
starFov: 300, // 星星的视场
starFovMin: 200, // 星星视场的最小值
starFovAnimationDuration: 2, // 星星视场动画的持续时间
starRotationPermission: true, // 是否允许星星旋转
starRotationDirection: 1, // 星星旋转的方向
starRotationSpeed: 0.0, // 星星旋转的速度
starRotationSpeedMax: 1.0, // 星星旋转的最大速度
starRotationAnimationDuration: 2, // 星星旋转动画的持续时间
starWarpLineLength: 2.0, // 星星弯曲线的长度
starWarpTunnelDiameter: 100, // 星星隧道的直径
starFollowMouseSensitivity: 0.025, // 星星跟随鼠标的灵敏度
starFollowMouseXAxis: true, // 星星是否跟随鼠标的X轴
starFollowMouseYAxis: true // 星星是否跟随鼠标的Y轴
};
源码下载
项目基于vue3+vite+js开发，购买代码请确保有相关开发基础
虚拟产品一经售出 概不退款请谅解
