I'm trying to draw the trajectory of a projectile motion with threejs. Which is the best way to do that? Here is an example of it: http://www.physgl.org/index.php/welcome/logout Try the projectile motion demo and click run.
I thought of drawing a second mesh that follows the previous movement by obtaining the position of the mesh as it's moving, but that did not work. This is what I tried (this code) to get the position of the object moving:
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);
Please Help. Thanks.
There are a few ways to go about tracking a trajectory. Here, I will show you some alternatives to your desired behavior, in addition to its solution.
Solution A: Mark each step
In your Physijs application, you should have a
scene.simulate
call and an event listener when the update has finished, so that you can loop through physics separately from the rendering process. It shouldn't be too hard to add a little extra code to place a marker of some sort every step into your scene, which preferably doesn't contain too many extra vertices (i.e. not too complex):In this code,
projectile
is the variable referencing your projectile Physijs mesh. Note that you shouldn't format this for your rendering loop, as you might be usingrequestAnimationFrame
, which stops calling your rendering loop when the window (or tab) goes out of focus. It won't be pleasant when some client does that and gets a messed up trajectory. Plus, this tied directly into your Physijs stepping, which makes it extremely precise.Solution B: Dynamic arrow
This is probably what you wanted in the first place. It creates an arrow which will show the direction and speed of the projectile:
Yeah, that was kind of easy. Once again,
projectile
is referencing your projectile Physijs mesh. Just calldrawDir
every render call and you're good to go!The
THREE.ArrowHelper
documentation: ArrowHelper