基于WebGL（ThingJS）的平面图导航,室内导航,3D聚焦 （二）

最新推荐文章于 2024-08-20 20:00:29 发布
最新推荐文章于 2024-08-20 20:00:29 发布
阅读量550 收藏
点赞数
原文链接：http://www.cnblogs.com/thingjs/p/10273368.html
版权

前言

基于WebGL架构的3D可视化平台—平面图导航（一）中已经完成了iframe面板与我们的3D场景的简单交互，下面我们继续完善并给iframe页加上鼠标悬停事件让iframe页的img标签和我们场景中的obj一起动起来。

实现

第一步，还是使用之前的场景接着上次的继续，先编写iframe页。给每一个img标签都加上onmouseover、onmouseout 事件。

<!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" 
			οnclick="onClick('PowerGenerationGroup_01','viewPoint_1')" οnmοuseοver="onMouseOver('PowerGenerationGroup_01','viewPoint_1')" οnmοuseοut="onMouseOut('PowerGenerationGroup_01')">
              
    <img class="model_imag" src="发电室2.jpg" style="float: left;display: block;width: 78px;height: 84px" 
			οnclick="onClick('PowerGenerationGroup_02','viewPoint_2')" οnmοuseοver="onMouseOver('PowerGenerationGroup_02','viewPoint_2')" οnmοuseοut="onMouseOut('PowerGenerationGroup_02')">
              
    <img class="model_imag" src="发电室3.jpg" style="float: left;display: block;width:170px;height: 84px" 
			οnclick="onClick('PowerGenerationGroup_03','viewPoint_3')" οnmοuseοver="onMouseOver('PowerGenerationGroup_03','viewPoint_3')" οnmοuseοut="onMouseOut('PowerGenerationGroup_03')">
              
    <img class="model_imag" src="发电室4.jpg" style="float: left;display: block;width:167px;height: 84px" 
			οnclick="onClick('PowerGenerationGroup_04','viewPoint_4')" οnmοuseοver="onMouseOver('PowerGenerationGroup_04','viewPoint_4')" οnmοuseοut="onMouseOut('PowerGenerationGroup_04')">
              
    <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" 
			οnclick="onClick('Office','viewPoint_5')" οnmοuseοver="onMouseOver('Office','viewPoint_5')" οnmοuseοut="onMouseOut('Office')">
        <img class="model_imag" src="返回.png" style="float: left;display: block;width:100px;height: 80px" οnclick="initViewPoint()">
    </div>

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

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

　　

第二步，房间里的物体不要要让他“飞起来”，还要给他加一个“底座”。这里叫他SurveillanceCamera类，在自己编写类的时候一定要注意，想要当前类生效一定要继承THING.Thing，并且THING.factory.registerClass(‘ClassName’, ClassName);

class SurveillanceCamera extends THING.Thing {
    constructor(app) {
        super(app);
        this.app = app;
        this.isFrustum = true;
        this.opacity = 1;
        this.color = 0xff00ff;
        this.vertices = [];
        this.near = 0.1;
        this.camera = null;
        this.node = new THREE.Object3D();
        this._frustum = new THREE.Frustum();
        this._projScreenMatrix = new THREE.Matrix4();

    }

    setup(param) {
        super.setup(param);
        this.fov = param['fov'];
        this.aspect = param['aspect'];
        this.far = param['far'];
        this.alpha = param['alpha'];
        this.lineAlpha = param['lineAlpha'];
        this.setupComplete(param);
    }

    setupComplete(param) {
        super.setupComplete(param);
        this.build();
    }

