解决方案A：标记每个步骤

Question

我试图用threejs绘制射弹运动的轨迹。 Qwhich是最好的方法吗？这是一个例子： 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);

请帮助。感谢。

Answer 1

跟踪轨迹有几种方法。在这里，除了解决方案之外，我还将向您展示您所期望的行为的替代方案。

解决方案A：标记每个步骤

在您的Physijs应用程序中，您应该在update has finished时进行scene.simulate调用和事件监听器，以便您可以在渲染过程中单独循环物理。添加一些额外的代码以将每一步的标记放入场景中并不是很难，最好不要包含太多额外的顶点（即不太复杂）：

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

如何用threejs绘制网格的轨迹

1 个答案:

解决方案A：标记每个步骤

解决方案B：动态箭头