Help with camera rotation

Questions
1

My code below,

I like how the cube moves so far, but I really want the pitch up/down to move that (x) axis rotation and the roll movement to move the z-axis rotation but still follow the cube if you get my drift. Ultimately im trying to get flight sim controls with the mouse. As it is these 2 axis seem to be locked and wont move. Im a beginner here so id appreciate some help understanding if im on the right track with camera choice and so forth.

Cheers.

window.addEventListener(‘DOMContentLoaded’, function(){

var canvas = document.getElementById('canvas');

var engine = new BABYLON.Engine(canvas, true);



var createScene = function(){

    var scene = new BABYLON.Scene(engine);

    scene.clearColor = new BABYLON.Color3.White();

        

    var ground = BABYLON.Mesh.CreateGround('ground1', 200, 200, 10, scene);

    ground.position.y = -10;

    var box = BABYLON.Mesh.CreateBox("Box",3,scene);

    box.position.y = -1;

    var box2 = BABYLON.Mesh.CreateBox("Box2",3.0,scene);

    box2.position.y = -5;

 

    // var camera = new BABYLON.ArcRotateCamera("arcCam",

       // BABYLON.Tools.ToRadians(45),

        //BABYLON.Tools.ToRadians(45),

        //10.0,box.position,scene);

    //camera.attachControl(canvas,true);

    // Parameters: name, position, scene

    var camera = new BABYLON.FollowCamera("followCam",BABYLON.Vector3.Zero(),scene);

    camera.lockedTarget = box;

    camera.radius = 20;

    camera.heightOffset = 2;

    camera.attachControl(canvas,true);

    

    camera.inputs.clear();

function onMouseMove(){

var UpDown = -(scene.pointerY-canvas.height/2)/800;

var Roll = (scene.pointerX-canvas.width/2)/600;



box.rotation.x = UpDown; //up - down

box.rotation.z = Roll; //bank left - right

}

canvas.addEventListener(‘mousemove’,onMouseMove);

setInterval(function(){

//var speedx = Math.cos(ground.rotation.y)/10;  //x pos

//var speedz = Math.cos(ground.rotation.x)/10;  //z pos

var rotateY = (scene.pointerX-canvas.width/2)/10000;

    

box.rotation.y += rotateY;

  

//box.position.z -= speedz;

//box.position.x += speedx;

}, 10);

    var light = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(0,10,0),scene);

    light.parent = camera;

    light.diffuse = new BABYLON.Color3(1,1,1);

    

    var material = new BABYLON.StandardMaterial("material1",scene); 

    material.diffuseColor = BABYLON.Color3.Blue();

    // material.emissiveColor = BABYLON.Color3.Red();

    // material.specularColor = BABYLON.Color3.Red();

    //material.diffuseTexture = new BABYLON.Texture("account.png",scene);

    box.material = material;

            

    return scene;

}

   

var scene = createScene();

engine.runRenderLoop(function(){

    

    //scene.getMeshByName("Box").position.z -= .1;

    scene.render();

   

});

});

2

i didn’t really get you but its better to use freeCamera or arcRotateCamera in this case cause fellow camera has properties that are hard to control (at least for my experience)
if you want to have a camera that fellow the direction of the cube or get the same transformation (rotation and position) you can make the cube as parent of the camera by using “camera.parent = box” then move the camera in its local axis backward a little bit to see your mesh
(in this example the sphere is rotating not the camera)
https://playground.babylonjs.com/#L74Z8G
you can always get some ideas from here : Centered on Created Origin | Babylon.js Documentation
i hope that helps

3

Fly camera docs

might be worth a look.

4

Ok I like it better now, those suggestions were very helpful.

I wonder if I could get help with adding some extra rotation (roll) that can be activated with the A and D keys? Ive tried to look this up but what I found it seems very complicated.

Ive added my new example to the playground.

Floating Blue box | Babylon.js Playground (babylonjs.com)

1 Like
5

Here’s a doc on adding keyboard input: Interacting With Scenes | Babylon.js Documentation (babylonjs.com)

It shouldn’t be too complicated. You just want to add a keyboard observable, check when A or D is pressed, and rotate accordingly. Let us know if you get stuck!

1 Like