Three.js-每x秒生成一個對象並向前移動每個對象（沿着Z）

Question

我正在使用Three.js制作無盡的亞軍風格游戲。 游戲場景和構想的基本設置是一條漫長的道路，汽車駛向您，您必須避開它們。 我仍處於制作此游戲的初期階段，所以我的第一個問題是我需要英雄角色（躲避汽車的英雄）看起來像他在前進，同時使汽車看起來像他們正在（更快）向英雄角色發展。

我的想法是創建路標對象（路中間的白線），並使其以一定的速度移向處於（0，0）的英雄角色。

我已經成功創建了一個路帶對象，並將其放置在路的最后面（ RoadStrip.mesh.position.z = -5000; ）。 這是我的代碼：

var objectRoadStrip = function() {
    this.mesh = new THREE.Object3D();
    this.mesh.name = "roadStrip";

    geomRoadStrip = new THREE.BoxGeometry(20, 11, 300);
    matRoadStrip = new THREE.MeshPhongMaterial({color: Colors.white});

    RoadStrip = new THREE.Mesh(geomRoadStrip, matRoadStrip);
    RoadStrip.name = 'roadStripName';
    this.mesh.add(RoadStrip);
}

function createRoadStrip() {

    new objectRoadStrip();
    RoadStrip.position.y = -72.5;
    RoadStrip.position.z = -5000;

    scene.add(RoadStrip);

}

在render()函數中，該函數循環遍歷每幀，並在最后一次調用以確保相機和場景更新每幀時，每次render() ，我都能成功地將該條帶沿z軸向前移動10 render()稱為。 我還添加了一些代碼，以便當RoadStrip觸摸（0,0）時將其從場景中刪除。 請參閱以下內容：

