[SOLVED] camera.attachControl not working

Questions
1

Hi,

I’m testing Babylon.js functionnalities and i’m trying to achieve exactly this in terms of camera control :

But I just can’t have the camera.attachControl working in my local project (everything else is working).

Here is my code:

const canvas  = document.getElementById("canvas");
      canvas.width  = 3840;
      canvas.height = 2160;

const engine = new BABYLON.Engine(canvas);
      engine.setSize(3840,2160);
      engine.runRenderLoop(renderLoop);

const scene = new BABYLON.Scene(engine);
      scene.clearColor = new BABYLON.Color3(0.95, 0.95, 0.95);

const back = new BABYLON.Layer('back','../assets/images/background.jpg', scene, true);

const camera = new BABYLON.FreeCamera("camera",new BABYLON.Vector3(0, 0, -10),scene);
      camera.attachControl(canvas, true,true)

const light  = new BABYLON.HemisphericLight("Light", new BABYLON.Vector3(0, 2, -1), scene);

const box = new BABYLON.MeshBuilder.CreateBox("box", { width:2, height:2, depth:2 }, scene);
      box.material = new BABYLON.StandardMaterial("material", scene);;
      box.material.diffuseColor = new BABYLON.Color3.FromHexString("#404655");
      box.rotation.x = 0
      box.rotation.y = 0
      box.rotation.z = 0

function renderLoop() {
      scene.render();
      box.rotation.x  += 0.015;
      box.rotation.y  += 0.015;
}

I tried to do the same on the playground and it kind of works.It rotates alright (very loosely) but doesn’t pan or zoom.

Basically, we are far from the reference playground I mentioned earlier.
But it works.

Still, I don’t get why it doesn’t work on my localhost at all (Chrome canary or Firefox).

Here are the js files that are imported in my index.html:

    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
    <script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
    <script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>

Thanks for your help.

2

Try to use an arc rotate camera instead of a free camera. The PG does work as expected for me.

Are you able to setup a live link of your project so that we can test? Without some kind of repro it may be difficult to find the problem.

1 Like
3

Thank you for your help.
While trying to make a consolidated html file to provide to you, I found the culprit.
There was an overlay on my canvas that prevented me from interacting with it.
As simple as that but not so obvious at first glance.
And yes, the arcRotate camera solved the rest of it.
So, this is totally resolved.
Thank you very much.

1 Like