【问题标题】：How to draw the trajectory of a mesh with threejs如何用threejs绘制网格的轨迹
【发布时间】：2019-11-20 22:21:40
【问题描述】：

我正在尝试用threejs绘制弹丸运动的轨迹。最好的方法是什么？这是一个例子： http://www.physgl.org/index.php/welcome/logout尝试弹丸运动演示并点击运行。

我想通过获取网格移动时的位置来绘制第二个网格，以跟随先前的移动，但这没有奏效。这是我尝试（这段代码）来获取移动对象的位置：

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);

请帮忙。谢谢。

【问题讨论】：

您需要展示您的尝试，并提出具体问题。
要设置mesh2的位置，只需mesh2.position.getPositionFromMatrix( projectile.matrixWorld );
你想要什么？为什么需要第二个网格？尝试获取并设置球的位置？
我试图绘制一个弹丸的轨迹，就像这个例子一样，我不知道这是最好的方法，我只是想创建一个跟随弹丸的球。

标签： three.js physijs

【解决方案1】：

有几种方法可以跟踪轨迹。在这里，除了解决方案之外，我还将向您展示一些您想要的行为的替代方案。

解决方案 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 网格的变量。请注意，您不应该为您的渲染循环格式化它，因为您可能正在使用requestAnimationFrame，当窗口（或选项卡）失焦时，它会停止调用您的渲染循环。当某些客户这样做并获得混乱的轨迹时，这将不会令人愉快。此外，这与您的 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 文档：ArrowHelper

【讨论】：