安科网

基于WebGL架构的3D可视化平台—平面图导航（一）

unityd

unityd

2019-06-30

关注 关注

前言

利用CampusBuilder来搭建自己的虚拟世界过程有这样一个问题:如何快速聚焦到虚拟场景的某一位置。当然我们可以创建几个按钮对应查找我们需要去的位置（参照物）并聚焦，但是按钮并不是很炫酷也不能很好的反馈给我们一些信息。接下来我们就用平面导航图来解决这一问题。

实现

第一步，使用CampusBuilder搭建模拟场景，CampusBuilder操作简单，分分钟就可以上手。这里为每一个房间都创建一个小球作为视点参照物体并勾选预览时隐藏，这样不会对我们的场景造成影响，也便于我们聚焦到指定房间。注意：要将我们每个房间中的设备框选之后组合在一起，为下一阶段的做准备。
基于WebGL架构的3D可视化平台—平面图导航（一）

基于WebGL架构的3D可视化平台—平面图导航（一）

第二步，把我们编辑好的场景加载到ThingJS中。

//加载场景代码
var app = new THING.App({
    // 场景地址
    "url": "http://www.thingjs.com/./uploads/wechat/S2Vyd2lu/scene/Campus04",
});
//场景相关
//************************************************************************************/
app.on('load', function () {
    app.camera.flyTo({
        'position': [36.357131498969785, 61.953024217074265, 69.12160670337104],
        'target': [-1.3316924326803257, -4.9370371421622625, 33.619521849828544],
        'time': 2000,
    });
});

基于WebGL架构的3D可视化平台—平面图导航（一）

第三步，为平面图创建一块面板，并调整一下面板的位置以及大小。
图片下载地址：
链接：https://pan.baidu.com/s/1gmNj... 提取码：i0c1

//面板相关
//************************************************************************************/
var panel = new THING.widget.Panel({
    closeIcon: false,
    dragable: false, 
    retractable: true,
    opacity: 0.9,
    hasTitle: true,
});
panel.width = 600;
panel.position = [0, 200];
var dataObj = {
    iframe: ''
};
var iframe = panel.addIframe(dataObj, 'iframe').caption('').setHeight("290px");

第四步，编写iframe页。写完记得将这个页面和图片上传到页面资源，资源 => 页面资源 => 按钮（上传） 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
          .total_image {
            margin : 20px;
        }
        .total_image img{
            cursor: pointer;
            transition: all 0.6s;
            width: 50px;
        }
        .total_image img:hover{
            transform: scale(1.5);
            position:relative;
            z-index:100;
        }
    </style>
</head>
<body>
<div class="total_image" style="width: 500px;height: 280px;background-size: 100% auto">
    <img class="model_imag" src="发电室1.jpg" style="float: left;display: block;width: 85px;height: 84px" 
            onclick="onClick('PowerGenerationGroup_01','viewPoint_1')" >
              
    <img class="model_imag" src="发电室2.jpg" style="float: left;display: block;width: 78px;height: 84px" 
            onclick="onClick('PowerGenerationGroup_02','viewPoint_2')" >
              
    <img class="model_imag" src="发电室3.jpg" style="float: left;display: block;width:170px;height: 84px" 
            onclick="onClick('PowerGenerationGroup_03','viewPoint_3')" >
              
    <img class="model_imag" src="发电室4.jpg" style="float: left;display: block;width:167px;height: 84px" 
            onclick="onClick('PowerGenerationGroup_04','viewPoint_4')" >
              
    <div style="display: block;float: left;width: 100px;height: 145px;background-color:white">
        <img class="model_imag" src="办公室1.jpg" style="float: left;display: block;width:100px;height: 60px" 
            onclick="onClick('Office','viewPoint_5')" >
        <img class="model_imag" src="返回.png" style="float: left;display: block;width:100px;height: 80px" onclick="initViewPoint()">
    </div>

    <img class="model_imag" src="发电室5.jpg" style="float: right;display: block;width:123px" 
            onclick="onClick('PowerGenerationGroup_05','viewPoint_8')" > 
              
    <img class="model_imag" src="会议室1.jpg" style="float: left;display: block;width: 138px;height: 145px"  alt="" 
            onclick="onClick('BoardRoom_01','viewPoint_6')">
              
    <img class="model_imag" src="会议室2.jpg" style="float: left;display: block;width: 138px;height: 145px"  alt="" 
            onclick="onClick('BoardRoom_02','viewPoint_7')" > 
</div>

<script>
    function onClick(viewPoint,target){
        window.parent.onClick(viewPoint,target);
    }
    function initViewPoint(){
        window.parent.initViewPoint();
    }
</script>
</body>
</html>

第五步，完成onClick()和initViewPoint()方法。

//事件相关
//************************************************************************************/
var currentModule = null;

