小車行走路線演示New VS Old

剛接觸ThingJS的時候，寫的一個小車開進小區的演示，今天又看了教程中有movePath這個方法就重新寫了一遍，其中也遇到了一些問題，尤其突出的問題就是小車過彎的尷尬表現。

先給大家看看Old版本，Old版演示地址。

再看看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
版權宣告：本文為博主原創文章，轉載請附上博文連結！