当前位置: 首页 > news >正文

Cesium天空盒子(Skybox)制作(js代码)和显示

介绍

在Cesium中,星空背景是通过天空盒子方式(6张图片)来显示的,原生的图片分辨率太低,本项目用于生成天空盒子的6张图片。最终生成的6个图片大小约为500kb(每个),格式为jpg,总共的恒星数目约为1万颗左右,在最终的地球星空背景中,仅出现恒星点,不会出现模糊的效果!

有关Cesium天空盒子的原理和介绍请参见我之前写的一篇文章:Cesium与STK中的天空盒子(skybox)。

原理

星空背景本质上就是将所有的恒星投影到天空盒子对应的6个方位的图片上。

本项目利用Canvas的2D作图功能,创建一个纯黑色的背景。然后根据每个恒星的位置转换为对应图片下的像素坐标,然后再利用恒星
对应的星等画一个白色的点,点的像素大小和透明度由星等决定(恒星越亮,则点的像素越大,越不透明)。

目前基本设置为(详见:createSkyboxImage.js)

  • 最亮: -1等,对应为5个像素,透明度为1.0(不透明)
  • 中等: 7等,对应为1个像素,透明度为0.75

本项目中,最暗为7等星,因为超过8等星人眼就看不到了!

项目目录

  • CesiumUnminified文件夹为Cesium安装包里面的内容(Build目录下),本项目用于引用Cesium.js文件
  • Skybox文件夹里存放了其它方式生成的天空盒子,可供测试使用
  • CatalogSkybox.js,为本人编写的天球坐标系ICRF到立方体盒子的投影转换相关函数
  • createSkyboxImage.js,用于生成立方体盒子的一副图片
  • hipparcos_7_concise.js,包含了依巴谷星表(hipparcos)中7等星以上的所有数据(经过处理的),数据来源: https://github.com/gmiller123456/hip2000
使用说明
  1. VS Code里使用Live Server打开index.html,即可加载Cesium默认的启动界面,同时加载了内置生成的天空盒子
  2. 网页启动后,会自动将创建的6张天空盒子照片存放在浏览器的下载目录下
  3. 实际使用时,可以将本项目的代码集成到项目中,页面启动时动态创建6个图片(如index.html中那样);也可以使用生成好的图片,以静态图片引用的方式加载。
    加载后效果如下:

Cesium skybox

其它

  1. 用户可自行修改createSkyboxImage.js函数,使用不同的星等创建不同像素大小的星星!

项目地址: https://gitee.com/blitheli/test-skybox

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • C语言中的函数sscanf()用法
  • Golang基于DTM的分布式事务TCC实战
  • Golang | Leetcode Golang题解之第343题整数拆分
  • 16.2 TensorFlow 与 Keras 基础
  • 图表:调用FluentUI中的折线图散点图和饼状图
  • 八股之数据库
  • 无缝融入,即刻智能[二]:Dify-LLM平台(聊天智能助手、AI工作流)快速使用指南,42K+星标见证专属智能方案
  • 第二章 pytorch回归问题
  • Java、python、php版的企业单位考勤打卡管理系统的设计与实现(源码、调试、LW、开题、PPT)
  • 深度学习·Pytorch
  • Java TCP练习1
  • 部署 K8s 图形化管理工具 Dashboard
  • 【与C++的邂逅】--- 类和对象(上)
  • 【数据结构-1】二叉树
  • haproxy负载均衡(twenty-eight day)
  • 【Under-the-hood-ReactJS-Part0】React源码解读
  • 【剑指offer】让抽象问题具体化
  • Django 博客开发教程 8 - 博客文章详情页
  • django开发-定时任务的使用
  • es6--symbol
  • ES6核心特性
  • js 实现textarea输入字数提示
  • MySQL主从复制读写分离及奇怪的问题
  • react 代码优化(一) ——事件处理
  • sessionStorage和localStorage
  • vue学习系列(二)vue-cli
  • 彻底搞懂浏览器Event-loop
  • 高性能JavaScript阅读简记(三)
  • 基于Android乐音识别(2)
  • 码农张的Bug人生 - 初来乍到
  • 一个完整Java Web项目背后的密码
  • 宾利慕尚创始人典藏版国内首秀,2025年前实现全系车型电动化 | 2019上海车展 ...
  • ​RecSys 2022 | 面向人岗匹配的双向选择偏好建模
  • ###项目技术发展史
  • ( )的作用是将计算机中的信息传送给用户,计算机应用基础 吉大15春学期《计算机应用基础》在线作业二及答案...
  • (附源码)spring boot火车票售卖系统 毕业设计 211004
  • (附源码)springboot助农电商系统 毕业设计 081919
  • (附源码)基于ssm的模具配件账单管理系统 毕业设计 081848
  • (附源码)计算机毕业设计SSM智能化管理的仓库管理
  • (切换多语言)vantUI+vue-i18n进行国际化配置及新增没有的语言包
  • (转)winform之ListView
  • (转)机器学习的数学基础(1)--Dirichlet分布
  • (轉貼) 寄發紅帖基本原則(教育部禮儀司頒布) (雜項)
  • ./configure、make、make install 命令
  • .NET Core WebAPI中封装Swagger配置
  • .NET Core中的去虚
  • .net6Api后台+uniapp导出Excel
  • .NET轻量级ORM组件Dapper葵花宝典
  • .NET运行机制
  • .NET中的Exception处理(C#)
  • /dev/VolGroup00/LogVol00:unexpected inconsistency;run fsck manually
  • @RequestMapping 和 @GetMapping等子注解的区别及其用法
  • [ Socket学习 ] 第一章:网络基础知识
  • [ solr入门 ] - 利用solrJ进行检索
  • [ vulhub漏洞复现篇 ] Django SQL注入漏洞复现 CVE-2021-35042