Camera Zoomed problem in mobile devices

Customization
1

image
image1920×1080 129 KB

image
image1920×1080 78.5 KB

Hey there, We have facing problem in floorplan in mobile devices, Its more zoomed in, I added two reference images from the examples of view switch api, if you observe in mobile view the camera view is more zoomed in, We have premium plan, so how to control in code for specifying the camera zoom issues for mobile devices,
(I can control UI elements in CSS, that i don’t have problem, only camera zooming I have issues)

2

In Shapespark the camera position and orientation stored in a view (including the initial camera position in the initial view) do not depend on the display aspect ratio. So, for orbit views the camera will be looking at the given orbiting center (target) from the given distance leading to a different zoom factor for different aspect ratio.

To change the camera position through the viewer API take a look at shapespark-viewer-api/README.md at master · shapespark/shapespark-viewer-api · GitHub except that for floorplan view the position property is not used, but you need to specify:

  • mode = 'orbit',
  • noRotate = true,
  • panPrimary = true,
  • rotation,
  • target: THREE.Vector3 - the orbiting center,
  • distance: number - the distance from the camera to the orbiting center.

For other properties inspect the initial view: Viewer.visibleViews()[0].

3 
  document.getElementById('custom-view').addEventListener('click', function() {
    var view = new WALK.View();
    
    console.log(view.target)
    view.position.x = 0.956;
    view.position.y = -2.922;
    view.position.z = 1.546;
    view.rotation.yawDeg = 121.59;
    view.rotation.pitchDeg = -44.78;
    viewer.switchToView(view);
  });

I checked this api example, I’m trying to set the target for TOP, since its for FloorPlan, but its returning me undefined, I even debuged the view, couldn’t find anything related to target or anything related to set for floorMap/TOP
And this also
var viewer = WALK.getViewer();
console.log(Viewer.visibleViews()[0])
returns me undefined, Can you please specify for top, how to set that completely in code.

Actually, Instead of completely setting this top view in code just for mobile view, I want easy way around from my existing working code

This is part of my code, same way i’m adding for FirstFloorMap and SecondFlooMap, So recreating everything again just for mobile view, its not the optimial way i think
function viewSwitchDone(viewName) {
console.log(viewName)

if( viewName === "GroundFloorMap"){
  viewer.anchorsVisible = true
    var hallConfig = addTrigger([-1, 2.5, 3], triggerImages[0], 0.8);
  hallAnchor = viewer.addAnchor(hallConfig, hallClicked)
  console.log(hallAnchor)

This is working good enough for dekstop browser, only in mobile browser i have issues

So something like this example, any controls of camera to control like this

if (window.innerWidth < window.innerHeight) { // Portrait orientation
camera.position.z = 8
}
I want to add in my existing code

4

Unfortunately, there is no easy way to achieve this. Instead, try:

var viewParams = {
  mode: 'orbit',
  target: [0, 0, 0],
  rotation: [0, -90],
  distance: 10,
  minDistance: 5,
  maxDistance: 100,
  noRotate: true,
  panPrimary: true
};

viewer.switchToView(new WALK.View(viewParams));

after adjusting target and distance to your needs.

Do you have any views defined in your scene? Also, in the second line it should be lowercase viewer, not Viewer.

5

Ahh Okay, Thanks @wojtek for clarifying it with more detailed code,
I have asked one more doubt regarding rotation in one more forum, can you please help me out there also