# Need to fix this Homing missile animation

**URL:** <https://forum.babylonjs.com/t/need-to-fix-this-homing-missile-animation/40237>\
**Category:** Questions\
**Tags:** quaternion, vector3\
**Created:** [April 26, 2023, 7:24am UTC](https://forum.babylonjs.com/t/need-to-fix-this-homing-missile-animation/40237 "2023-04-26T07:24:34Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![steelx](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/steelx/32/31285_2.png) [@steelx](https://forum.babylonjs.com/u/steelx)\
**Post date:** [April 26, 2023, 7:24am UTC](https://forum.babylonjs.com/t/need-to-fix-this-homing-missile-animation/40237/1 "2023-04-26T07:24:35Z")

</div>

at the moment it doesnt feel right.  
DEMO video:

[https://user-images.githubusercontent.com/3184210/234500519-ec41e9b6-afc4-4452-9d35-54139e2ebf47.mov](https://user-images.githubusercontent.com/3184210/234500519-ec41e9b6-afc4-4452-9d35-54139e2ebf47.mov)

code:

```ts
import {
    StandardMaterial, Color3, SphereParticleEmitter, ParticleSystem,
    Texture, Vector3, Quaternion,
    Animation, CreateCapsuleVertexData, ActionManager, ExecuteCodeAction, CircleEase, Matrix
} from "@babylonjs/core";
import Game from "../Game";
import GameObject from "./GameObject";

export default class HomingMissile extends GameObject {
    explosionParticleSystem: ParticleSystem;
    private _collisionTriggered: boolean;
    private _timer: number;

    constructor(pos: Vector3, game: Game, explosionTime: number) {
        super("homingMissile", game);

        // Create a mesh
        const vertexData = CreateCapsuleVertexData({ radius: 0.1, capSubdivisions: 1, height: 1.2, tessellation: 4, topCapSubdivisions: 8 });
        vertexData.applyToMesh(this, true);

        // Set plane material
        const mat = new StandardMaterial("planeMaterial", this.getScene());
        mat.diffuseColor = Color3.Red();
        this.material = mat;
        Game.shadowGenerator.addShadowCaster(this);

        // Create an explosion particle system
        this.explosionParticleSystem = this.createExplosionParticleSystem();

        this.position = pos;
        this.rotationQuaternion = Quaternion.RotationYawPitchRoll(0, Math.PI / 2, 0);
        this.hommingMissile(game.player!);

        // Set a timer for the plane to explode
        this._collisionTriggered = false;

        // Set a timer for the plane to explode
        this._timer = setTimeout(() => {
            this.explode();
        }, explosionTime);

        // Detect collision with the player
        this.actionManager = new ActionManager(this.getScene());
        this.actionManager.registerAction(
            new ExecuteCodeAction(
                {
                    trigger: ActionManager.OnIntersectionEnterTrigger,
                    parameter: game.player,
                },
                () => {
                    console.log('its a hit!');

                    this._collisionTriggered = true;
                    window.clearTimeout(this._timer);
                    this.explode();
                }
            )
        );
    }

    explode() {
        if (!this._collisionTriggered) {
            clearTimeout(this._timer);
        }
        // Trigger the explosion particle system
        this.isVisible = false;
        this.explosionParticleSystem.start();

        // Dispose the plane after the explosion
        setTimeout(() => {
            this.explosionParticleSystem.dispose();
            this.dispose();
        }, this.explosionParticleSystem.maxLifeTime * 1000);
    }

    private createExplosionParticleSystem(): ParticleSystem {
        ...
    }

    hommingMissile(player: GameObject) {
        const playerPosition = player.position.clone();

        // Move the pivot point to the base of the cylinder
        const pivotMatrix = Matrix.Translation(0, -1, 0);
        this.setPivotMatrix(pivotMatrix);

        // Create a quaternion representing a 90-degree pitch rotation
        const pitch = Math.PI / 2; // 90 degrees in radians
        const yaw = Math.PI / 2; // 90 degrees in radians
        const roll = 0;
        const rotationQuaternion = Quaternion.RotationYawPitchRoll(yaw, pitch, roll);

        // Assign the quaternion to the cylinder's rotationQuaternion property
        this.rotationQuaternion = rotationQuaternion;

        // Define animation for position
        const positionAnimation = new Animation("positionAnimation", "position", 100, Animation.ANIMATIONTYPE_VECTOR3, Animation.ANIMATIONLOOPMODE_CONSTANT);
        const [a, b, c] = this.getMissilePath(playerPosition)
        this.lookAt(b);
        // Define position keyframes
        const positionKeys = [
            { frame: 0, value: a },
            { frame: 25, value: b.add(new Vector3(1, -3, 0)) },
            { frame: 50, value: b },
            { frame: 75, value: b.add(new Vector3(-1, -3, 0)) },
            { frame: 100, value: c },
        ];

        // Assign keyframes to position animation
        positionAnimation.setKeys(positionKeys);

        // Define easing function for curved path
        const easingFunction = new CircleEase();
        positionAnimation.setEasingFunction(easingFunction);

        // Define animation for rotation
        const rotationAnimation = new Animation("rotationAnimation", "rotationQuaternion", 100, Animation.ANIMATIONTYPE_QUATERNION, Animation.ANIMATIONLOOPMODE_CONSTANT);

        // Define rotation keyframes
        const rotationKeys = [
            { frame: 0, value: rotationQuaternion },
            { frame: 25, value: Quaternion.RotationYawPitchRoll(yaw, pitch + Math.PI / 2, roll) },
            { frame: 50, value: Quaternion.RotationYawPitchRoll(yaw, pitch + Math.PI, roll) },
            { frame: 75, value: Quaternion.RotationYawPitchRoll(yaw, pitch + 1.5 * Math.PI, roll) },
            { frame: 100, value: Quaternion.RotationYawPitchRoll(yaw, pitch + 2 * Math.PI, roll) },
        ];

        // Assign keyframes to rotation animation
        rotationAnimation.setKeys(rotationKeys);

        this.getScene().beginDirectAnimation(this, [positionAnimation, rotationAnimation], 0, 100, false);
    }

    getMissilePath(destination: Vector3) {
        const initialPosition = this.position.clone(); // starting position

        // Calculate median position between initial and final positions
        const medianPosition = Vector3.Lerp(initialPosition, destination, 0.5);
        return [initialPosition, medianPosition, destination]
    }

}

```

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [April 26, 2023, 9:25am UTC](https://forum.babylonjs.com/t/need-to-fix-this-homing-missile-animation/40237/2 "2023-04-26T09:25:27Z")

</div>

I have no faen clue how to do it just exactly, but looking at your video I had a good laugh 😂 so I guess you already achieved something 😁

Jokes apart, if I had to do it (luckily I don’t 😉) I would likely look on the side of physics. Basically I would create a force around the target that attracts the homing missile. The missile would shoot in the direction of where it is aimed at following some ballistic curve (with a velocity, direction, etc…) and when entering this force, it would be attracted to the target. My guess only.

Probably @Cedric or @Evgeni_Popov will be able to give you more of an expert advise on this, will you?  
Meanwhile, have a great day 🕶

---

<div class="post-metadata">

**Author:** ![steelx](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/steelx/32/31285_2.png) [@steelx](https://forum.babylonjs.com/u/steelx)\
**Post date:** [April 26, 2023, 11:32am UTC](https://forum.babylonjs.com/t/need-to-fix-this-homing-missile-animation/40237/3 "2023-04-26T11:32:36Z")

</div>

Hey thanks for reply. I have another version in Havok physics it uncontrollable.

So started with without Physics version. Lets me also add animations. Since the only objective to not direct hit player, but try hit the last player position, but with really good animation.

> <https://github.com/steelx/ts-parkover-game/blob/main/src/gameObjects/KamakaziRocket.ts>

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [April 26, 2023, 1:29pm UTC](https://forum.babylonjs.com/t/need-to-fix-this-homing-missile-animation/40237/4 "2023-04-26T13:29:56Z")

</div>

Are you able to setup a simple repro with only the relevant code in the Playground? It would be easier for everyone to help.

---

<div class="post-metadata">

**Author:** ![steelx](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/steelx/32/31285_2.png) [@steelx](https://forum.babylonjs.com/u/steelx)\
**Post date:** [April 26, 2023, 2:54pm UTC](https://forum.babylonjs.com/t/need-to-fix-this-homing-missile-animation/40237/5 "2023-04-26T14:54:00Z")

</div>

I tried moving to playground, its difficult to get HavokPlugin running at playground.

> **[Babylon.js Playground](https://playground.babylonjs.com/#3JUAIC%233)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![11128](https://avatars.discourse-cdn.com/v4/letter/1/d07c76/32.png) [@11128](https://forum.babylonjs.com/u/11128)\
**Post date:** [April 27, 2023, 6:12am UTC](https://forum.babylonjs.com/t/need-to-fix-this-homing-missile-animation/40237/6 "2023-04-27T06:12:35Z")

</div>

here is it  
[https://playground.babylonjs.com/#3JUAIC#4](https://playground.babylonjs.com/#3JUAIC#4)

---

<div class="post-metadata">

**Author:** ![steelx](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/steelx/32/31285_2.png) [@steelx](https://forum.babylonjs.com/u/steelx)\
**Post date:** [April 27, 2023, 6:14am UTC](https://forum.babylonjs.com/t/need-to-fix-this-homing-missile-animation/40237/7 "2023-04-27T06:14:24Z")

</div>

how did you fix Havok missing plugin ? Thanks, now I update the rest of the code \<3/  
oh was it the sequence of initialization ?

---

<div class="post-metadata">

**Author:** ![11128](https://avatars.discourse-cdn.com/v4/letter/1/d07c76/32.png) [@11128](https://forum.babylonjs.com/u/11128)\
**Post date:** [April 27, 2023, 6:21am UTC](https://forum.babylonjs.com/t/need-to-fix-this-homing-missile-animation/40237/8 "2023-04-27T06:21:56Z")

</div>

it’s just sequence problem  
you using aggregate Bodies in Class Player before create HavokPlugin and scene’s turn on physics

---

<div class="post-metadata">

**Author:** ![steelx](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/steelx/32/31285_2.png) [@steelx](https://forum.babylonjs.com/u/steelx)\
**Post date:** [April 27, 2023, 6:37am UTC](https://forum.babylonjs.com/t/need-to-fix-this-homing-missile-animation/40237/9 "2023-04-27T06:37:13Z")

</div>

here it is, please have a look →

> **[Babylon.js Playground](https://playground.babylonjs.com/#3JUAIC%239)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![11128](https://avatars.discourse-cdn.com/v4/letter/1/d07c76/32.png) [@11128](https://forum.babylonjs.com/u/11128)\
**Post date:** [April 27, 2023, 7:49am UTC](https://forum.babylonjs.com/t/need-to-fix-this-homing-missile-animation/40237/10 "2023-04-27T07:49:43Z")

</div>

shot key is ‘space’;

but i can’t do physics based on real ballistics  
so. then this is a chase using animation.  
[https://playground.babylonjs.com/#3JUAIC#11](https://playground.babylonjs.com/#3JUAIC#11)

---

<div class="post-metadata">

**Author:** ![steelx](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/steelx/32/31285_2.png) [@steelx](https://forum.babylonjs.com/u/steelx)\
**Post date:** [April 27, 2023, 8:05am UTC](https://forum.babylonjs.com/t/need-to-fix-this-homing-missile-animation/40237/11 "2023-04-27T08:05:15Z")

</div>

wow this is much better. I will have a look for diff. I can still use it.  
I’m working on Physics based alternative Missile, will share here soon. Thanks

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [May 2, 2023, 9:17am UTC](https://forum.babylonjs.com/t/need-to-fix-this-homing-missile-animation/40237/12 "2023-05-02T09:17:42Z")

</div>

Call me boring but I don’t think I’d use a physics engine for controlling a missile.  
It’s simple Euler integration. Difficult part is to align missile along velocity and I think it can be done with Matrix `LookAt`. Explosion is a matter of computing distance between missile and target.  
It’s a matter of a few lines of code, really.

EDIT: Here is a quick PG:

> **[Babylon.js Playground](https://playground.babylonjs.com/#E8CHU2)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Note: this can be adapted to use with a physics engine too.

---

<div class="post-metadata">

**Author:** ![steelx](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/steelx/32/31285_2.png) [@steelx](https://forum.babylonjs.com/u/steelx)\
**Post date:** [May 3, 2023, 5:20am UTC](https://forum.babylonjs.com/t/need-to-fix-this-homing-missile-animation/40237/13 "2023-05-03T05:20:03Z")

</div>

thanks this is amazing. I actually moved away from Physics cause it was difficult for me to manipulate it. thanks again.