    build() {
        if (this.node.children.length > 0) {
            this.node.children = [];
        }

        if (this.camera != null) {
            this.camera = null;
        }

        var h = this.far * Math.tan(this.fov * 0.5 * 0.017453293);
        var w = this.aspect * h;

        var geometry = new THREE.Geometry();
        this.vertices = [new THREE.Vector3(0, 0, 0), new THREE.Vector3(w, -h, -this.far), new THREE.Vector3(w, h, -this.far), new THREE.Vector3(-w, h, -this.far), new THREE.Vector3(-w, -h, -this.far)];
        var faces = [new THREE.Face3(0, 1, 2), new THREE.Face3(0, 2, 3), new THREE.Face3(0, 3, 4), new THREE.Face3(0, 4, 1), new THREE.Face3(3, 4, 1), new THREE.Face3(3, 1, 2)];
        geometry.vertices = this.vertices;

        var line_mat = new THREE.LineBasicMaterial({
            color: "#b4f5f8",
            opacity: this.lineAlpha || 0.5,
        })

        var texture = THREE.ImageUtils.loadTexture("images/light2.png");
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.RepeatWrapping;
        var frustum_mat = new THREE.MeshBasicMaterial({
            color: "#0aa5ff",
            opacity: this.alpha || 0.5,
            transparent: true,
            side: THREE.DoubleSide,
        });
        var line_mesh = new THREE.Line(geometry, line_mat);

        var frustum_mesh = new THREE.Mesh(geometry, frustum_mat);
        geometry.faces = faces;
        this.node.add(frustum_mesh, line_mesh);

        this.camera = new THREE.PerspectiveCamera(this.fov, this.aspect, this.near, this.far);
        this.camera.position.set(this.position[0], this.position[1], this.position[2]);
        this.camera.rotation.copy(this.node.rotation);

        this.camera.updateMatrixWorld(true);
        this._updateFrustum();
    }

    setPosition() {
        this.camera.position.set(this.position[0], this.position[1], this.position[2]);
        this.camera.updateMatrixWorld(true);
        this._updateFrustum();
    }

    _updateFrustum() {
        if (this.camera) {
            this._projScreenMatrix.multiplyMatrices(this.camera.projectionMatrix, this.camera.matrixWorldInverse);
            this._frustum.setFromMatrix(this._projScreenMatrix);
        }
    }

    intersectsObject(object) {
        this._updateFrustum();
        return this._frustum.intersectsObject(object);
    }

    intersectsBox(box) {
        this._updateFrustum();
        return this._frustum.intersectsBox(box);
    }

    intersectsSphere(sphere) {
        this._updateFrustum();
        return this._frustum.intersectsSphere(sphere);
    }

    intersectsSprite(sprite) {
        this._updateFrustum();
        return this._frustum.intersectsSprite(sprite);
    }
}

THING.factory.registerClass('SurveillanceCamera', SurveillanceCamera);

　　

第三步，鼠标悬浮事件和鼠标离开事件，这里我们使用了之前创建的SurveillanceCamera类为obj加上了一个“底座”。

//鼠标悬浮事件
function onMouseOver(targetObj,viewPoint) {
    if (currentModule != null)
        return;
    overModule = app.query(targetObj)[0];
    overModule.style.boundingBox = true;
    overModule.moveTo({
        "offset": [0, 6, 0],
        "time": 80,
    });
    sCamera = app.create({
        type: 'SurveillanceCamera',
        name: 'SurveillanceCamera_',
        position:app.query(viewPoint)[0].position,
        fov: 65,
        aspect: 1.3,
        far: 6,
    });
    sCamera.angleX = 90;
    sCamera.style.opacity = 0.1;
}
//鼠标离开事件
function onMouseOut(targetObj) {
    if (currentModule != null)
        return;
    if (sCamera) {
        sCamera.destroy();
        sCamera = null;
    }
    outModule = overModule;
    outModule.style.boundingBox = false;
    outModule.stopMoving();
    outModule.position = [0, 0, 0];
    outModule = null;
}

　　

演示地址：http://www.thingjs.com/guide/sampleindex.html?name=/uploads/wechat/S2Vyd2lu/Demo_平面图导航.js

总结

利用iframe与ThingJS进行交互完成了平面图导航功能，通过自制的HTML界面，嵌入ThingJS的面板中，形成一个可自定义的导航界面，通过偏移实现相应的视觉效果。
制作一个视锥，达到投放影像的效果，这里运用面向对象的方式是为了，能够更快捷的创建视锥，起到复用的作用。
在制作过程中，将物体悬浮的过程时出现了问题，发现如果快速的操作鼠标，物体不会达到预期的视觉效果，例如，鼠标快速的在两个导航图之间切换时，对应的两个物体会不断的上升，尽管将上升与还原的速度加快，也依然无法解决问题。最后解决的办法是：新添加一个变量，将上一次悬浮的物体记录下来，就是文中的 outModule，通过对 outModule 单独操作来解决影响问题。

 

转载于:https://www.cnblogs.com/thingjs/p/10273368.html

