基于WebGL架构的3D可视化平台—实现汽车行走路线演示-低调大师

基于WebGL架构的3D可视化平台—实现汽车行走路线演示

2018-11-26 591

小车行走路线演示New VS Old

刚接触ThingJS的时候，写的一个小车开进小区的演示，今天又看了教程中有movePath这个方法就重新写了一遍，其中也遇到了一些问题，尤其突出的问题就是小车过弯的尴尬表现。

再看看New版本，AE86过弯不再笨拙顺畅无比，New版演示地址。

第二张效果图上可以看到由点连起来的路线，我的AE86也是严格按照路线行进的，相比于Old版本过弯的时候舒畅多了。Old版本是用setTimout()，rotateY()，moveTo()方法设置了几个点跑出来的。New版本放弃了这种办法，这种过弯实在让人看着不舒服，也不符合现实世界（排除醉酒驾驶司机）。下面就说一下New版本。

第一步，进入ThingJS在线开发，将场景地址替换成我们今天要用的，也可以自己去搭一个场景，campusBuilder下载地址。

/**
 * 说明：创建App，url为场景地址（可选）
 */
var app = new THING.App({
	//场景地址
    url: 'http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/2018-10-30-17-20-23'     
});

　　第二步，在模型库里挑选一个你喜欢的车，种类丰富任你选择。

app.create({ 
   type: 'Car', 
   name: 'Car01',
   angle: 90, // 旋转 
   //这里我选了一台黑车，没找到AE86
   url: 'http://model.3dmomoda.cn/models/c6ed424627234a298c1921950eb8534c/0/gltf/', 
   //位置
   position: [-32, 0, 26.2],
   complete: function () {
       console.log('Black Car !');
   }
});

第三步，创建小车的行进路线和演示按钮。

app.on('load', function () {

    // 创建blackCar行进路线
    var points = [];
    for (var x = -32, y = 0, z = 26.2 ; x <= 28; x += 4) {
        points.push([x, y, z]);
    }
    var radius = 1.75;
    for (var degree = 0, y = 0; degree <= 180; degree += 20) {
        var x = Math.sin(degree * 2 * Math.PI / 360) * radius + 28.5;
        var z = Math.cos(degree * 2 * Math.PI / 360) * radius + 24.45;
        points.push([x, y, z]);
    }
    for (var x = 27.5, y = 0, z = 22.7 ; x >= -6; x -= 4) {
        points.push([x, y, z]);
    }
    for (var degree = 0, y = 0; degree >= -90; degree -= 20) {
        var x = Math.sin(degree * 2 * Math.PI / 360) * radius -5.5;
        var z = Math.cos(degree * 2 * Math.PI / 360) * radius + 20.95;
        points.push([x, y, z]);
    }
    for (var x = -7.2, y = 0, z = 20.25 ; z >= 6; z -= 2) {
        points.push([x, y, z]);
    }

    //创建轨迹线
    line = app.create({
        type: 'Line',
        color: 0xFFFF00, // 轨迹线颜色
        dotSize: 2, // 轨迹点的大小
        points: points,
    })
    
     THING.widget.Button('车辆路线', play);
});

　　最后一步，让小车动起来创建play()方法。

function play() {
    var car = app.query('Car01')[0];
    car.movePath({
        'path': line.points, // 轨迹路线
        'time': 10000, // 移动时间
        'orientToPath': true, 
    });
    app.camera.lookAt(car);
    
    // app.camera.followObject({
    //     object:car,
    // });
}

　　做到这里小车已经可以动起来了，但是这个视角并不好，下面介绍一下摄像机中的followObject(params)。
API地址

创建一个Car类继承THING.BaseObject，将物体类型转换成Car类型

//创建Car类
class Car extends THING.BaseObject{
    constructor(app) {
        super(app);
    }
}
THING.Utils.addCastType('Car', /Car/);  
THING.factory.registerClass('Car', Car);

//加到play()
app.camera.followObject({
        object:car,
    });

　　下图是加了摄像机跟随物体的效果

短短80行代码，其中我也遇到了不少问题划重点的就是app.camera.followObject()中object的类型问题，还有就是模型库里有一些车的模型比较奇怪，比如下图。

以下是完整代码

//加载场景代码
var app = new THING.App({ 
    // 场景地址
    "url": "http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/2018-10-30-17-20-23",
    //背景设置
    
});

// 创建Car
app.create({ 
   type: 'Car', 
   name: 'Car01',
   angle: 90, // 旋转 
   url: 'http://model.3dmomoda.cn/models/c6ed424627234a298c1921950eb8534c/0/gltf/', 
   //位置
   position: [-32, 0, 26.2],
   complete: function () {
       console.log('Black Car !');
   }
});
//创建Car类
class Car extends THING.BaseObject{
    constructor(app) {
        super(app);
    }
}
THING.Utils.addCastType('Car', /Car/);  
THING.factory.registerClass('Car', Car);

