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

 

前言

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

 

实现

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

 

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

<span style="color:#f8f8f2"><code class="language-javascript"><span style="color:slategray"><span style="color:#75715e">//加载场景代码</span></span>
<span style="color:#66d9ef"><span style="color:#f92672">var</span></span> app <span style="color:#f8f8f2">=</span> <span style="color:#66d9ef"><span style="color:#f92672">new</span></span> THING<span style="color:#f8f8f2">.</span>App<span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">{</span>
	<span style="color:slategray"><span style="color:#75715e">// 场景地址</span></span>
	<span style="color:#a6e22e"><span style="color:#e6db74">"url"</span></span><span style="color:#f8f8f2">:</span> <span style="color:#a6e22e"><span style="color:#e6db74">"http://www.thingjs.com/./uploads/wechat/S2Vyd2lu/scene/Campus04"</span></span><span style="color:#f8f8f2">,</span>
<span style="color:#f8f8f2">}</span><span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">;</span>
<span style="color:slategray"><span style="color:#75715e">//场景相关</span></span>
<span style="color:#f8f8f2"><span style="color:#75715e">/</span></span><span style="color:slategray"><span style="color:#75715e">/************************************************************************************/</span></span>
app<span style="color:#f8f8f2">.</span><span style="color:#e6db74">on</span><span style="color:#f8f8f2">(</span><span style="color:#a6e22e"><span style="color:#e6db74">'load'</span></span><span style="color:#f8f8f2">,</span> <span style="color:#66d9ef"><span style="color:#f92672">function</span></span> <span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">)</span> <span style="color:#f8f8f2">{</span>
    app<span style="color:#f8f8f2">.</span>camera<span style="color:#f8f8f2">.</span><span style="color:#e6db74">flyTo</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">{</span>
        <span style="color:#a6e22e"><span style="color:#e6db74">'position'</span></span><span style="color:#f8f8f2">:</span> <span style="color:#f8f8f2">[</span><span style="color:#ae81ff"><span style="color:#ae81ff">36.357131498969785</span></span><span style="color:#f8f8f2">,</span> <span style="color:#ae81ff"><span style="color:#ae81ff">61.953024217074265</span></span><span style="color:#f8f8f2">,</span> <span style="color:#ae81ff"><span style="color:#ae81ff">69.12160670337104</span></span><span style="color:#f8f8f2">]</span><span style="color:#f8f8f2">,</span>
        <span style="color:#a6e22e"><span style="color:#e6db74">'target'</span></span><span style="color:#f8f8f2">:</span> <span style="color:#f8f8f2">[</span><span style="color:#f8f8f2"><span style="color:#ae81ff">-</span></span><span style="color:#ae81ff"><span style="color:#ae81ff">1.3316924326803257</span></span><span style="color:#f8f8f2">,</span> <span style="color:#f8f8f2"><span style="color:#ae81ff">-</span></span><span style="color:#ae81ff"><span style="color:#ae81ff">4.9370371421622625</span></span><span style="color:#f8f8f2">,</span> <span style="color:#ae81ff"><span style="color:#ae81ff">33.619521849828544</span></span><span style="color:#f8f8f2">]</span><span style="color:#f8f8f2">,</span>
        <span style="color:#a6e22e"><span style="color:#e6db74">'time'</span></span><span style="color:#f8f8f2">:</span> <span style="color:#ae81ff"><span style="color:#ae81ff">2000</span></span><span style="color:#f8f8f2">,</span>
    <span style="color:#f8f8f2">}</span><span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">;</span>
<span style="color:#f8f8f2">}</span><span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">;</span>
</code></span>

 

<span style="color:#333333"><span style="color:#333333">
</span></span>

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

<span style="color:#f8f8f2"><code class="language-javascript"><span style="color:slategray"><span style="color:#75715e">//面板相关</span></span>
<span style="color:#f8f8f2"><span style="color:#75715e">/</span></span><span style="color:slategray"><span style="color:#75715e">/************************************************************************************/</span></span>
<span style="color:#66d9ef"><span style="color:#f92672">var</span></span> panel <span style="color:#f8f8f2">=</span> <span style="color:#66d9ef"><span style="color:#f92672">new</span></span> THING<span style="color:#f8f8f2">.</span>widget<span style="color:#f8f8f2">.</span>Panel<span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">{</span>
    closeIcon<span style="color:#f8f8f2">:</span> <span style="color:#ae81ff"><span style="color:#ae81ff">false</span></span><span style="color:#f8f8f2">,</span>
    dragable<span style="color:#f8f8f2">:</span> <span style="color:#ae81ff"><span style="color:#ae81ff">false</span></span><span style="color:#f8f8f2">,</span> 
    retractable<span style="color:#f8f8f2">:</span> <span style="color:#ae81ff"><span style="color:#ae81ff">true</span></span><span style="color:#f8f8f2">,</span>
    opacity<span style="color:#f8f8f2">:</span> <span style="color:#ae81ff"><span style="color:#ae81ff">0.9</span></span><span style="color:#f8f8f2">,</span>
    hasTitle<span style="color:#f8f8f2">:</span> <span style="color:#ae81ff"><span style="color:#ae81ff">true</span></span><span style="color:#f8f8f2">,</span>
<span style="color:#f8f8f2">}</span><span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">;</span>
panel<span style="color:#f8f8f2">.</span>width <span style="color:#f8f8f2">=</span> <span style="color:#ae81ff"><span style="color:#ae81ff">600</span></span><span style="color:#f8f8f2">;</span>
panel<span style="color:#f8f8f2">.</span>position <span style="color:#f8f8f2">=</span> <span style="color:#f8f8f2">[</span><span style="color:#ae81ff"><span style="color:#ae81ff">0</span></span><span style="color:#f8f8f2">,</span> <span style="color:#ae81ff"><span style="color:#ae81ff">200</span></span><span style="color:#f8f8f2">]</span><span style="color:#f8f8f2">;</span>
<span style="color:#66d9ef"><span style="color:#f92672">var</span></span> dataObj <span style="color:#f8f8f2">=</span> <span style="color:#f8f8f2">{</span>
    iframe<span style="color:#f8f8f2">:</span> <span style="color:#a6e22e"><span style="color:#e6db74">''</span></span>
<span style="color:#f8f8f2">}</span><span style="color:#f8f8f2">;</span>
<span style="color:#66d9ef"><span style="color:#f92672">var</span></span> iframe <span style="color:#f8f8f2">=</span> panel<span style="color:#f8f8f2">.</span><span style="color:#e6db74">addIframe</span><span style="color:#f8f8f2">(</span>dataObj<span style="color:#f8f8f2">,</span> <span style="color:#a6e22e"><span style="color:#e6db74">'iframe'</span></span><span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">.</span><span style="color:#e6db74">caption</span><span style="color:#f8f8f2">(</span><span style="color:#a6e22e"><span style="color:#e6db74">''</span></span><span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">.</span><span style="color:#e6db74">setHeight</span><span style="color:#f8f8f2">(</span><span style="color:#a6e22e"><span style="color:#e6db74">"290px"</span></span><span sty