Babylon.js - Solid Particle System - Move In Facing Direction - animation

I want to emit a bunch of particles inside of a sphere, then connect them all up with lines and make everything move around.
I am at the point where I want to animate the particles of the Solid Particle System.
They are currently facing different directions, because of this line inside of the SPS.initParticles function:
particle.rotation = new BABYLON.Vector3(getRandomArbitrary(0,360), getRandomArbitrary(0,360), getRandomArbitrary(0,360));
Now i want to move them in the direction they are facing.
My theoretical thinking would be to get the vector the particle is facing, multiply it by some factor to modulate the speed and then add that to the old position in the update function.
However
SPS.particles[0].rotation
returns Euler angles, if I am not mistaken and I have not found a .toVector method.
Is there either a cleverer way to do this or have I missed something obvious?
I made a playgound, if it helps: https://www.babylonjs-playground.com/#CIN41K

Related

Three.js: Make raycaster's direction the same as object's

all!
I'm currently making a game in THREE.js and while I've got the 'vertical' collision with the ground sorted with a raycaster, I am having trouble with horizontal collision. I've consulted a few tutorials, but they don't do what I want them to.
Basically, I've got a load of cubes. I've given them a random y-axis rotation and used translate to make them move 'forward' - pretty basic stuff. How do I get a raycaster to point the same direction as the cube, almost like a line sticking out of its 'nose'? i.e. how do I get a raycaster's direction to copy that of an object?
It's been a while since I've been on here, but kind regards anyway,
Matthew

Achieve desired value after a 3D die roll without face texture swapping

I'm making a 3d dice game and came to one issue I can't wrap my head around so I'm turning to you for help.
In the scene/world (using threejs with cannonjs) I have a plane and one die, which I'm throwing on the plane (screenshots here pre-roll http://prntscr.com/l9rat5, result http://prntscr.com/l9rdeb). All works fine, until I want to throw some specific value on a die like 1 for example.
Since I'm using loaded models instead of texture images for faces of the cube, I cannot handle this just by changing faces of the cube in threejs (since model has 100s of them). Therefore I was hoping I can achieve this by somehow changing the initial quaternion of the body (kind of pre-rotate it) so the die falls on a specific side. The die mesh is just following the body position and quaternion.
I have these questions:
Is this even possible to do? Maybe when I change quaternion pre throw it will result always in different final quaternion, which I can not determine? If it is not possible to do with quaternions, any tips?
If it is possible, how do I figure out by which quaternion do I need to multiply my initial one to get desired result value 1? I have available the final quaternion and I know which values are on each face from emulated throw so I was trying to play with quaternion inverse but no luck.
If I just rotate the initial body so that face 1 rotates to the result face (eg. 6) it works in some cases (i throw 1 when emulated result was 6), but when the throw gets more complicated (more rotations) it is not working of course since I'm not counting on all possible rotations.
If it is not clear what I mean let me know pls.
Thanks a lot
m
First of all, make sure that you use fixed step simulation. You do this by passing 3 arguments to world.step() instead of one. This will make sure that your simulation will behave the same every time, regardless of frame rate.
Also make sure that your initial position, velocity and force of the die is the same every throw.
If you construct the quaternion using the built in cannon functions, like .setFromAxisAngle(), all should be good... Use .setFromAxisAngle() with even 90-degree angles around different axis. Why bother using quaternion inverse?
If you want an alternative way of rotating the die, put the mesh below an empty parent mesh in your scene. During simulation, copy the cannon.js output to the parent mesh. Then rotate the child die mesh to get the desired initial (and end) rotation.
For the note, I solved it by rotating just the geometry (not mesh) in threejs and not touching the quaternion of the body at all.

To control 3D type Snake Game's movement when turning by WebGL

I hope to create a 3D type Snake game by Babylon or THREE.js.
Here's the picture about how i want the snake to move when the snake to turn left or turn right.
movement comparison
That is, I want the snake to move more "smoothly", just like the car's movement when it turn left or turn right.
Do I need skeleton animation to achieve this goal? If so, could you give me a solution/suggestion about how to implement it.
Another potential (likely simpler) way to do it would be to use a particle system. When snake grows you could just change the params on the particle system, then the engine would be responsible for handling smoothing.
Particle system would just need to adhere to the following rules:
Particles shoot out in one direction from the head mesh.
Particles minimum_lifetime = maximum_lifetime
Particle minimum_speed = maximum_speed
Then as it grows in size you just increment the particles direction. And you then just compare head position to it's particle (tail) positions to check for collisions.
The default particle system in BJS doesn't as far as I know support collisions officially, but you could query the positions of the particles to check for collisions, or use the solid particle system which allows for physics. (SPS is probably the best way to go in the end).
Here is an example playground however just to demonstrate the movement.
https://playground.babylonjs.com/#PLRKFW#1

How to rotate a model on a plane?

I am using a plane geometry to represent a terrain model with different "y" values(altitude). Also using the raycaster function I am able to move the model on the plane.
I need a way to rotate the model a be parallel with the current face its on without changing its path orientation.
Is there a way to define rotation by a face of a geometry?
theCorrect me if I'm wrong here, it sounds like you want to have both local (on the face) and global (in the direction of your "path orientation") rotations integrated here. This is, in general, one of those tricky and somewhat context-specific problems that will require you to mix two different sources of rotation. In a typical Euler-style rotation, it sounds like you want to rotate around Y according to the path (I'm assuming the path is in top-down 2D here -- it's these assumptions tat make the problem impossible to definitively answer!), while rotating around X and Z according to the normal of the surface. Try taking assembling a THREE.Euler that way -- does it get you in the neighborhood?

OpenGL : Line jittering with large scene and small values

I'm currently drawing a 3D solar system and I'm trying to draw the path of the orbits of the planets. The calculated data is correct in 3D space but when I go towards Pluto, the orbit line shakes all over the place until the camera has come to a complete stop. I don't think this is unique to this particular planet but given the distance the camera has to travel I think its more visible at this range.
I suspect its something to do with the frustum but I've been plugging values into each of the components and I can't seem to find a solution. To see anything I'm having to use very small numbers (E-5 magnitude) for the planet and nearby orbit points but then up to E+2 magnitude for the further regions (maybe I need to draw it twice with different frustums?)
Any help greatly appreciated...
Thanks all for answering but my solution to this was to draw it with the same matrices that were drawing the planet since it wasn't bouncing around as well. So the solution really is to code better really, sorry.

Resources