I tried it here :
Something like that?
if(event.key == "ArrowUp" ){
const wm = _raptor.getWorldMatrix();
const inv = BABYLON.Matrix.Invert(wm);
const rotation = new BABYLON.Vector3(0, 0.01, 0)
const real = BABYLON.Vector3.TransformNormal(rotation, inv);
_raptor.rotation = real;
return;
}
if(event.key == "ArrowDown" ){
const wm = _raptor.getWorldMatrix();
const inv = BABYLON.Matrix.Invert(wm);
const rotation = new BABYLON.Vector3(0, -0.01, 0)
const real = BABYLON.Vector3.TransformNormal(rotation, inv);
_raptor.rotation = real;
return;
}
local axis animation | Babylon.js Playground (babylonjs.com)
Almost, but after apply rotation the translation movement is not over local axis (i want a evase maneuvering)
and, after the first animation the ship must start next animation in the las position.
i done really it, but, the camera turns crazzy at zoom in or zoom out, i used animeJS, i suppose that after changed local axis the gameplay camera was affected… i want use BABYLON.Animator hope not affecting camera.
my attempt with animeJS
i am using V 6.49 (too late for change)
animator definition :
class PlayerShip {
//...
vadeRotatingX(_dir = 0){
// return;
// console.log( "this.speed.gear ");
// console.log( this.speed.gear );
// if( this.speed.gear == 0 )return;
if( this.maneuvering )return;
this.maneuvering=true;
if( _dir == 1 ){
this.slip.angle_target = 360;
this.slip.dx = 0.01;
}else if( _dir == -1 ){
this.slip.angle_target = -360;
this.slip.dx = -0.01;
}
this.slip.angle=0;
//animator animejs
this.animator = anime({
targets: player.slip,
angle:this.slip.angle_target,
duration: 1000,
easing: 'easeInOutQuad',
loop: false,
autoplay: true,
update: function() {
console.log( "rotation mesh ",player.slip.angle);
// enemies_gm[this.parent_index].shield.material.alpha = anim.alpha;
},
complete: function() {
player.maneuvering=false;
}
});
}//end of evade rotating x
}
In Player ship update()
if( !this.maneuvering ){
this.mesh.rotation.x = BABYLON.Tools.ToRadians(this.slip.angle);
gm_camera_flow.x = this.pos.x;
gm_camera_flow.z = this.pos.z;
}else{
// console.log( "player no rotax" );
let _vx = (this.speed.traslation / 5)*game.subtract;
this.mesh.translate(BABYLON.Axis.X, _vx, BABYLON.Space.LOCAL);
this.mesh.translate(BABYLON.Axis.Z, 0.05, BABYLON.Space.LOCAL);
let _rad = BABYLON.Tools.ToRadians(this.slip.angle);//fails, i need set rotation NOT add to actual rotation
// let _rad = BABYLON.Tools.ToRadians(1);
this.mesh.rotate(BABYLON.Axis.X, _rad, BABYLON.Space.LOCAL);
this.mesh.computeWorldMatrix(true);
this.mesh.getAbsolutePosition();
let _bpos = this.mesh.getBoundingInfo().boundingBox.centerWorld;
this.mesh.position = _bpos;
this.pos.x = _bpos.x;
this.pos.z = _bpos.z;
this.position.x = _bpos.x;
this.position.z = _bpos.z;
this.position.y = gm_camera_flow.y;
gm_camera_flow.x = _bpos.x;
gm_camera_flow.z = _bpos.z;
gameplay_camera.setTarget(_bpos);
}
Done :
class Playermamba {
//....
evadeRotatingX(_dir = 0){
if( this.maneuvering )return;
this.maneuvering=true;
this.data_maneuvering.radio=0.0;
this.data_maneuvering.dir=_dir;
// this.data_maneuvering.px = this.pos.x;
// this.data_maneuvering.pz = this.pos.z;
//Create a second rotation animation with different timeline
let _rota = new BABYLON.Animation("ship_evasion_rx", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
// Animation keys
let keys = [];
keys.push({ frame: 0, value: 0 });
if(_dir == 1){
keys.push({
frame: 20,
value: (PI_D2*2)
});
}else if(_dir == -1){
keys.push({
frame: 20,
value: -(PI_D2*2)
});
}
//Adding keys to the animation object
_rota.setKeys(keys);
// Create the animation group
let animationGroup = new BABYLON.AnimationGroup(this.name+"_animarot");
animationGroup.addTargetedAnimation(_rota, this.mesh);
// animationGroup.normalize(0, 100);
animationGroup.onAnimationEndObservable.add(function(){
console.log("fin anima, max radio fue ", player.data_maneuvering.radio);
player.maneuvering=false;
player.data_maneuvering.radio=0.0;
player.pos.x = player.data_maneuvering.px;
player.pos.z = player.data_maneuvering.pz;
})
// UI
animationGroup.play(false);
}//end of evade rotating x
}//end class
in update :
//...
update(){
let _real_angle = BABYLON.Tools.ToRadians(this.rotation.deg);
this.rotation.rads = (_real_angle ) + (PI);//angle forward
this.vrot.y = this.rotation.rads;
if( this.data_maneuvering.dir == 1 ){
_real_angle = BABYLON.Tools.ToRadians(this.rotation.deg + 90);
}else if(this.data_maneuvering.dir == -1 ){
_real_angle = BABYLON.Tools.ToRadians(this.rotation.deg - 90);
}
this.rotation.perpen = _real_angle;//perpendicular angle against the direction of movement
if( this.speed.gear > 0 ){
this.pos.x+=Math.cos(this.rotation.rads)*(this.speed.traslation*game.subtract);
this.pos.z-=Math.sin(this.rotation.rads)*(this.speed.traslation*game.subtract);
if( !this.maneuvering ){
this.mesh.position.x = this.pos.x;
this.mesh.position.z = this.pos.z;
}else{
// this.data_maneuvering.radio+=this.data_maneuvering.step;
this.data_maneuvering.radio+=this.data_maneuvering.step;
this.data_maneuvering.px=this.pos.x;
this.data_maneuvering.pz=this.pos.z;
this.data_maneuvering.px+=( Math.cos(this.rotation.perpen)*(this.data_maneuvering.radio) );
this.data_maneuvering.pz-=( Math.sin(this.rotation.perpen)*(this.data_maneuvering.radio) );
this.mesh.position.x = this.data_maneuvering.px;
this.mesh.position.z = this.data_maneuvering.pz;
}
dev_text3.text = "man pos x : "+this.data_maneuvering.px.toFixed(1)+", z : "+this.data_maneuvering.pz.toFixed(1);
}else{
// speed is 0 ...
if( this.maneuvering ){
this.data_maneuvering.radio+=this.data_maneuvering.step;
this.data_maneuvering.px=this.pos.x;
this.data_maneuvering.pz=this.pos.z;
this.data_maneuvering.px+=( Math.cos(this.rotation.perpen)*(this.data_maneuvering.radio) );
this.data_maneuvering.pz-=( Math.sin(this.rotation.perpen)*(this.data_maneuvering.radio) );
this.mesh.position.x = this.data_maneuvering.px;
this.mesh.position.z = this.data_maneuvering.pz;
}
}
}