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

关注

VIP免费原创最新推荐文章于 2026-10-04 13:48:42 发布 4.1k 阅读 AI 写同款· GEO 优化 ›

基于JavaWeb的房间平面图区域参数检测【房间平面图区域参数检测】【标签】 Java、Eclipse、IDEA、房屋平面数据检测、Tomcat 【环境】 Java、JDK8、Eclipse、IDEA、Tomcat 【介绍】（IDEA和Eclipse上均可运行）设计一个简易地图(类似房间平面图)，图上标有多个检测区域(下面已标注要检测哪五个)，区域上显示当前的检测数值和状态(红，黄，绿)。点击检... 阅读详情

前言
利用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;