1"use strict";(self.webpackChunkvircadia_public_website=self.webpackChunkvircadia_public_website||[]).push([[916],{7107:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>c,contentTitle:()=>d,default:()=>p,frontMatter:()=>s,metadata:()=>t,toc:()=>_});const t=JSON.parse('{"id":"client/web_babylon_js/README","title":"Babylon.js Client","description":"This client serves to be a generally accessible and usable client to use with games and worlds.","source":"@site/docs/vircadia-world/client/web_babylon_js/README.mdx","sourceDirName":"client/web_babylon_js","slug":"/client/web_babylon_js/","permalink":"/vircadia-world/client/web_babylon_js/","draft":false,"unlisted":false,"editUrl":"https://github.com/Vircadia/vircadia-world/edit/master/client/web_babylon_js/README.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Seed","permalink":"/vircadia-world/cli/database/seed/"},"next":{"title":"TypeScript","permalink":"/vircadia-world/sdk/vircadia-world-sdk-ts/"}}');var r=i(4848),o=i(8453),a=i(8069);const l='import { z } from "zod";\n\n// Browser Client environment schema\nconst clientBrowserEnvSchema = z.object({\n // Web Babylon JS Client\n VRCA_CLIENT_WEB_BABYLON_JS_DEBUG: z\n .union([\n z.boolean(),\n z\n .string()\n .transform(\n (val) => val === "1" || val.toLowerCase() === "true",\n ),\n ])\n .default(false),\n VRCA_CLIENT_WEB_BABYLON_JS_SUPPRESS: z\n .union([\n z.boolean(),\n z\n .string()\n .transform(\n (val) => val === "1" || val.toLowerCase() === "true",\n ),\n ])\n .default(false),\n VRCA_CLIENT_WEB_BABYLON_JS_DEBUG_SESSION_TOKEN: z.string().default(""),\n VRCA_CLIENT_WEB_BABYLON_JS_DEBUG_SESSION_TOKEN_PROVIDER: z\n .string()\n .default("system"),\n\n VRCA_CLIENT_WEB_BABYLON_JS_META_TITLE_BASE: z.string().default("Vircadia"),\n VRCA_CLIENT_WEB_BABYLON_JS_META_DESCRIPTION: z.string().default("..."),\n VRCA_CLIENT_WEB_BABYLON_JS_META_OG_IMAGE: z\n .string()\n .default("/brand/logo_icon.webp"),\n VRCA_CLIENT_WEB_BABYLON_JS_META_OG_TYPE: z.string().default("website"),\n VRCA_CLIENT_WEB_BABYLON_JS_META_FAVICON: z\n .string()\n .default("/brand/favicon.svg"),\n\n VRCA_CLIENT_WEB_BABYLON_JS_APP_URL: z\n .string()\n .url()\n .default("https://app.vircadia.com"),\n\n VRCA_CLIENT_WEB_BABYLON_JS_DEFAULT_WORLD_API_URI: z\n .string()\n .default("localhost:3020"),\n VRCA_CLIENT_WEB_BABYLON_JS_DEFAULT_WORLD_API_URI_USING_SSL: z\n .union([\n z.boolean(),\n z\n .string()\n .transform(\n (val) => val === "1" || val.toLowerCase() === "true",\n ),\n ])\n .default(false),\n\n VRCA_CLIENT_WEB_BABYLON_JS_PROD_HOST: z.string().default("0.0.0.0"),\n VRCA_CLIENT_WEB_BABYLON_JS_PROD_PORT: z.coerce.number().default(3025),\n\n // Development Web Babylon JS Client\n VRCA_CLIENT_WEB_BABYLON_JS_DEV_HOST: z.string().default("0.0.0.0"),\n VRCA_CLIENT_WEB_BABYLON_JS_DEV_PORT: z.coerce.number().default(3066),\n});\n\n// Parse client environment variables\nexport const clientBrowserConfiguration = clientBrowserEnvSchema.parse(\n // Fix TypeScript error with appropriate typing\n (typeof import.meta !== "undefined"\n ? (import.meta as { env?: Record<string, unknown> }).env\n : undefined) ?? process.env,\n);\n',s={},d="Babylon.js Client",c={},_=[{value:"Configure",id:"configure",level:2},{value:"Development Environment",id:"development-environment",level:2},{value:"Recommended IDE Setup",id:"recommended-ide-setup",level:3},{value:"Type Support for <code>.vue</code> Imports in TS",id:"type-support-for-vue-imports-in-ts",level:3},{value:"Customize configuration",id:"customize-configuration",level:3},{value:"Project Setup",id:"project-setup",level:3},{value:"Compile and Hot-Reload for Development",id:"compile-and-hot-reload-for-development",level:4},{value:"Type-Check, Compile and Minify for Production",id:"type-check-compile-and-minify-for-production",level:4}];function u(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"babylonjs-client",children:"Babylon.js Client"})}),"\n",(0,r.jsx)(n.p,{children:"This client serves to be a generally accessible and usable client to use with games and worlds."}),"\n",(0,r.jsx)(n.p,{children:"It also serves as an example of how to use the Vircadia World SDK in a web application using Babylon.js."}),"\n",(0,r.jsx)(n.h2,{id:"configure",children:"Configure"}),"\n",(0,r.jsx)(a.A,{language:"typescript",title:"vircadia.browser.config.ts",children:l}),"\n",(0,r.jsx)(n.h2,{id:"development-environment",children:"Development Environment"}),"\n",(0,r.jsx)(n.h3,{id:"recommended-ide-setup",children:"Recommended IDE Setup"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"https://code.visualstudio.com/",children:"VSCode"})," + ",(0,r.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=Vue.volar",children:"Volar"})," (and disable Vetur)."]}),"\n",(0,r.jsxs)(n.h3,{id:"type-support-for-vue-imports-in-ts",children:["Type Support for ",(0,r.jsx)(n.code,{children:".vue"})," Imports in TS"]}),"\n",(0,r.jsxs)(n.p,{children:["TypeScript cannot handle type information for ",(0,r.jsx)(n.code,{children:".vue"})," imports by default, so we replace the ",(0,r.jsx)(n.code,{children:"tsc"})," CLI with ",(0,r.jsx)(n.code,{children:"vue-tsc"})," for type checking. In editors, we need ",(0,r.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=Vue.volar",children:"Volar"})," to make the TypeScript language service aware of ",(0,r.jsx)(n.code,{children:".vue"})," types."]}),"\n",(0,r.jsx)(n.h3,{id:"customize-configuration",children:"Customize configuration"}),"\n",(0,r.jsxs)(n.p,{children:["See ",(0,r.jsx)(n.a,{href:"https://vite.dev/config/",children:"Vite Configuration Reference"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"project-setup",children:"Project Setup"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-sh",children:"bun install\n"})}),"\n",(0,r.jsx)(n.h4,{id:"compile-and-hot-reload-for-development",children:"Compile and Hot-Reload for Development"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-sh",children:"bun dev\n"})}),"\n",(0,r.jsx)(n.h4,{id:"type-check-compile-and-minify-for-production",children:"Type-Check, Compile and Minify for Production"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-sh",children:"bun run build\n"})})]})}function p(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.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.