基于 WebGL(ThingJS)的室内平面图 2D/3D 导航 DEMO(Part 1)

简介: 前言 利用CampusBuilder来搭建自己的虚拟世界过程有这样一个问题:如何快速聚焦到虚拟场景的某一位置。当然我们可以创建几个按钮对应查找我们需要去的位置(参照物)并聚焦,但是按钮并不是很炫酷也不能很好的反馈给我们一些信息。


前言

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


实现

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


 


第二步,把我们编辑好的场景加载到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,
    });
});



第三步,为平面图创建一块面板,并调整一下面板的位置以及大小。
图片下载地址:
链接:https://pan.baidu.com/s/1gmNjIj2ekbw1rO3MoujHqQ 提取码: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一起动起来!


完整代码

可以粘到 ThingJS 网站在线开发环境运行 http://www.thingjs.com/guide/?m=sample


	//加载场景代码
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,
    });
}

 

相关实践学习
阿里云AIoT物联网开发实战
本课程将由物联网专家带你熟悉阿里云AIoT物联网领域全套云产品,7天轻松搭建基于Arduino的端到端物联网场景应用。 开始学习前,请先开通下方两个云产品,让学习更流畅: IoT物联网平台:https://iot.console.aliyun.com/ LinkWAN物联网络管理平台:https://linkwan.console.aliyun.com/service-open
目录
相关文章
|
Windows
hutool工具命令行工具
hutool工具命令行工具
|
XML 前端开发 JavaScript
前端图形学实战: 从零实现编辑器的图层管理面板和实时缩略图(vue3 + vite版)
前端图形学实战: 从零实现编辑器的图层管理面板和实时缩略图(vue3 + vite版)
258 0
|
9月前
|
Web App开发 JavaScript 前端开发
插件实现12306网站“按预填信息”自动抢票
年底抢票回家过年,12306的“按预填信息购票”功能却隐藏按钮,导致抢票困难。程序员发现按钮被CSS隐藏后尝试手动修改,但遇到自动恢复和确认窗口的问题。最终决定开发Chrome插件,通过监听页面按钮自动点击,实现一键抢票。该插件结构简单,包含manifest.json、popup.html等文件,能有效节省抢票时间。代码已开源至GitHub,供有需要的人参考使用。
|
移动开发 JavaScript 前端开发
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
512 0
|
11月前
|
机器学习/深度学习 传感器 人工智能
2024.11|全球具身智能的端到端AI和具身Agent技术发展到哪里了
2024年,具身智能领域取得显著进展,特别是在端到端AI控制系统和多模态感知技术方面。这些技术不仅推动了学术研究的深入,也为科技公司在实际应用中带来了突破。文章详细介绍了端到端AI的演化、自监督学习的应用、多模态感知技术的突破、基于强化学习的策略优化、模拟环境与现实环境的迁移学习、长程任务规划与任务分解、人机协作与社会交互能力,以及伦理与安全问题。未来几年,具身智能将在多模态感知、自监督学习、任务规划和人机协作等方面继续取得重要突破。
594 2
|
JavaScript 前端开发 API
全栈开发革命来临!Vue.js与Node.js联手,打造前后端无缝对接的奇迹之作!
【8月更文挑战第30天】在Web开发领域,前后端分离与协作至关重要。Vue.js以其轻量级和易用性深受前端开发者喜爱,而Node.js则以高性能和事件驱动特性在后端领域崭露头角。二者结合开启了全栈开发新篇章,通过RESTful API或GraphQL实现高效稳定通信。本文以示例说明如何使用Vue.js和Node.js构建全栈应用,从前端Vue组件到后端Express服务器,展示了数据获取与展示的全过程。这种组合提供了一种高效简洁的全栈开发方案,使开发者能更专注于业务逻辑实现。
922 1
|
小程序 JavaScript 开发工具
【小程序项目开发-- 京东商城】uni-app之分类导航区域
【小程序项目开发-- 京东商城】uni-app之分类导航区域
【小程序项目开发-- 京东商城】uni-app之分类导航区域
|
JavaScript 前端开发
【vue】 网站动态背景 | vanta.js的使用
【vue】 网站动态背景 | vanta.js的使用
956 0
vue3.2中setup语法糖父组件如何调用子组件中的方法
vue3.2中setup语法糖父组件如何调用子组件中的方法
vue3.2中setup语法糖父组件如何调用子组件中的方法
|
SQL Oracle 关系型数据库
Win11虚拟机安装Oracle 19c(保姆教程)
Oracle学习笔记 Oracle19c Windows11 instant client配置 远程连接 虚拟机
2016 1
Win11虚拟机安装Oracle 19c(保姆教程)

热门文章

最新文章