person.on('load',function())

app.on('load', function () {

    // 创建blackCar行进路线
    var points = [];
    for (var x = -32, y = 0, z = 26.2 ; x <= 28; x += 4) {
        points.push([x, y, z]);
    }
    var radius = 1.75;
    for (var degree = 0, y = 0; degree <= 180; degree += 20) {
        var x = Math.sin(degree * 2 * Math.PI / 360) * radius + 28.5;
        var z = Math.cos(degree * 2 * Math.PI / 360) * radius + 24.45;
        points.push([x, y, z]);
    }
    for (var x = 27.5, y = 0, z = 22.7 ; x >= -6; x -= 4) {
        points.push([x, y, z]);
    }
    for (var degree = 0, y = 0; degree >= -90; degree -= 20) {
        var x = Math.sin(degree * 2 * Math.PI / 360) * radius -5.5;
        var z = Math.cos(degree * 2 * Math.PI / 360) * radius + 20.95;
        points.push([x, y, z]);
    }
    for (var x = -7.2, y = 0, z = 20.25 ; z >= 6; z -= 2) {
        points.push([x, y, z]);
    }

    //创建轨迹线
    line = app.create({
        type: 'Line',
        color: 0xFFFF00, // 轨迹线颜色
        dotSize: 2, // 轨迹点的大小
        points: points,
    })
    
     THING.widget.Button('车辆路线', play);
});

function play() {
    var car = app.query('Car01')[0];
    car.movePath({
        'path': line.points, // 轨迹路线
        'time': 10000, // 移动时间
        'orientToPath': true, 
    });
    //app.camera.lookAt(car);
    
    app.camera.followObject({
        object:car,
    });
}

---------------------
作者：extends Thread
来源：CSDN
原文：https://blog.csdn.net/nioooom/article/details/84069266
版权声明：本文为博主原创文章，转载请附上博文链接！

微信关注我们

原文链接：https://yq.aliyun.com/articles/681662

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

企业级分布式应用服务 EDAS 邀您参加「有奖评测」

一、这是个什么样的评测活动？ EDAS 于近日发布了重大更新，增强了对主流微服务框架的原生支持，实现SpringCloud & Dubbo用户代码零侵入就能迁移至EDAS，降低开发者的接入门槛，提升体验，打造闭环高效的研发运维体系。同时，发布EDAS Serverless公测版本，成为国内首个基于Kubernetes、并支持微服务框架的无服务器容器。现诚邀您参与新版本试用。二、参与评测活动，我将可以获得什么？极客评测大奖（3名）：价值800元（淘宝心选旅行箱+淘宝心选商务背包）x 1+阿里云通用代金券400元 x 2 先锋评测大奖（7名）：价值499元天猫精灵X1 x 1+阿里云通用代金券300元 x 2 优秀评测大奖（15名）：阿里云中间件定制卫衣 x 1+《码出高效：Java 开发手册》x 1+阿里云通用代金券50元 x

2018-11-27

686

Java程序员面试经：面试前到底该不该刷题以及面试前该如何准备

引言写这篇文章的原因依然是来自于群里的一次讨论，在小编的交流群里，有一个妹子最近正在准备面试，她在群里问了很多技术问题。很明显，这些问题都是一些面试题上面的题目，通俗的说，她是在面试前刷题。在小编看来，面试前刷题这件事真的是很愚蠢的一件事，因此小编就想写一篇文章来提醒一下大家，面试前千万不要去刷题，百害而无一利。当然，应届生不在本文的讨论范围内，因为应届生在面试之前，大部分都有笔试，刷题还是很有必要的。因此，本文中如无特殊说明的话，指的都是非应届生的程序员，换句话说，本文所讨论的内容主要针对有至少一年以上工作经验的人。面试前到底该不该刷题在讨论该不该刷题这个问题之前，首先咱们来看看，到底为什么会有那么多人在面试前会去刷题。这个问题的答案其实很简单，大部分情况下，都是因为面试者在面试前心里没底，因此有不少人会选择去刷刷题，来提高自己的自信。而且，基本上所有刷题的人，内心多多少少都有侥幸心理，以期在面试的时候，可以刚好被问到刷过的题，然后获得入职的资格。不可否认的是，确实有那么一些人，是真的依靠刷题而获得了入职的机会。世界这么大，总会有幸运的人的。但是，小编想说的是，面试并不...

2018-11-27

609

发表评论

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。