Babylon.js OBJECT Rotation

[jerome1109]

Hi there, i'm just a student and i'm doing a school project.. i'm just a beginner in babylon.js 

i have a code here. you see the problem in the video: watch video here

it's just a copy paste code from github: https://github.com/professorf/BasicBabylonJSAvatarMovement/blob/master/index.html
please share some knowledge how can i fix it. thank you.

  function start() {
            canvas = document.getElementById("cvRAVE");
            engine = new BABYLON.Engine(canvas, true);
            scene = new BABYLON.Scene(engine);
            // camera
            camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 1, 120, new BABYLON.Vector3(0, 0, 0), scene);

            light0 =  new BABYLON.HemisphericLight("light", new BABYLON.Vector3(2,2,0), scene);
            origin = BABYLON.Mesh.CreateSphere("origin", 10, 2.0, scene);
            ground = BABYLON.Mesh.CreateGround("ground", 10000, 1000, 1, scene);
            targetx = 0; targetz = 0; rot = 0;
            BABYLON.SceneLoader.ImportMesh("", "", "3d/monster.babylon", scene, function (newMeshes, skeletons) {
                dudemesh=newMeshes;
                newMeshes[0].position = new BABYLON.Vector3(0, 0, 0);  // The original dude
                scene.beginAnimation(skeletons[0], 0, 120, 1.0, true);

            });

            scene.activeCamera.attachControl(canvas);
            engine.runRenderLoop(function () {
                if (dudemesh) {
                    dx = targetx - dudemesh[0].position.x;
                    dz = targetz - dudemesh[0].position.z;
                    rot = Math.atan2(dx, dz); 
                    len = Math.sqrt(dx * dx + dz * dz);
                    if (len == 0) len = 1;
                    dx /= len;
                    dz /= len;
                    dudemesh[0].rotation.y = rot+Math.PI;
                    dudemesh[0].position.x += dx;
                    dudemesh[0].position.z += dz;
                    camera.target = dudemesh[0];
                }
                scene.render();
            });
        }

 

[Wingnut]

Hi @jerome1109, welcome to the forum, and say hi to @ProfessorF for us.  He's been a long time forum user and friend of BJS.  You are a friend of BJS now, too, Jerome.   We love people who are "just a student" and "just a beginner", here at the forum.  Good to have you with us!   Best of luck with your studies!

http://www.babylonjs-playground.com/#1WKAQI#5

There's a playground that loads "dude".  I tried to copy your code somewhat, and I added the moveDude function from the original demo.

I think this playground shows the problem.  Jitter.  Vibration.  Dude got the shakes! 

Same issue as YOU see in your tests, Jerome?  I bet so.  Looks the same as the video.

I would guess... something is wrong with the renderLoop code. 

I disabled the rotation in line 66... temporarily.  Also, I put the /2 in lines 49 and 50 (temporary)... to reduce the amount of dude movement upon click.  I'm not very good at onPointerDown/onClick, so there is surely better solutions to keep dude on-screen when ground is clicked.  He keeps jumping to the far right.  Not sure why.  Needs thinkin'.

ProfessorF would never forgive me if I didn't allow you some time in the playground... to find the problem.  You can make more edits, hit RUN as much as you like, SAVE as often as you wish, etc.   The playground is a fun and easy way to find bugs and test solutions.  It is your friend, and it allows other forum users to help us... more easily.

Use your console.log(anyValue) to watch your values... but be careful with putting console.log inside the renderLoop.  They will happen VERY often.