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

最新推荐文章于 2024-05-14 09:49:17 发布

_Ginkgo

最新推荐文章于 2024-05-14 09:49:17 发布

阅读量3.8k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/nioooom/article/details/85777391

版权

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

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

_Ginkgo

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
基于WebGL架构的3D可视化平台—平面图导航（一）

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

扫一扫