我正在试图用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：动态箭头

相关问题