Model pivot changed after using orbit controls. And model and camera's position changing affects its z and not x and y position.

[meitheli61]

Hi, I am a beginner using A frame, JS and HTML. I need to load a 3D model on a webpage using JS(as the path for loading the model will come from an XML) and the 3D model cab be rotated, panned and zoomed. Trying to achieve this using orbit controls.

I had set the 3D models position so that the model is on the center of the webpage. That was working fine until I added orbit controls. Now changing camera's or model's position affects its distance from screen rather than x-y position.

Also, my model's pivot is in center, but when I use orbit controls its pivot is at the bottom.

Here's my JS code:

var scene = document.createElement("a-scene");
scene.setAttribute("id","scene1");
scene.setAttribute("cursor","rayOrigin: mouse");
scene.setAttribute("vr-mode-ui","enabled:false");
scene.setAttribute("embedded","true");
document.body.append(scene);

var entity_3dModel = document.createElement("a-entity");
entity_3dModel.setAttribute("gltf-model",'url('+path[0].innerHTML+')');
entity_3dModel.setAttribute('scale', "3 3 3" );
entity_3dModel.setAttribute("id", "Model");
entity_3dModel.setAttribute("modify-materials", "");
entity_3dModel.setAttribute("click", "");
entity_3dModel.setAttribute("position","0 -3 0");
entity_3dModel.setAttribute("rotation","-30 180 0");
scene.appendChild(entity_3dModel);

var entity_camera = document.createElement("a-entity");
scene.appendChild(entity_camera);
entity_camera.setAttribute("id","camera");
entity_camera.setAttribute("camera","active","true");
entity_camera.setAttribute("camera","fov","100");
entity_camera.setAttribute("camera","zoom","0.5");
entity_camera.setAttribute("camera","far","1000");
entity_camera.setAttribute("camera","near","0.005");
entity_camera.setAttribute("orbit-controls","enabled: false");
entity_camera.setAttribute("position","0 3 -2");

        entity_camera.setAttribute("orbit-controls","enabled: true");
        entity_camera.setAttribute("orbit-controls","autoRotate: false");
        entity_camera.setAttribute("orbit-controls","target: #Model");

And HTML code:

#scene1{
position:absolute;
left:0%;
top:0%;
height: 100%;
width: 100%;
}*/

Kindly help.