delouyou5212
关注
ThingJS：探索3D信息技术发展应用之3D城市地图搭建
ThingJS的博客
08-14 1110
智慧城市不仅仅是智能化、高效化，它也需要考虑人居因素，ThingJS面向智慧城市提供3D可视化方案，对探索信息技术发展应用具有重要意义。 Citybuilder是ThingJS旗下三维地图城市搭建工具，使用Citybuilder能将我们的geojson数据直接转化成对应的三维城市模型建筑，面数据可以在Citybuilder中选择为面图层样式，也可以选择建筑图层样式或者水系图层样式，除此之外还有点数据和线数据，这些都可以生成对应的点图层和道路图层样式。 作为ThingJS旗下搭建工具，Citybuilder和
ThingJS官方示例（九）：通过CityBuilder转出的url开发3D地图脚本
ThingJS的博客
01-13 1480
#前端开发##3D可视化##物联网# 明确虚拟场景的位置 Citybuilder导出二次开发 基础参数配置与修改 CityBuilder（城市级场景搭建工具）使用起来足够简单，非常符合设计人员的使用习惯，那么，辛辛苦苦做好的城市级场景，如何交付给开发，在后续的环节中灵活使用？ ThingJS平台早就考虑到了这个问题，统一了平台数据，支持CityBuilder转出url；平台加载地图组件之后，即可轻松二次开发。下面我们就来解析使用步骤，有任何问题请留言。 明确虚拟场景的位置 三维地球立足于世界坐标系，城
基于WebGL-ThingJS的的平面图导航（二）
weixin_34235371的博客
01-12 820
前言 基于WebGL架构的3D可视化平台—平面图导航（一）中已经完成了iframe面板与我们的3D场景的简单交互，下面我们继续完善并给iframe页加上鼠标悬停事件让iframe页的img标签和我们场景中的obj一起动起来。 实现 第一步，还是使用之前的场景接着上次的继续，先编写iframe页。给每一个img标签都加上onmouseove...
基于Node.js+vue室内设计类网站(程序+论文+开题报告)-计算机毕业设计
最新发布
妙芝学姐_毕设源码
08-20 659
为每个设计作品提供详细的发展前景与设计背景介绍，包括设计理念、灵感来源、所用材料、施工工艺等，增强用户对设计作品的认知与理解。
基于WebGL（ThingJS）的平面图导航,室内导航,3D聚焦
delouyou5212的博客
01-05 1182
前言利用CampusBuilder来搭建自己的虚拟世界过程有这样一个问题:如何快速聚焦到虚拟场景的某一位置。当然我们可以创建几个按钮对应查找我们需要去的位置（参照物）并聚焦，但是按钮并不是很炫酷也不能很好的反馈给我们一些信息。接下来我们就用平面导航图来解决这一问题。 实现第一步，使用CampusBuilder搭建模拟场景，CampusBuilder操作简单，分分钟就可以上手。这里为...
在WebGL场景中使用2DA*寻路
weixin_30758821的博客
08-17 265
　 这篇文章将讨论如何在一个自定义的地面网格上进行简单的2D寻路，以及确定路径后如何使用基于物理引擎的运动方式使物体沿路径到达目标地点。读者需要预先对WebGL和Babylonjs知识有一些了解，可以参考我录制的WebGL入门视频教程和翻译的官方入门文档，当然也可以用自己喜欢的其他方式来学习。 　　文章主要分成如下几部分： 　　1、自定义地面网格与寻路矩阵 　　2、生成Babylon格...
基于 WebGL（ThingJS）的室内平面图 2D/3D 导航 DEMO（Part 1） ...-附件资源
03-05
基于 WebGL（ThingJS）的室内平面图 2D/3D 导航 DEMO（Part 1） ...-附件资源
webgl(threejs)实现室内漫游-导航功能-应用于移动端
05-12
webgl(threejs)实现室内漫游-导航功能-应用于...后期结合室内蓝牙定位技术，来实现实时的室内导航。 具体的项目实现方式，解决的难点在文章里有写到。 https://blog.csdn.net/Highning0007/article/details/124718344
基于 WebGL（ThingJS）的室内平面图 2D/3D 导航 DEMO（Part 1）
阿里iOT
01-08 4398
  前言 利用CampusBuilder来搭建自己的虚拟世界过程有这样一个问题:如何快速聚焦到虚拟场景的某一位置。当然我们可以创建几个按钮对应查找我们需要去的位置（参照物）并聚焦，但是按钮并不是很炫酷也不能很好的反馈给我们一些信息。接下来我们就用平面导航图来解决这一问题。   实现 第一步，使用CampusBuilder搭建模拟场景，CampusBuilder操作简单，分分钟就可以上...
