1"use strict";(self.webpackChunkxeosaurus=self.webpackChunkxeosaurus||[]).push([[3461],{10720:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>s});var i=n(36672);const o={},r=i.createContext(o);function a(e){const t=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),i.createElement(r.Provider,{value:t},e.children)}},25240:e=>{e.exports=JSON.parse('{"permalink":"/blog/controlling-camera-using-device-orientation-on-mobile-devices","source":"@site/blog/2025-05-28-controlling-camera-using-device-orientation-on-mobile-devices.mdx","title":"Controlling Camera using Device Orientation on Mobile Devices","description":"Introduction","date":"2025-05-28T00:00:00.000Z","tags":[{"inline":false,"label":"xeokit","permalink":"/blog/tags/xeokit","description":"xeokit related"}],"readingTime":4.685,"hasTruncateMarker":true,"authors":[{"name":"Muhammad Ijlal","title":"Software Engineer @ Creoox","url":"https://github.com/ijlal99","page":{"permalink":"/blog/authors/muhammad-ijlal"},"socials":{"github":"https://github.com/ijlal99"},"imageURL":"https://creoox.com/wp-content/uploads/2025/03/muhammad.png","key":"muhammad_ijlal"}],"frontMatter":{"slug":"controlling-camera-using-device-orientation-on-mobile-devices","title":"Controlling Camera using Device Orientation on Mobile Devices","authors":["muhammad_ijlal"],"tags":["xeokit"]},"unlisted":false,"prevItem":{"title":"Hatching sliced objects using xeokit SDK","permalink":"/blog/hatching-sliced-objects-using-xeokit-sdk"},"nextItem":{"title":"Loading property sets on demand in xeoVision - flexible handling of IFC metadata","permalink":"/blog/loading-property-sets-on-demand-in-xeovision-flexible-handling-of-ifc-metadata"}}')}
1,70848:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>d,frontMatter:()=>a,metadata:()=>i,toc:()=>c});var i=n(25240),o=n(23420),r=n(10720);const a={slug:"controlling-camera-using-device-orientation-on-mobile-devices",title:"Controlling Camera using Device Orientation on Mobile Devices",authors:["muhammad_ijlal"],tags:["xeokit"]},s=void 0,l={authorsImageUrls:[void 0]},c=[{value:"Introduction",id:"introduction",level:2}];function u(e){const t={code:"code",em:"em",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h2,{id:"introduction",children:"Introduction"}),"\n",(0,o.jsx)(t.p,{children:"Mobile devices offer exciting possibilities for immersive 3D experiences through their built-in sensors. In this tutorial, we'll explore how to control the xeokit camera using device orientation data, creating a virtual reality-like experience where users can look around a 3D model by simply moving their mobile device."}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.em,{children:(0,o.jsx)(t.strong,{children:"Important Requirements"})}),": This example only works on mobile devices and requires a secure HTTPS connection to access device orientation data. If you're testing locally, you can set up a secure context using ",(0,o.jsx)(t.code,{children:"http-server"})," with SSL:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-bash",children:"npm install -g http-server\nhttp-server -S -C cert.pem -K key.pem\n"})}),"\n",(0,o.jsx)(t.p,{children:"You'll need to generate SSL certificates for local testing to meet the browser's security requirements."})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.