function render(){

    // moves RoadStrip towards (0,0). When it reaches z = -150, remove that strip from the scene

    if (RoadStrip.position.z <= -150) {
        RoadStrip.position.z += 10;
    } else {
        scene.remove(RoadStrip);
    }

    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

我還向init()函數中添加了以下代碼，該函數在創建場景時創建RoadStrip ，並繼續每10秒創建一次RoadStrip （大約每當RoadStrip達到（0,0）時）。

createRoadStrip();
setInterval( function() {
    createRoadStrip();
}, 10000);

這與我要達到的效果類似，但是請閱讀下面的“問題”部分，在其中解釋我的真正需求。

問題

我需要每隔x秒鍾產生一個RoadStrip （這仍然待我確定，但是現在可以說3秒鍾）。 每個RoadStrip需要獨立移動到（0,0）， z += 10 。 當RoadStrip實例達到（0,0）時，應將其從場景中移除，但是無論其他RoadStrips在原始位置每3秒（ z = -5000 ），都應繼續生成。

我的嘗試/解決方案構想

我已經做了大量的閱讀工作，從其他人無休止的亞軍游戲中尋找代碼，並閱讀了SO答案，但似乎沒有任何效果。 以下是我嘗試過的一些方法，或者一些我認為可行的方法，但我做得不好/對以下內容沒有很好的理解：

1. 想法：不用在setInterval內調用createRoadStrip()函數， RoadStrip每3秒將RoadStrip對象推到數組中，然后調用該數組並沿z軸將數組移動+= 10 。
2. 可能的解決方案幫助：我嘗試將setInterval更改為少於2秒而不是10秒。 這導致RoadStrip沿Z軸按預期方式移動了2秒鍾，但是，當然，在2秒RoadStrip成了另一個RoadStrip ，因此第一個RoadStrip停止沿Z軸移動，而新的RoadStrip停止了移動（持續2秒鍾）。以及此過程無限重復。 這非常接近我的需求，但是我需要每個RoadStrip繼續移動，並在到達（0,0）時將其從場景中移出

感謝您抽出寶貴的時間閱讀我的問題，期待您的解決方案！

類似風格游戲的示例： 第一 ， 第二 。

Answer 1

感謝@ prisoner849及其到該線程的鏈接，我設法找到了解決問題的方法，因此，我在這里為將來遇到相同問題的任何人寫一個答案！

我通讀了該線程，並找到了該JSFiddle的鏈接，其中包括一個與我嘗試實現的動畫相似的成功動畫，並且我強烈建議研究該JSFiddle的代碼以完全理解如何創建無窮的跑步者效果。

這是有關如何執行此操作的詳細說明：

不必無限創建對象並使它們向前動畫直到到達終點然后消失（就像我最初認為的正確解決方案一樣），您必須創建對象數組並對其進行動畫處理。

這是我執行此操作的代碼：

var roadStripArray = []

function objectRoadStrip() {

    for (var i = 0; i < 100; i++) {
        geomRoadStrip = new THREE.BoxGeometry(20, 11, 500);
        matRoadStrip = new THREE.MeshPhongMaterial({color: Colors.white});

        RoadStrip = new THREE.Mesh(geomRoadStrip, matRoadStrip);

        RoadStrip.position.set(0, -72.5, -150 - i * 1250);
        RoadStrip.receiveShadow = true;

        scene.add(RoadStrip);
        roadStripArray.push(RoadStrip);
    }

}

for循環的代碼i < 100因為我的路很長，因此需要很多條帶

這段代碼：

RoadStrip.position.set(0, -72.5, 0 - i * 1250);

將每個條帶的位置設置為彼此不同，數字1250是每個條帶之間的距離

創建對象之后，必須在render()函數中為它們設置動畫。 您必須將它們設置為沿Z軸移動，然后創建一條if語句，其中說：“如果任何條帶到達終點（您希望其消失的位置），請將其位置重新設置為起點（即這對我來說是一條道路），這意味着您不斷循環遍歷對象數組，因此不會無限創建它們。

這是帶狀動畫的代碼：

// loop that runs every frame to render scene and camera
var clock = new THREE.Clock();
var time = 0;
var delta = 0;
var direction = new THREE.Vector3(0, 0, 1);
var speed = 2000; // units a second - 2 seconds

function render(){
    requestAnimationFrame(render);

    delta = clock.getDelta();
    time += delta;

    roadStripArray.forEach(function(RoadStrip){
        RoadStrip.position.addScaledVector(direction, speed * delta);
        if (RoadStrip.position.z >= 10000) {
            RoadStrip.position.z = -10000;
        } else {
        }
    });
    renderer.render(scene, camera);
}

移動每個小條的代碼是：

RoadStrip.position.addScaledVector(direction, speed * delta);

您可以在此處閱讀更多有關.addScaledVector的信息 ，但本質上，這是使該帶動畫化的代碼。

然后， if語句檢查地帶是否觸及10000 （即路的盡頭），如果觸及，則將地帶的位置設置為-10000 。 然后，該條帶將沿着Z軸移向終點。

我們將所有這些包裝在forEach函數中，以遍歷數組中的每個RoadStrip並以相同的方式對其進行動畫處理。 我們需要分別對它們進行動畫處理，以便我們可以檢測其中之一何時到達路的盡頭。

謝謝，希望對您有所幫助！

Answer 2

通常，這種情況最好用某種類似於粒子系統的方法來處理：您不會在場景中連續插入/刪除對象，而是在初始化過程中創建了一組對象，比如說玩家只能看到10條道路條紋。一次，您的游戲邏輯總是移動這10條條紋，並根據需要更新位置，一旦一條條紋超出視野，則在開始時將其回收，依此類推。 我認為您不會找到能夠完全滿足您需求的固定解決方案，您需要提出最適合您游戲的更新邏輯。

我有自定義的粒子系統的例子存在 。 一旦粒子超出范圍，當它需要發射新粒子時，該粒子便可供系統使用。 池中的粒子數始終是恆定的，用戶可以在此處定義其目的僅僅是為了進行測試。 可以使用類似的方法來操縱您的無限條紋。 該代碼的存儲庫位於https://github.com/leefsmp/Particle-System，但是您可以在那里找到許多其他粒子系統實現，這是我的特定需求。

希望能有所幫助。