声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。背景近期工作有涉及到数字大屏的需求，于是利用业余时间，结合Three.js和CSS实现赛博朋克2077风格视觉效果实现炫酷3D数字地球大屏页面。页面使用React+Three.js+Echarts+stylus技术栈，本文涉及到的主要知识点包括：THREE.Spherical球体坐标系的应用、Shader结合TWEEN实现飞线和冲击波动画效果、dat.GUI调试工具库的使用、clip-path创建不规则图形、Echarts的基本使用方法、radial-gradient创建雷达图
前言上节课我们讲了《3D光伏发电》，与之配套的就是能量存储这节课我们主要讲讲储能，储能站，在分布式能源系统中起到调节用对电的尖峰平谷进行削峰填谷的作用。特别是小型储能站，更加灵活，因地适宜。能够很好的解决电力在时空上的不平衡。储能电站技术的应用贯穿于电力系统发电、输电、配电、用电的各个环节。储能站可视化解决方案，有效直观的提升储能调节效率。对设备进行状态告警监控，储能监控。定义介绍： 储能站：电能存储、转换及释放的设备集合站点 储能柜：电能储存的基础单元，通常单个柜每日的储电量达到了几千度，类似大型充电宝 阵列模块：一组储能柜，通过逻辑电路进行连接，实现统一充电放电。 应用系统：是一套
前言上节课我们讲了《3D光伏发电》，与之配套的就是能量存储这节课我们主要讲讲储能，储能站，在分布式能源系统中起到调节用对电的尖峰平谷进行削峰填谷的作用。特别是小型储能站，更加灵活，因地适宜。能够很好的解决电力在时空上的不平衡。储能电站技术的应用贯穿于电力系统发电、输电、配电、用电的各个环节。储能站可视化解决方案，有效直观的提升储能调节效率。对设备进行状态告警监控，储能监控。定义介绍： 储能站：电能存储、转换及释放的设备集合站点 储能柜：电能储存的基础单元，通常单个柜每日的储电量达到了几千度，类似大型充电宝 阵列模块：一组储能柜，通过逻辑电路进行连接，实现统一充电放电。 应用系统：是一套
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助在javascript中使用Three.js设计并且实现3D场景是一个很有意思的事情，因为在浏览器中就能够渲染出3D场景，非常简单和轻便。接下来就总结以下我学习Three.js过程中的心得。1建立基本场景在Three.js中有三要素：场景、摄像机和渲染器，只有以上三者结合才能渲染出可见的内容。当然在这之前你需要先下载Three.js文件，直接百度搜索Three.js到官网下载即可，下载完成之后新建一个html文件并且引入Three.js即可。一个最基本的使用Three.js的html文件应该是这样子的： Wonanut3D bod
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助在javascript中使用Three.js设计并且实现3D场景是一个很有意思的事情，因为在浏览器中就能够渲染出3D场景，非常简单和轻便。接下来就总结以下我学习Three.js过程中的心得。1建立基本场景在Three.js中有三要素：场景、摄像机和渲染器，只有以上三者结合才能渲染出可见的内容。当然在这之前你需要先下载Three.js文件，直接百度搜索Three.js到官网下载即可，下载完成之后新建一个html文件并且引入Three.js即可。一个最基本的使用Three.js的html文件应该是这样子的： Wonanut3D bod
前言此系列已完结，共3部分：part1：https://www.cnblogs.com/xi12/p/16690119.htmlpart2：https://www.cnblogs.com/xi12/p/16864419.htmlpart3：https://www.cnblogs.com/xi12/p/16945416.html本来说有时间就把这个项目完结了的，结果后面一直有事拖着，直到现在十一月份了才搞完。老样子，先看成果。浏览链接：http://xisite.top/original/covid19-visualization/index.html#/项目链接(欢迎各位大哥star)：htt
前言此系列已完结，共3部分：part1：https://www.cnblogs.com/xi12/p/16690119.htmlpart2：https://www.cnblogs.com/xi12/p/16864419.htmlpart3：https://www.cnblogs.com/xi12/p/16945416.html本来说有时间就把这个项目完结了的，结果后面一直有事拖着，直到现在十一月份了才搞完。老样子，先看成果。浏览链接：http://xisite.top/original/covid19-visualization/index.html#/项目链接(欢迎各位大哥star)：htt
前言刚开始使用three.js时会不太熟悉，想写一些项目增加理解，网上翻了好多文章，不是画立方体就是画三角形，最后偶然看到这个网站，十分炫酷。我们也许没那么牛逼，但我们可以整个简略版的太阳系来练练手，加强理解，增加熟练度。实现目标1、绘制宇宙背景。2、添加宇宙星辰。3、绘制行星轨道。4、绘制行星环。5、实现行星自转与公转。6、实现双击行星后镜头的拉近效果(类似cesium的flyTo效果)。7、显示行星描述。具体效果浏览地址：http://xisite.top/original/three-solarsystem/index.html项目地址：https://gitee.com/xi1213/
前言刚开始使用three.js时会不太熟悉，想写一些项目增加理解，网上翻了好多文章，不是画立方体就是画三角形，最后偶然看到这个网站，十分炫酷。我们也许没那么牛逼，但我们可以整个简略版的太阳系来练练手，加强理解，增加熟练度。实现目标1、绘制宇宙背景。2、添加宇宙星辰。3、绘制行星轨道。4、绘制行星环。5、实现行星自转与公转。6、实现双击行星后镜头的拉近效果(类似cesium的flyTo效果)。7、显示行星描述。具体效果浏览地址：http://xisite.top/original/three-solarsystem/index.html项目地址：https://gitee.com/xi1213/
声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。背景深居内陆的人们，大概每个人都有过大海之梦吧。夏日傍晚在沙滩漫步奔跑；或是在海上冲浪游泳；或是在海岛游玩探险；亦或静待日出日落……本文使用React+Three.js技术栈，实现3D海洋和岛屿，主要包含知识点包括：ToneMapping、Water类、Sky类、Shader着色、ShaderMaterial着色器材质、Raycaster检测遮挡以及Three.js的其他基础知识，让我们在这个夏天通过此页面共赴大海之约。效果?本页面仅适配PC端，大屏访问效果更佳。??在线预览
