Using Navigation

the 3d viewer api provides a set of methods for navigating within the 3d scene here we will explain how to get started with some common ways of using navigation with the 3d viewer using navigation modes use navigation modes to handle mouse and touch input devices the setnavigationmode method allows you to define different navigation modes for each input device and user interaction using touch screen devices to begin, set the enabletouch option to true when creating the 3d viewer instance this will enable touch screen devices to interact with the 3d scene next, when setting up navigation with touch screen devices we recommend using the orbit navigation mode this mode allows the user to orbit the camera around a point by dragging with one finger the pan navigation mode is also available for panning the camera by dragging with one finger then depending on whether you choose pan or orbit you can also map the pinch gesture to move forwards and backwards or zoom in and out additionally, you can also map the long press gesture to add another dimension of interaction usage const viewer3doptions = { enabletouch true, }; const viewer3delement = document getelementbyid("viewer 3d"); const viewer3d = new bimsync viewer3d viewer3d(viewer3delement, viewer3doptions); const navigationmode = { touch \[ { action "click", event "tap", filter { pointers 1 }, }, { action "orbit", event "pan", filter { longpress false, pointers 1 }, scale 1, }, { action "pan", event "pan", filter { longpress true, pointers 1 }, scale 1, }, { action "zoommove", event "pinch", filter { pointers 2 }, }, ], }; viewer3d setnavigationmode(navigationmode); learn more about the setnavigationmode method setnavigationmode docid\ xppns3dnxbhsbjfaivezv using direct navigation use direct navigation when setting up navigation for other input devices with the updatenavigation method by mapping user inputs to different movements you can control the camera in the 3d scene usage addeventlistener("keydown", (event) => { const key = event key; const navigationmovement = {}; switch (key) { case "arrowup" navigationmovement moveforward = 1; break; case "arrowdown" navigationmovement movebackward = 1; break; case "arrowleft" navigationmovement moveleft = 1; break; case "arrowright" navigationmovement moveright = 1; break; case "pageup" navigationmovement moveup = 1; break; case "pagedown" navigationmovement movedown = 1; break; } viewer3d updatenavigation(navigationmovement); }); addeventlistener("keyup", (event) => { viewer3d stopnavigation(); }); learn more about the updatenavigation method updatenavigation docid 4vebypj7qpuiw bjy6cwd