//点击事件
function onClick(targetObj, viewPoint) {
    currentModule = app.query(targetObj)[0];
    currentModule.position = [0, 0, 0];
    currentModule.style.opacity = 1;
    app.camera.flyTo({
        'object': app.query(viewPoint)[0],
        'offset': [0, 13, 7],
        'time': 1000,
        complete: function () {
            currentModule.brothers.style.opacity = 0.3;
        }
    });
}
//返回事件
function initViewPoint() {
    currentModule.brothers.style.opacity = 1;
    currentModule = null;
    app.camera.flyTo({
        'position': [36.357131498969785, 61.953024217074265, 69.12160670337104],
        'target': [-1.3316924326803257, -4.9370371421622625, 33.619521849828544],
        'time': 1000,
    });
}

小结
第一部分我们主要完成了iframe与我们的3D场景的简单交互，这里也没有做什么特效只是做了一个点击事件。这里值得一提的是currentModule这个全局变量，开始我没有创建这个变量只是将我当前点击的物体obj.style.opacity = 1;obj.brothers.style.opacity = 0.3, 但是执行initViewPoint(){app.query(’.Thing’).style.opacity=1}无法将场景的opacity 属性还原（自己可以试一下，或者有解决方案留言）。第二部分我会给iframe页加上鼠标悬停事件让iframe页的img标签和我们场景中的obj一起动起来！

完整代码

//加载场景代码
var app = new THING.App({
    // 场景地址
    "url": "http://www.thingjs.com/./uploads/wechat/S2Vyd2lu/scene/Campus04",
});
//场景相关
//************************************************************************************/
app.on('load', function () {
    app.camera.flyTo({
        'position': [36.357131498969785, 61.953024217074265, 69.12160670337104],
        'target': [-1.3316924326803257, -4.9370371421622625, 33.619521849828544],
        'time': 2000,
    });
});
//面板相关
//************************************************************************************/
var panel = new THING.widget.Panel({
    closeIcon: false,
    dragable: false, 
    retractable: true,
    opacity: 0.9,
    hasTitle: true,
});
panel.width = 600;
panel.position = [0, 200];
var dataObj = {
    iframe: '/uploads/wechat/S2Vyd2lu/file/平面图导航/ifram.html'
};
var iframe = panel.addIframe(dataObj, 'iframe').caption('').setHeight("290px");

//事件相关
//************************************************************************************/
var currentModule = null;

//点击事件
function onClick(targetObj, viewPoint) {
    currentModule = app.query(targetObj)[0];
    currentModule.position = [0, 0, 0];
    currentModule.style.opacity = 1;
    app.camera.flyTo({
        'object': app.query(viewPoint)[0],
        'offset': [0, 13, 7],
        'time': 1000,
        complete: function () {
            currentModule.brothers.style.opacity = 0.3;
        }
    });
}
//返回事件
function initViewPoint() {
    currentModule.brothers.style.opacity = 1;
    currentModule = null;
    app.camera.flyTo({
        'position': [36.357131498969785, 61.953024217074265, 69.12160670337104],
        'target': [-1.3316924326803257, -4.9370371421622625, 33.619521849828544],
        'time': 1000,
    });
}

可视化 软件 webgl

unityd

unityd

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

C# WPF 嵌入网页版WebGL油田三维可视化监控

最近做的一个项目，是一个油田三维可视化监控的场景编辑和监控的系统，和三维组态有些类似，不过主要用于油田上。效果如下图所示：。首先当然是上模型，设计人员跟进。一切进展的都很顺利。直到客户说，我们有一个WPF开发的桌面端程序，我们需要把你们的三维嵌入到桌面端。

teliduxing0 2020-01-14

C# WPF 嵌入网页版WebGL油田三维可视化监控

最近做的一个项目，是一个油田三维可视化监控的场景编辑和监控的系统，和三维组态有些类似，不过主要用于油田上。效果如下图所示：。首先当然是上模型，设计人员跟进。一切进展的都很顺利。直到客户说，我们有一个WPF开发的桌面端程序，我们需要把你们的三维嵌入到桌面端。

ixshells 2020-01-14

Docker使用Portainer搭建可视化界面的方法

Portainer是Docker的图形化管理工具，提供状态显示面板、应用模板快速部署、容器镜像网络数据卷的基本操作、事件日志显示、容器控制台操作、Swarm集群和服务等集中管理和操作、登录用户管理和控制等功能。功能十分全面，基本能满足中小型单位对容器管理的

魅惑青花瓷 2020-11-11

用Python构建和可视化决策树

决策树是当今最强大的监督学习方法的组成部分。决策树基本上是一个二叉树的流程图，其中每个节点根据某个特征变量将一组观测值拆分。决策树的目标是将数据分成多个组，这样一个组中的每个元素都属于同一个类别。在这种情况下，树将进行拆分，使每个组的均方误差最小。决策树的

赶路人儿 2020-11-02

Sampler：Shell命令执行可视化和告警工具

Sampler是一个用于shell命令执行，可视化和告警的工具。其配置使用的是一个简单的YAML文件。为什么我需要它？你可以直接从终端对任意动态进程进行采样 – 观察数据库中的更改，监控MQ动态消息，触发部署脚本并在完成后获取通知。如果有一种方法可以使用s

liujianhua 2020-10-22

JVM：可视化 JVM 故障处理工具

