Pfthb

Hello I'm new to babylonjs and I've been trying to make a constant shotgun spread pattern in babylon.js for a couple of days.

For the moment my approach consists of having a couple of lines ready to be displayed in an array :

 let sgPellets = [
 BABYLON.Mesh.CreateLines("lines", [
 shotgunPosition,
 meshFound.pickedPoint
 ], this.Player.game.scene),
 BABYLON.Mesh.CreateLines("lines", [
 shotgunPosition,
 meshFound.pickedPoint
 ], this.Player.game.scene),
 ] 

where shotgunPosition is the absolute position of the shotgun mesh in the world and meshFound.pickedPoint is the position of where I'm aiming at (on a mesh).

So I can draw a line (the first of the array in this case) between the shotgun mesh and the mesh I click on.

Now for the second line, I want it to rotate a bit on the y axis from the first (which is exactly where I'm aiming at) so:

 for(let k=0; k<sgPellets.length; k++)
 sgPellets[k].setPivotPoint(shotgunPosition);
 sgPellets[k].isPickable = false;
 switch(k)
 case 1:
 sgPellets[k].rotation.y += 0.1
 break
 
 

It does work well when I look on the sides

but not when I look up or down.

I think I'm missing something on the math side.
I've also tried using other rotation methods, for the same kind of result.

Does anyone have any hints on how to make the angle constant between the two lines ? Thank you.

Thank you for you're answer ! You guessed it, I am using scene.pick. I've tested you're approach and it works pretty well, I was also able to create a cone between the barrel and the point picked in the scene. But i wasn't really satisfied. Though I think you're method wouldn't work at making a consistant pattern wherever the picked point is, so I ended up doing something else. I've created a second "fake" camera which rotate and position exactly where the real one is thanks to :

fakeCamera.rotationQuaternion = BABYLON.Quaternion.RotationYawPitchRoll(camera.rotation.y, camera.rotation.x, camera.rotation.z)

This way I could add a .rotationQuaternion to the fake one with position and converted rotation from the real one (I couldn't add a quaternion for the real camera, It would messed up the controls). In the end I was able to position each rays according to the pickedPoint in the scene and the rotationQuaternion value of the fake camera.

I'm guessing you're using scene.pick to get meshFound.pickedPoint (if you are not then ignore this answer) and the function takes in a x and y coordinate of a point on the screen then turns that point into a point in 3d space.

I'm guessing your doing something like:

var width = scene.getEngine().getRenderWidth();
var height = scene.getEngine().getRenderHeight();
var meshFound = scene.pick((width / 2), (height / 2), null, false, camera);

And that will get the same point in the middle of the screen every time, but this is what I'm suggesting:

var weaponAccuracy = 200;
var numShotgunPelletsPerBullet = 10;
var width = scene.getEngine().getRenderWidth();
var height = scene.getEngine().getRenderHeight();
for (var i = 0; i < numShotgunPelletsPerBullet; i++) 
 var accuracyX = Math.round((Math.random() * weaponAccuracy) - (weaponAccuracy / 2));
 var accuracyY = Math.round((Math.random() * weaponAccuracy) - (weaponAccuracy / 2));

 var meshFound = scene.pick((width / 2) + accuracyX, (height / 2) + accuracyY, null, false, camera);
 console.log(meshFound.pickedPoint);

This will pick a random point in a 200 by 200px square around the middle of the screen 10 times.

If you want to change the accuracy increase or decrease weaponAccuracy.

And if you want to change the number of pellets in each bullet change numShotgunPelletsPerBullet.