G3D

基于 HTML5 + WebGL 的 3D 风力发电场

ぐ巨炮叔叔 提交于 2020-11-24 05:00:09
前言 风能是一种开发中的洁净能源,它取之不尽、用之不竭。当然,建风力发电场首先应考虑气象条件和社会自然条件。近年来,我国海上和陆上风电发展迅猛。海水、陆地为我们的风力发电提供了很好地质保障。正是这些场地为我们的风力提供了用之不竭的能源。现在我们正在努力探索这些领域。 本文章实现了风力发电场的整体流程。能让大家能够看到一套完整风力发电预览体系。 需要注意的是,本次项目是使用 Hightopo 的 HT for Web 产品来搭建的。 预览地址: https://hightopo.com/demo/wind-power-station/ 大致流程 下面是整个项目的流程图。我们从首页可以进入到场区分布页面和集控页面。 场区分布页面又包括两个不同的 3D 场景,分别是陆地风机场和海上风机场。点击两个 3D 风机场最终都会进入到 3D 风机场景。 预览效果 首页: 1. 世界地图效果 2. 中国地 图效果 2. 城市地图效果 集控中心页面(没有动画效果): 场区分布页面 (没有动画效果) : 陆地风机场: 海上风机场: 代码实现 我们可以看到,首页的地球有三种视角状态,世界地图、中国地图、城市地图。点击每个状态相机就会转到对应的位置。在这之前我们要先预先存一下对应的 center 和 eye 。 我们最好新建一个 data.js 文件,专门用来提供数据。 相关伪代码如下: // 记录位置

使用 web3D 技术的风力发电场展示

非 Y 不嫁゛ 提交于 2020-11-24 03:27:17
前言 风能是一种开发中的洁净能源,它取之不尽、用之不竭。当然,建风力发电场首先应考虑气象条件和社会自然条件。近年来,我国海上和陆上风电发展迅猛。海水、陆地为我们的风力发电提供了很好地质保障。正是这些场地为我们的风力提供了用之不竭的能源。现在我们正在努力探索这些领域。 本文章实现了风力发电场的整体流程。能让大家能够看到一套完整风力发电预览体系。 需要注意的是,本次项目是使用 Hightopo 的 HT for Web 产品来搭建的。 预览地址: https://hightopo.com/demo/wind-power-station/ 大致流程 下面是整个项目的流程图。我们从首页可以进入到场区分布页面和集控页面。 场区分布页面又包括两个不同的 3D 场景,分别是陆地风机场和海上风机场。点击两个 3D 风机场最终都会进入到 3D 风机场景。 预览效果 首页: 1. 世界地图效果 2. 中国地 图效果 2. 城市地图效果 集控中心页面(没有动画效果): 场区分布页面 (没有动画效果) : 陆地风机场: 海上风机场: 代码实现 我们可以看到,首页的地球有三种视角状态,世界地图、中国地图、城市地图。点击每个状态相机就会转到对应的位置。在这之前我们要先预先存一下对应的 center 和 eye 。 我们最好新建一个 data.js 文件,专门用来提供数据。 相关伪代码如下: // 记录位置

三维流动实现方法 ht for web

