Mugen87 / yuka

JavaScript library for developing Game AI.
https://mugen87.github.io/yuka/
MIT License
1.13k stars 91 forks source link

Pursuit Behavor duplicate gltf model #80

Closed kaba992 closed 1 year ago

kaba992 commented 1 year ago

Hello First of all, I want to thank you for this extraordinary library. I tried to use the steering pursuit to make my shark chase after my cube, but when I launch the game, the shark splits in two and remains buggy as shown in the video. here is my pursuit code:

 setPoursuite() {
        const cubeGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
        const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        this.cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        this.scene.add(this.cube)

        function sync(entity, renderComponent) {
            renderComponent.matrix.copy(entity.worldMatrix);

        }
        const chaser = new YUKA.Vehicle();
        chaser.setRenderComponent(this.shark, sync);

        this.entityManager.add(chaser);

        chaser.position.set(2, 0, -3);
        chaser.maxSpeed = 2;
        const evader = new YUKA.Vehicle();
        evader.setRenderComponent(this.cube, sync);
        this.entityManager.add(evader);
        evader.position.set(10, 0, -6);
        evader.maxSpeed = 2;
        const poursuitBehavior = new YUKA.PursuitBehavior(evader, 5);
        chaser.steering.add(poursuitBehavior);

    }

  update(deltaTime) {
        const yukaDeltaTime = this.time.update().getDelta();
        // console.log(this.boat.getWorldPosition());
        this.entityManager.update(yukaDeltaTime);

Thx for any Help and sorry for long message The shark is Gltf model and cube is simple three.js boxGeometry.

https://github.com/Mugen87/yuka/assets/89903118/c57bf466-ad88-4ff0-b073-3ebfc63d358d

kaba992 commented 1 year ago

Small Update i fixed that issue now i am just looking for some way to scale and change Y position of my shark with thi matrixAutoUpdate set to false thx :)

Mugen87 commented 1 year ago

if you want to transform the render item just a single time, I recommend you do this by transforming the shark's geometry. Meaning use one of the transformation methods of three.js's BufferGeometry class. Try it with scale() and translate():

https://threejs.org/docs/index.html#api/en/core/BufferGeometry.scale https://threejs.org/docs/index.html#api/en/core/BufferGeometry.translate

kaba992 commented 1 year ago

Thank you so much for the quick answer. Scaling the geometry is working, so the scale is performing a ping-pong effect, like scaling up to the new geometry's target scale and then scaling down to the object's initial scale. any Idea? Thx