我正在試圖用threejs繪製彈道運動的軌跡。 Q是最好的辦法嗎？這裏是它的一個例子： http://www.physgl.org/index.php/welcome/logout嘗試拋射運動演示，然後單擊運行。如何使用threejs繪製網格的軌跡

我想通過在移動時獲取網格的位置來描繪跟在先前運動之後的第二個網格，但那並不奏效。這是我試圖（此代碼）獲取移動對象的位置：

box.geometry.computeBoundingBox（）;

var boundingBox = box.geometry.boundingBox; 

    var position = new THREE.Vector3(); 
    position.subVectors(boundingBox.max, boundingBox.min); 
    position.multiplyScalar(0.5); 
    position.add(boundingBox.min); 

    position.applyMatrix4(box.matrixWorld); 

    console.log(position.x + ',' + position.y + ',' + position.z);

請幫忙。謝謝。

來源

2013-08-22 juanpscotto

你需要證明你已經嘗試過的情況，並詢問具體的問題。 – WestLangley

要設置'mesh2'的位置，所有你需要做的是'mesh2.position.getPositionFromMatrix（projectile.matrixWorld）;' – WestLangley

你想要什麼？爲什麼你需要第二個網格？試着去設置球的位置？ – Ovilia

有幾種跟蹤軌跡的方法。在這裏，除了解決方案之外，我還會向您展示一些您想要的行爲的替代方案。

解決方案A：馬克每一步

在你的應用程序Physijs，你應該有一個scene.simulate呼叫和事件偵聽器時update has finished，這樣就可以通過物理環路分開渲染過程。它不應該太難加一點額外的代碼來代替一些標誌排序每一步到場景中，優選不含有太多額外的頂點（即不是太複雜）：

var markSize = 2; // Tweak this to set marker size 

var markGeom = new THREE.BoxGeometry(markSize, markSize, markSize, 1, 1, 1); 
var markMat = new THREE.MeshBasicMaterial({color: "blue"}); 

scene.addEventListener("update", function(){ 

    // Generate a box where projectile was last moved 
    var marker = new THREE.Mesh(markGeom.clone(), markMat); 
    marker.position.copy(projectile.position); 

    // Display position! 
    scene.add(marker); 

    // Keep simulation going 
    scene.simulate(undefined, 2); 
});

在此代碼中，projectile是引用您的彈丸Physijs網格的變量。請注意，您不應該爲您的渲染循環設置此格式，因爲您可能會使用，當窗口（或選項卡）離焦時，它會停止調用渲染循環。當某些客戶做到這一點並且弄亂了軌跡時，這並不令人愉快。另外，這直接綁定到你的Physijs步進，這使得它非常精確。

解決方案B：動態箭頭

這可能是你最想要的是什麼。它創建一個箭頭，它將顯示彈丸的方向和速度：

// Constructor: direction, origin, length, color in hexadecimal 
var arrowMark = new THREE.ArrowHelper(
    new THREE.Vector3(0, 1, 0), projectile.position, 0, 0x884400); 

function drawDir(){ 
    var pvel = projectile.getLinearVelocity(); 

    // Update arrow 
    arrowMark.position.set(projectile.position); 
    arrowMark.setDirection(pvel.normalize()); 
    arrowMark.setLength(pvel.length()); 
}

是的，那樣很容易。 projectile再一次引用了你的彈丸Physijs網格。每撥打一次電話，只需致電drawDir，您就可以輕鬆前往！

的THREE.ArrowHelper文檔：https://threejs.org/docs/#Reference/Extras.Helpers/ArrowHelper

來源

2016-10-22 17:41:28 XavCo7

如何使用threejs繪製網格的軌跡

回答

解決方案A：馬克每一步

解決方案B：動態箭頭

相關問題