久未见 提交于 2020-05-05 13:54:11
一. 类似水管内部水的流动 两套模型。一套在外,作为管道。另一套在内作为水的流动 在内管道贴图要求:颜色、透明相互交替。 流动具体实现,在json中添加tag属性, 在页面中通过g3d.dm ().getDataByTag(“yellow”);获取对应的模型,在添加、更改属性 { "c": "ht.Node", "i": 19884, "p": { "tag": "propelled", "rotationZ": -0.40143, "position": { "x": -0.00031, "y": -369 }, "elevation": 129.36739 }, 三维的流动通过shape3d.uv.offset改变内在管道的贴图而实现流动 function yellow(offset1) { var anim1 = ht.Default.startAnim({ duration: 2000, action: function() { offset1 += 0.015; var pipelines = g3d.dm().getDataByTag("yellow"); pipelines.s("shape3d.uv.offset", [offset1, 0]); }, finishFunc: function() { yellow(offset1); } }); } 二

生的昼夜调和的文学观所

隐身守侯 提交于 2020-05-02 09:49:25
sdfsdf 服务网格作为一个改善服务到服务通信的专用基础设施层,是云原生范畴中最热门的话题。随着容器愈加流行,服务拓扑也频繁变动,这就需要更好的网络性能。服务网格能够通过服务发现、路由、负载均衡、心跳检测和支持可观测性,帮助我们管理网络流量。服务网格试图为无规则的复杂的容器问题提供规范化的解决方案 将供应链搬出中国,似乎成了过去两三个月新冠肺炎疫情衍生出的热门话题。 年初新冠肺炎疫情爆发,让中国供应链的生产活动几乎完全停顿,影响席卷全球:苹果的新 5G 有可能因疫情而延期推出,特斯拉新款芯片无法及时交付、陷入“芯片门”纠纷。其余像三星、小米、索尼等著名跨国企业,均受到供应链停摆的影响。 因此,fzpdbmixcloud.com/LN5IjI67w3l79kU/ mixcloud.com/z2uAvl8667trqQd/ mixcloud.com/J2Red47g3d6f27W/ mixcloud.com/771LWPKHMi5ldEi/ mixcloud.com/8dU24I3P99B11p7/ mixcloud.com/M0t51t9hWB0knyF/ mixcloud.com/443gcQu9Bs664BS/ mixcloud.com/ZtM4f1beX0VqJLe/ mixcloud.com/iAWfMprIyyRe76D/ mixcloud.com

基于 HTML5 + WebGL 的 3D 风力发电场

六月ゝ 毕业季﹏ 提交于 2020-02-27 12:19:45
前言 风能是一种开发中的洁净能源,它取之不尽、用之不竭。当然,建风力发电场首先应考虑气象条件和社会自然条件。近年来,我国海上和陆上风电发展迅猛。海水、陆地为我们的风力发电提供了很好地质保障。正是这些场地为我们的风力提供了用之不竭的能源。现在我们正在努力探索这些领域。 本文章实现了风力发电场的整体流程。能让大家能够看到一套完整风力发电预览体系。 需要注意的是,本次项目是使用 Hightopo 的 HT for Web 产品来搭建的。 预览地址: https://hightopo.com/demo/wind-power-station/ 大致流程 下面是整个项目的流程图。我们从首页可以进入到场区分布页面和集控页面。 场区分布页面又包括两个不同的 3D 场景,分别是陆地风机场和海上风机场。点击两个 3D 风机场最终都会进入到 3D 风机场景。 预览效果 首页: 1. 世界地图效果 2. 中国地 图效果 2. 城市地图效果 集控中心页面(没有动画效果): 场区分布页面 (没有动画效果) : 陆地风机场: 海上风机场: 代码实现 我们可以看到,首页的地球有三种视角状态,世界地图、中国地图、城市地图。点击每个状态相机就会转到对应的位置。在这之前我们要先预先存一下对应的 center 和 eye 。 我们最好新建一个 data.js 文件,专门用来提供数据。 相关伪代码如下: // 记录位置

基于 HTML5 WebGL 构建智能数字化城市 3D 全景

拟墨画扇 提交于 2020-02-27 10:00:02
前言 自 2011 年我国城镇化率首次突破 50% 以来,《新型城镇化发展规划》将智慧城市列为我国城市发展的三大目标之一,并提出到 2020 年,建成一批特色鲜明的智慧城市。截至现今,全国 95% 的副省级以上城市、76% 的地级以上城市,总计约 500 多个城市提出或在建智慧城市。 基于这样的背景,本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 智慧城市 3D 可视化场景,通过三个角度的转换,更清晰让我们感知到 5G 时代下数字化智能城市的魅力 预览地址: HT 智慧城市 整体预览图 第一个视角下,城市以市中心为圆心缓缓浮现,市中心就如同整座城的大脑 第二个视角下,在楼房间穿过,细致的感受这城市的面貌 第三个视角下,鸟瞰整座城,体会智慧城市带来的不可思议的欣喜 是不是觉得有些神奇,我们接下来就是对项目的具体分析,手把手教你如何搭建一个自己心中的梦想城市 场景搭建 该系统中的大部分模型都是通过 3dMax 建模生成的,该建模工具可以导出 obj 与 mtl 文件,在 HT 中可以通过解析 obj 与 mtl 文件来生成 3D 场景中的所有复杂模型,(当然如果是某些简单的模型可以直接使用 HT 来绘制,这样会比 obj 模型更轻量化,所以大部分简单的模型都是采用 HT for Web 产品轻量化 HTML5/WebGL 建模的方案)我们先看下项目结构

基于 HTML5 WebGL 的民航客机飞行监控系统

大兔子大兔子 提交于 2020-01-07 01:08:18
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 前些日子出差,在飞机上看到头顶的监控面板,除了播放电视剧和广告之外,还会时不时的切换到一个飞机航行的监控系统,不过整个监控系统让人感到有一点点的简陋,所以我就突发奇想制作了一个采用 HT for Web 的升级版监控系统,demo 的效果还行,发出来大家相互学习下。 demo (https://www.hightopo.com/demo/flight-monitor/) 实现过程 云中穿行效果 为了达到飞机云中穿行的效果,最开始我遇到的问题是飞机飞行的层次感,也就通常所说的透视效果,这里我采用的是云通道和云背景以不同的速度流动,制造一种飞行的透视效果。 云我采用的是贴图的方式呈现的,但是仅仅是贴图会遮挡天空和飞机,非常影响飞机飞行的观感,所以我开启了相应图元的 transparent 和 opacity ,云背景和云通道设置不同的透明度,不仅增加了层次感,还会让人产生云朵从眼前飘过的错觉。 云通道采用的是 ht.Polyline 类型,通道缩放拉大了 Y 轴的比例,使云通道有更大的纵向空间,设置 reverse.flip 背拷贝使云通道内部也显示出贴图,仿佛让飞机置身于云海中穿梭;云背景采用 ht.Node 类型,只设置一个面显示充当云背景。 整体的云流动效果采用 offset 偏移实现

基于 HTML5 WebGL 构建智能数字化城市 3D 全景

左心房为你撑大大i 提交于 2019-12-23 16:49:27
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 前言 自 2011 年我国城镇化率首次突破 50% 以来,《新型城镇化发展规划》将智慧城市列为我国城市发展的三大目标之一,并提出到 2020 年,建成一批特色鲜明的智慧城市。截至现今,全国 95% 的副省级以上城市、76% 的地级以上城市,总计约 500 多个城市提出或在建智慧城市。 基于这样的背景,本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 智慧城市 3D 可视化场景,通过三个角度的转换,更清晰让我们感知到 5G 时代下数字化智能城市的魅力 预览地址: HT 智慧城市 整体预览图 第一个视角下,城市以市中心为圆心缓缓浮现,市中心就如同整座城的大脑 第二个视角下,在楼房间穿过,细致的感受这城市的面貌 第三个视角下,鸟瞰整座城,体会智慧城市带来的不可思议的欣喜 是不是觉得有些神奇,我们接下来就是对项目的具体分析,手把手教你如何搭建一个自己心中的梦想城市 场景搭建 该系统中的大部分模型都是通过 3dMax 建模生成的,该建模工具可以导出 obj 与 mtl 文件,在 HT 中可以通过解析 obj 与 mtl 文件来生成 3D 场景中的所有复杂模型,(当然如果是某些简单的模型可以直接使用 HT 来绘制,这样会比 obj 模型更轻量化,所以大部分简单的模型都是采用 HT for Web