JConsole: 最古老的工具，早在 JDK 5 时期就已经存在的虚拟机监控工具。在 JDK 7 Update 40 时开始随 JDK 一起发布，后来 Java SE Advanced 产品线建立， Oracle 明确区分了 Oracle OpenJDK

Locksk 2020-10-12

详解python实现可视化的MD5、sha256哈希加密小工具

本文主要介绍了详解python实现可视化的MD5、sha256哈希加密小工具，分享给大家，具体如下：。windowss.resizable#宽度可变，高度可变。label2=tk.Label.grid#生成结果固定label. T4 = tk.Label(

菜鸟 2020-09-14

谷歌开源NLP模型可视化工具LIT，模型训练不再「黑箱」

深度学习模型的训练就像是「黑箱操作」，知道输入是什么、输出是什么，但中间过程就像个黑匣子，这使得研究人员可能花费大量时间找出模型运行不正常的原因。假如有一款可视化的工具，能够帮助研究人员更好地理解模型行为，这应该是件非常棒的事。近日，Google 研究人员

yyhhlancelot 2020-08-26

Python爬取数据并实现可视化代码解析

labels=[item[0] +'码'for item in lst_total] #使用列表生成式，得到饼图的标签。pit.rcParams['font.family']=['SimHei'] #单独的表格乱码的处理方式。#所涉及到的是requests

dayslrk 2020-08-16

可视化监控大型集群，这一个工具就够了！

许多企业使用Kubernetes来快速发布新功能并提高服务的可靠性。Rancher使团队能够减少管理其云原生工作负载的操作成本——但获得这些环境的持续可见性可能是一个挑战。在这篇文章中，我们将探讨如何利用Rancher内置支持的Prometheus和Gra

MrFuWen 2020-08-15

Python Selenium实现无可视化界面

有时候我们爬取网页数据，并不希望看其中的过程，只想看到最后的数据结果就可以了，这时候，***面就很有必要了！

letheashura 2020-08-14

操作ElasticSearch插件和可视化工具 Kibana

当 ElasticSearch 的实例并运行，您可以使用 localhost:9200,基于 JSON 的 REST API 与ElasticSearch 进行通信。在 ElasticSearch 自己的文档中，所有示例都使用 curl。但是，当使用 AP

molong0 2020-08-06

漂亮又好用的Redis可视化客户端汇总

因为 Redis 官方只提供了命令行版的 Redis 客户端 redis-cli，以至于我们在使用的时候会比较麻烦，通常要输入一堆命令，而且命令行版的客户端看起来也不够直观，基于以上两个原因我们需要找一个可视化的 Redis 客户端，下面是我这些年使用过的

redis 2020-08-02

6个优秀可视化Python库

对使用哪个可视化工具感到困惑?我为您分解了每个库的优缺点。如果您有一个等待可视化的DataFrame，应该选择哪一个?在某些情况下，某些库可能比其他库更好。到本文结尾，您应该能够区分每个库的不同功能，并可以更轻松地选择优秀库。一些库将可视化效果呈现为图像。

zlfing 2020-07-27

使用可视化工具redis-desktop-manager管理查询缓存。

使用可视化工具redis-desktop-manager管理查询缓存。Redis的可视化管理工具有很多，分享一篇文章大家都可以手动去试试，几款开源的图形化Redis客户端管理软件推荐。点击windows平台“redis-desktop-manager-0.

guoyun0 2020-07-19

3.redis desktop manager--redis 可视化工具安装及使用

下载。安装。双击exe:. 3.连接。4.Redis Desktop Manager的使用。补充：

anglehearts 2020-07-18

这款NLP神器火了！关键词提取、结果可视化，从小白进阶大神

如何快速优雅地处理你的NLP数据集？试试这款号称「从小白到大神」的Texthero的工具包。不仅编写界面友好美观，而且功能全面，预处理、表征、可视化样样精通，在Reddit上17个小时内就获得了近1.1k的热度。事实上，Texthero的优雅绝不仅仅在于界

yyhhlancelot 2020-07-06

12个写论文必备的神经网络可视化工具

即将开播：6月19日，互联网银行架构师魏生谈互联网开放银行实施路径的探索与思考。本文介绍了了12个将神经网络画地更好看的工具。一个用于画卷积神经网络的Python脚本。使用latex 来展示神经网络

walegahaha 2020-06-15

通过Flink+NBI可视化构建实时大数据分析系统

Flink主要特点：1、高吞吐、低延迟、纯流式架构；2、支持对乱序事件的处理；3、有状态、提供exactly-once计算；4、高度灵活的窗口机制；5、失败恢复、故障转移、水平扩展；6、批处理、流处理统一的APINBI大数据可视化：

Leonwey 2020-06-11

智慧城市可视化管理平台设计分析

公司依靠BI工具出示的可视化大数据展开剖析评定，务求做到最好的商业服务管理决策。而云蛛系统作为数据可视化中的一员也是义不容辞，云蛛系统是蛛网时代历经2年自主研发出的一套数据可视化开发工具，经过市场检测以后大受好评。因而，云蛛系统是彻底自主可控的，拥有 很高

bingdata 2020-06-09
unityd

unityd

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号