基于WebGL和Three.js的室内全景图互动展示全栈源码
03-25
项目概述：本全栈项目采用Python为主要开发语言，结合JavaScript、HTML和CSS，实现了基于WebGL技术的室内全景图互动展示。项目包含239个文件，其中包含154张jpg图像，33张png资源，21个JavaScript文件，12个Python...
基于webgl（threejs）技术的室内街景 / 全景图 demo，前后端（python）完整实现
11-09
基于webgl（threejs）技术的室内街景 / 全景图 demo，前后端（python）完整实现，功能主要包括：添加、编辑热点，材质切换，修改logo，移动端浏览、VR模式。全景图Demo（包添功能有：根据已有空间创建场景；增、删、...
curtainsjs是一个轻量级的WebGLJavaScript库可将HTML元素转换为交互式纹理平面
08-12
curtains.js是一个轻量级的WebGL JavaScript库，可将HTML元素转换为交互式纹理平面
html5在线可视化流程图简易绘图工具代码
11-24
html5在线可视化流程图简易绘图工具代码
ThingJS：如何一键生成3D城市地图
ThingJS的博客
07-21 5182
ThingJS除了PASS能力，还提供了CampusBuilder/CityBuilder等SAAS平台，用来实现3D地图的交互配置，属于ThingJS可视化搭建组件之一。而且，CityBuilder还支持JS代码编辑，无代码进行创作，让3D地图开发成为设计人员也能够上手、和开发人员良好协作的一款产品。 ThingJS提供了一个城市场景的搭建工具CityBuilder，可以自动搭建3D城市地图，不需要我们另外去使用3Ds max等工具来制作模型，否则的话项目开发复杂度会高很多。一个好消息就是，ThingJS
基于WebGL架构的3D可视化平台—平面图导航（一）
nioooom的博客
01-04 3922
前言 利用CampusBuilder来搭建自己的虚拟世界过程有这样一个问题:如何快速聚焦到虚拟场景的某一位置。当然我们可以创建几个按钮对应查找我们需要去的位置（参照物）并聚焦，但是按钮并不是很炫酷也不能很好的反馈给我们一些信息。接下来我们就用平面导航图来解决这一问题。 第一步：使用CampusBuilder搭建模拟场景，CampusBuilder操作简单，分分钟就可以上手。 ...
基于WebGL架构的3D可视化平台—实现小车行走路线演示
nioooom的博客
11-14 3818
刚接触[ThingJS](http://www.thingjs.com/guide/?m=sample)的时候，写的一个小车开进小区的演示，今天又看了教程中有movePath这个方法就重新写了一遍，其中也遇到了一些问题，尤其突出的问题就是小车过弯的尴尬表现。
html楼层效果,基于 HTML5 WebGL 的智慧楼宇可视化系统
weixin_29574211的博客
06-03 1872
前言可视化的智慧楼宇在 21 世纪是有急迫需求的，中国被世界称为“基建狂魔”，全球高层建筑数量位居首位，所以对于楼宇的监控是必不可少。智慧楼宇可视化系统更多突出的是管理方面的功能，即如何的全面实现优化控制和管理，节能降耗、高效、舒适、环境安全这样一个目的，可以这样说，判断一个建筑物是否具有智能建筑特点，要看它是否具有 IBMS 的系统集成，这是很重要的判定条件。IBMS 系统的建立必不可少需要硬件...
三层架构与web结合图解
m0_63217468的博客
10-22 1024
三层架构与web结合详细图解
基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控
weixin_34245082的博客
01-28 794
前言 智慧楼宇和人们的生活息息相关，楼宇智能化程度的提高，会极大程度的改善人们的生活品质，在当前工业互联网大背景下受到很大关注。目前智慧楼宇可视化监控的主要优点包括: 智慧化 -- 智慧楼宇是一个生态系统，像人一样拥有感知能力、自我判断能力以及控制能力。 绿色化 -- 绿色建筑在耗能、产能以及能源管理方面实现绿色化，楼宇安防实现绿色化监...
基于Webgl(ThreeJS)实现3D空间测距技术解析
WebGL（ThreeJS）实现的3D空间测量\测距功能的主要原理，是基于三维空间中的点、线、面的几何计算。首先，需要在3D场景中创建出物体的模型，然后根据相机视图和模型的位置关系，计算出物体在屏幕上的投影。接着，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值