1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[14798,30438],{1104:(e,i,s)=>{"use strict";s.d(i,{A:()=>p});var t=s(14232),n=s(35904),a=s(37876);s(58570);var r=s(63131),o=s(22405),l=s(75833),d=s(21357),h=s(6939),c=s(2772);(0,s(78658).kz)({advancedDynamicTexture:[c.v,1],button2D:[h.$,1],textBlock:[d.V,1],stackPanel:[l.P,1],slider:[o.A,1],sound:[r.A,0]});let p=function(){var e=(0,t.useRef)(null);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("advancedDynamicTexture",{kind:"createFullscreenUI",createFullscreenUI:{name:"createFullscreenUI-name"},children:[(0,a.jsx)("button2D",{name:"btn-play",width:"20%",height:"40px",top:10,color:"white",horizontalAlignment:n.E.HORIZONTAL_ALIGNMENT_RIGHT,verticalAlignment:n.E.VERTICAL_ALIGNMENT_TOP,onPointerClick:function(){var i,s;return!(null!=(i=e.current)&&i.isPlaying)&&(null==(s=e.current)?void 0:s.play())},children:(0,a.jsx)("textBlock",{name:"btn-play-text",text:"PLAY"})}),(0,a.jsx)("button2D",{name:"btn-pause",width:"20%",top:60,height:"40px",color:"white",horizontalAlignment:n.E.HORIZONTAL_ALIGNMENT_RIGHT,verticalAlignment:n.E.VERTICAL_ALIGNMENT_TOP,onPointerClick:function(){var i;return null==(i=e.current)?void 0:i.pause()},children:(0,a.jsx)("textBlock",{name:"btn-pause-text",text:"PAUSE"})}),(0,a.jsx)("button2D",{name:"btn-stop",width:"20%",top:110,height:"40px",color:"white",horizontalAlignment:n.E.HORIZONTAL_ALIGNMENT_RIGHT,verticalAlignment:n.E.VERTICAL_ALIGNMENT_TOP,onPointerClick:function(){var i;return null==(i=e.current)?void 0:i.stop()},children:(0,a.jsx)("textBlock",{name:"btn-stop-text",text:"STOP"})}),(0,a.jsxs)("stackPanel",{height:"50px",verticalAlignment:n.E.VERTICAL_ALIGNMENT_TOP,top:160,children:[(0,a.jsx)("textBlock",{text:"Volume",height:"20px",width:"150px",color:"white",horizontalAlignment:n.E.HORIZONTAL_ALIGNMENT_RIGHT}),(0,a.jsx)("slider",{value:.5,minimum:0,maximum:1,width:"200px",height:"20px",horizontalAlignment:n.E.HORIZONTAL_ALIGNMENT_RIGHT,onCreate:function(i){return i.onValueChangedObservable.add(function(i){var s;null==(s=e.current)||s.setVolume(i)})}})]})]}),(0,a.jsx)("sound",{ref:e,name:"ambient",urlOrArrayBuffer:"https://cdn.pixabay.com/download/audio/2022/10/16/audio_bc5a5fe2cf.mp3?filename=short-adventurous-intro-2-no-copyright-music-123088.mp3",options:{autoplay:!1},onCreate:function(e){return e.setVolume(.5)}})]})}},14798:(e,i,s)=>{"use strict";s.d(i,{O:()=>t});var t=[{data:{index:{type:"page",display:"hidden",theme:{layout:"raw"}},docs:{title:"Documentation",type:"page"},releases:{title:"Releases",type:"page"},showcase:{title:"Showcase",type:"page"},credits:{title:"Credits",type:"page"},privacy:{title:"Privacy",type:"page"},_tests:{display:"hidden"}}},{name:"_tests",route:"/_tests",children:[]},{name:"credits",route:"/credits",frontMatter:{description:"We gratefully acknowledge the individuals, libraries, and resources that contributed to this project. This section highlights the authors, technologies, and resources that made this website possible.",sidebarTitle:"Credits"}},{name:"docs",route:"/docs",children:[{data:{index:"","getting-started":"Getting Started","engine-scene":"Engine/Scene",cameras:"Cameras",lights:"Lights",meshes:"Meshes",materials:"Materials",gui:"GUI",audio:"Audio",physics:"Physics","load-models":"Load Models","separator-0":{type:"separator"},"custom-props":"Custom Props",hooks:"Hooks","separator-1":{type:"separator"},advanced:"Advanced","separator-3":{type:"separator"},"extended-reality":"Extended Reality","separator-4":{type:"separator"}}},{name:"advanced",route:"/docs/advanced",children:[{data:{configurations:"Configurations",animations:"Animations",events:"Events","custom-loading-screen":"Custom Loading Screen","multiple-canvases":"Multiple Canvases","material-plugins":"Material Plugins"}},{name:"animations",route:"/docs/advanced/animations",frontMatter:{description:"Animate object properties like position, rotation, and scale using Babylon.js keyframes to create smooth, time-based transitions in 3D scenes.",sidebarTitle:"Animations"}},{name:"configurations",route:"/docs/advanced/configurations",children:[{data:{loaders:"Loaders",earcut:"Earcut"}},{name:"earcut",route:"/docs/advanced/configurations/earcut",frontMatter:{description:"Fast, lightweight library for polygon triangulation - ideal for converting complex polygons into triangles for efficient 3D rendering with GPU hardware.",sidebarTitle:"Earcut"}},{name:"loaders",route:"/docs/advanced/configurations/loaders",frontMatter:{description:"Load 3D assets like models, textures, and animations into scenes. Supports various file formats and simplifies importing complex graphics content.",sidebarTitle:"Loaders"}}]},{name:"custom-loading-screen",route:"/docs/advanced/custom-loading-screen",frontMatter:{description:"Show a message, image, or animation while loading 3D scenes and assets. Improves UX by giving feedback during longer loading times.",sidebarTitle:"Custom Loading Screen"}},{name:"events",route:"/docs/advanced/events",children:[{data:{actions:"Actions"}},{name:"actions",route:"/docs/advanced/events/actions",frontMatter:{description:"Actions let you define behaviors triggered by events or interactions, enabling dynamic, interactive 3D scenes with animations, property changes, and more.",sidebarTitle:"Actions"}}]},{name:"material-plugins",route:"/docs/advanced/material-plugins",frontMatter:{description:"Material Plugins let you inject custom shader code into built-in materials, extending rendering behavior without modifying the core.",sidebarTitle:"Material Plugins"}},{name:"multiple-canvases",route:"/docs/advanced/multiple-canvases",children:[{data:{"single-scene":"Single Scene","multiple-scenes":"Multiple Scenes"}},{name:"multiple-scenes",route:"/docs/advanced/multiple-canvases/multiple-scenes",frontMatter:{description:"Render multiple 3D scenes to different <canvas> elements on one page - ideal for split-screen games, dashboards, or side-by-side 3D views.",sidebarTitle:"Multiple Scenes"}},{name:"single-scene",route:"/docs/advanced/multiple-canvases/single-scene",frontMatter:{description:"Render the same 3D scene to multiple <canvas> elements on a page - perfect for mirrored views, split-screen layouts, or multi-v
1iew 3D apps.",sidebarTitle:"Single Scene"}}]}]},{name:"audio",route:"/docs/audio",frontMatter:{description:"Audio engine integrates both spatial and non-spatial sounds into 3D scenes, with 2D global and 3D positional audio for dynamic sound experiences.",sidebarTitle:"Audio"}},{name:"cameras",route:"/docs/cameras",frontMatter:{description:"Cameras define whatâs visible in a 3D scene and are crucial for navigation and interaction, offering different views and perspectives.",sidebarTitle:"Cameras"}},{name:"custom-props",route:"/docs/custom-props",frontMatter:{description:"Custom props extend Reactylon components, allowing developers to enhance functionality with reusable, flexible properties for better interaction in 3D apps.",sidebarTitle:"Custom Props"}},{name:"engine-scene",route:"/docs/engine-scene",frontMatter:{description:"Explore the core engine and scene management features, which power dynamic 3D experiences. Learn how to create, control, and optimize 3D scenes for immersive applications.",sidebarTitle:"Engine Scene"}},{name:"extended-reality",route:"/docs/extended-reality",children:[{data:{"virtual-reality":"Virtual Reality","augmented-mixed-reality":"Augmented/Mixed Reality","hand-tracking":"Hand Tracking",microgestures:"Microgestures"}},{name:"augmented-mixed-reality",route:"/docs/extended-reality/augmented-mixed-reality",children:[{data:{"hit-test":"Hit Test",anchors:"Anchors","plane-detection":"Plane Detection","mesh-detection":"Mesh Detection","light-estimation":"Light Estimation","camera-passthrough":"Camera Passthrough","image-tracking":"Image Tracking"}},{name:"anchors",route:"/docs/extended-reality/augmented-mixed-reality/anchors",frontMatter:{description:"Anchors are AR/MR references to real-world surfaces or points, used to place and track virtual objects in 3D space relative to the real world.",sidebarTitle:"Anchors"}},{name:"camera-passthrough",route:"/docs/extended-reality/augmented-mixed-reality/camera-passthrough",frontMatter:{description:"Camera Passthrough refers to the ability to access the deviceâs camera passthrough feed to blend real-world imagery with rendered content in XR environments or to capture visual input for processing.",sidebarTitle:"Camera Passthrough"}},{name:"hit-test",route:"/docs/extended-reality/augmented-mixed-reality/hit-test",frontMatter:{description:"Hit testing detects intersections between rays and 3D objects, enabling interactions like selection, placement, and object manipulation in AR/VR.",sidebarTitle:"Hit Test"}},{name:"image-tracking",route:"/docs/extended-reality/augmented-mixed-reality/image-tracking",frontMatter:{description:"Image Tracking in WebXR lets you detect and track real-world images, attaching virtual UI, 3D models, and interactive content to books, posters, packaging, and more.",sidebarTitle:"Image Tracking"}},{name:"light-estimation",route:"/docs/extended-reality/augmented-mixed-reality/light-estimation",frontMatter:{description:"Estimate real-world lighting in AR/MR to enhance realism. Virtual objects adjust to ambient light, improving their integration with the environment.",sidebarTitle:"Light Estimation"}},{name:"mesh-detection",route:"/docs/extended-reality/augmented-mixed-reality/mesh-detection",frontMatter:{description:"Detect and interact with 3D surfaces in AR using real-world mesh dataâenabling realistic placement and interaction in web-based mixed reality apps.",sidebarTitle:"Mesh Detection"}},{name:"plane-detection",route:"/docs/extended-reality/augmented-mixed-reality/plane-detection",frontMatter:{description:"Identify flat surfaces (floors, walls, tables) using AR devices, enabling virtual objects to anchor and align with the real-world environment.",sidebarTitle:"Plane Detection"}}]},{name:"augmented-mixed-reality",route:"/docs/extended-reality/augmented-mixed-reality",frontMatter:{description:"AR and MR blend virtual elements with the real world to enhance or interact with surroundings, creating immersive, interactive experiences.",sidebarTitle:"Augmented Mixed Reality"}},{name:"hand-tracking",route:"/docs/extended-reality/hand-tracking",frontMatter:{description:"Hand tracking detects user hand movements in 3D spaces for interactive AR/VR experiences, allowing users to control virtual objects using their hands.",sidebarTitle:"Hand Tracking"}},{name:"microgestures",route:"/docs/extended-reality/microgestures",frontMatter:{description:"Microgestures in Quest Browser - five hand-tracking inputs per hand (thumb tap + D-pad swipes) for fast, low-effort WebXR control on Quest 2/Pro/3/3S.",sidebarTitle:"Microgestures"}}
1,{name:"virtual-reality",route:"/docs/extended-reality/virtual-reality",children:[{data:{teleportation:"Teleportation",movement:"Movement"}},{name:"movement",route:"/docs/extended-reality/virtual-reality/movement",frontMatter:{description:"Movement allows users to navigate 3D spaces, essential for immersive experiences by enabling intuitive and comfortable exploration and interaction.",sidebarTitle:"Movement"}},{name:"teleportation",route:"/docs/extended-reality/virtual-reality/teleportation",frontMatter:{description:'Teleportation in WebXR enables fast movement through 3D environments by "teleporting" to locations, ideal for VR to avoid discomfort or disorientation.',sidebarTitle:"Teleportation"}}]},{name:"virtual-reality",route:"/docs/extended-reality/virtual-reality",frontMatter:{description:"VR immerses users in fully simulated environments via headsets (e.g., Oculus Quest, HTC Vive), offering interaction through controllers and sensors.",sidebarTitle:"Virtual Reality"}}]},{name:"extended-reality",route:"/docs/extended-reality",frontMatter:{description:"XR covers immersive technologies like VR, AR, and MR, merging physical and virtual worlds for a range of interactive and enhanced user experiences.",sidebarTitle:"Extended Reality"}},{name:"getting-started",route:"/docs/getting-started",children:[{data:{reactylon:"Reactylon","reactylon-native":"Reactylon Native","separator-0":{type:"separator"},templates:"Templates"}},{name:"reactylon-native",route:"/docs/getting-started/reactylon-native",frontMatter:{description:"Reactylon Native runs Babylon.js natively on iOS, Android, and desktop via APIs like Metal, Vulkan, and DirectX, using JavaScript/TypeScript for app logic.",sidebarTitle:"Reactylon Native"}},{name:"reactylon",route:"/docs/getting-started/reactylon",frontMatter:{description:"Reactylon creates 3D web experiences with Babylon.js using WebGL, WebXR, and WebGPU, offering efficient rendering in browsers for immersive 3D graphics.",sidebarTitle:"Reactylon"}},{name:"templates",route:"/docs/getting-started/templates",frontMatter:{description:"Official Reactylon starter templates for Vite, Next.js, and Astro, with TypeScript and babel-plugin-reactylon preconfigured.",sidebarTitle:"Templates"}}]},{name:"getting-started",route:"/docs/getting-started",frontMatter:{description:"Reactylon uses Babylon.js for 3D web experiences in browsers, and Reactylon Native extends it to native apps, offering high-performance 3D rendering.",sidebarTitle:"Getting Started"}},{name:"gui",route:"/docs/gui",children:[{data:{"2d":"2D GUI","3d":"3D GUI",grid:"Grid","mixed-reality-toolkit":{title:"Mixed Reality Toolkit",display:"hidden"},figma:{title:"Figma",display:"hidden"}}},{name:"2d",route:"/docs/gui/2d",frontMatter:{description:"The 2D GUI system allows you to create and manage graphical user interfaces over 3D scenes. It supports interactive elements like buttons, sliders, and text, all rendered in 2D space, ideal for HUDs and menus.",sidebarTitle:"2d"}},{name:"3d",route:"/docs/gui/3d",frontMatter:{description:"The 3D GUI system enables the creation of interactive user interfaces within a 3D environment, providing controls and layouts that seamlessly integrate with 3D scenes for a dynamic user experience.",sidebarTitle:"3d"}},{name:"figma",route:"/docs/gui/figma",frontMatter:{sidebarTitle:"Figma"}},{name:"grid",route:"/docs/gui/grid",frontMatter:{description:"The Grid layout is a flexible system for building responsive 2D UI in 3D scenes, extended by Reactylonâs declarative JSX syntax using grid, row, and column components.",sidebarTitle:"Grid"}},{name:"mixed-reality-toolkit",route:"/docs/gui/mixed-reality-toolkit",frontMatter:{sidebarTitle:"Mixed Reality Toolkit"}}]},{name:"hooks",route:"/docs/hooks",frontMatter:{description:"Reactylon offers custom React hooks to integrate Babylon.js elements directly into React apps, streamlining 3D scene access and interaction.",sidebarTitle:"Hooks"}},{name:"index",route:"/docs",frontMatter:{title:"Introduction",sidebarTitle:"Introduction",description:"Reactylon is an open-source framework built on Babylon.js and React to create immersive XR experiences, enabling developers to craft interactive 3D apps."}},{name:"lights",route:"/docs/lights",frontMatter:{description:"Lights in 3D scenes define ambiance, realism, and depth by illuminating objects and simulating realistic lighting conditions for an enhanced visual experience.",sidebarTitle:"Lights"}},{name:"load-models",route:"/docs/load-models",frontMatter:{description:"Load models into your scene using a variety of methods, from simple imports to more advanced loading scenarios with custom hooks for flexibility and control.",sidebarTitle:"Load Models"}},{name:"materials",route:"/docs/materials",children:[{data:{"using-materials":"Using Materials"}},{name:"using-materials",route:"/docs/materials/using-materials",children:[{data:{introduction:"Introduction","bump-opacity-tiling-and-details-maps":"Bump, Opacity, Tiling and Details maps","parallax-mapping":"Parallax Mapping","blend-modes":"Blend Modes","individual-faces":"Individual Faces","front-back-uvs":"Front and Back","multi-materials":"Multi Materials","dynamic-textures":"Dynamic Textures","video-textures":"Video Textures","reflection-and-refractions":"Reflection and Refractions"}},{name:"blend-modes",route:"/docs/materials/using-materials/blend-modes",frontMatter:{description:"Blend modes control how textures and materials visually interact when rendered in a scene, allowing developers to create effects ranging from simple transparency to intricate visual styles.",sidebarTitle:"Blend Modes"}},{name:"bump-opacity-tiling-and-details-maps",route:"/docs/materials/using-materials/bump-opacity-tiling-and-details-maps",frontMatter:{description:"Enhance the visual richness of 3D scenes with various material options such as bump maps, opacity maps, tiling, and detail maps, each adding realism and depth to your textures.",sidebarTitle:"Bump Opacity Tiling and Details Maps"}},{name:"dynamic-textures",route:"/docs/materials/using-materials/dynamic-textures",frontMatter:{description:"Dynamic textures allow you to create and update textures at runtime, useful for rendering 2D elements, changing images, or creating interactive UI components within 3D scenes.",sidebarTitle:"Dynamic Textures"}},{name:"front-back-uvs",route:"/docs/materials/using-materials/front-back-uvs",frontMatter:{description:"Applying different textures to the front and back faces of a mesh enhances visual detail and realism, useful for objects like leaves, flags, or double-sided materials.",sidebarTitle:"Front Back Uvs"}},{name:"individual-faces",route:"/docs/materials/using-materials/individual-faces",frontMatter:{description:"Manipulate and customize the appearance and properties of each face of a mesh separately to achieve complex effects and greater visual detail without additional geometry.",sidebarTitle:"Individual Faces"}},{name:"introduction",route:"/docs/materials/using-materials/introduction",frontMatter:{description:"Materials define how objects appear in a 3D scene, including surface properties like color, texture, and reflectivity, contributing to the overall look and feel of the environment.",sidebarTitle:"Introduction"}},{name:"multi-materials",route:"/docs/materials/using-materials/multi-materials",frontMatter:{description:"Multi materials enable assigning different visual properties to various parts of a single mesh, ideal for creating complex objects with distinct surfaces, such as characters or vehicles.",sidebarTitle:"Multi Materials"}},{name:"parallax-mapping",route:"/docs/materials/using-materials/parallax-mapping",frontMatter:{description:"Parallax mapping simulates depth in textures to enhance surface realism, adding visual detail without requiring extra geometry, making it a performance-efficient technique.",sidebarTitle:"Parallax Mapping"}},{name:"reflection-and-refractions",route:"/docs/materials/using-materials/reflection-and-refractions",frontMatter:{description:"Reflection and refraction techniques simulate light interactions with surfaces, allowing for effects like mirrors, glass, and other reflective materials to create realistic 3D environments.",sidebarTitle:"Reflection and Refractions"}},{name:"video-textures",route:"/docs/materials/using-materials/video-textures",frontMatter:{description:"Video textures allow you to use video files as textures on 3D objects, enabling immersive multimedia experiences for applications, installations, or games that incorporate video content.",sidebarTitle:"Video Textures"}}]}]},{name:"meshes",route:"/docs/meshes",children:[{data:{"creating-meshes":"Creating Meshes","mesh-transformations":"Mesh Transformations","copies-clone
1s-and-instances":"Copies, Clones and Instances",interactions:"Interactions","separator-0":{type:"separator"},"bounding-boxes":"Bounding Boxes","bill-board":"BillBoard",decals:{title:"Decals",display:"hidden"},highlight:"Highlight",glow:"Glow",merging:{title:"Merging",display:"hidden"},curves:"Curves","levels-of-detail":"Levels Of Detail","bones-and-skeletons":{title:"Bones and Skeletons",display:"hidden"},gizmo:"Gizmo","auto-level-of-detail":"Auto Level of Detail","rendering-edges":"Rendering Edges","trial-mesh":{title:"Trial Mesh",display:"hidden"},"gaussian-splatting":"Gauissian Splatting","exploding-meshes":"Exploding Meshes","visualizing-mesh-data":{title:"Visualizing Mesh Data",display:"hidden"}}},{name:"auto-level-of-detail",route:"/docs/meshes/auto-level-of-detail",frontMatter:{description:"Auto Level of Detail dynamically adjusts mesh complexity based on its distance from the camera, balancing performance and visual fidelity by switching between high and low-resolution meshes.",sidebarTitle:"Auto Level of Detail"}},{name:"bill-board",route:"/docs/meshes/bill-board",frontMatter:{description:"A billboard is a mesh or texture that always faces the camera, commonly used for sprites, particles, or text in 3D space. It is controlled by the billboardMode property, which makes a mesh behave like a billboard.",sidebarTitle:"Bill Board"}},{name:"bones-and-skeletons",route:"/docs/meshes/bones-and-skeletons",frontMatter:{description:"Bones and skeletons are used to animate deformable characters or objects. A skeleton consists of a hierarchy of bones that can move and rotate, allowing for complex animations like walking, waving, or facial expressions.",sidebarTitle:"Bones and Skeletons"}},{name:"bounding-boxes",route:"/docs/meshes/bounding-boxes",frontMatter:{description:"A bounding box is an invisible box that encloses a mesh to define its spatial boundaries. Itâs used for collision detection, picking, and efficient rendering culling, helping to determine which objects are visible to the camera.",sidebarTitle:"Bounding Boxes"}},{name:"copies-clones-and-instances",route:"/docs/meshes/copies-clones-and-instances",frontMatter:{description:"Cloning, instancing, and thin instancing are techniques for creating mesh copies, each with its own performance benefits and use cases, especially when dealing with large numbers of objects or meshes with shared properties.",sidebarTitle:"Copies Clones and Instances"}},{name:"creating-meshes",route:"/docs/meshes/creating-meshes",children:[{data:{"set-shapes":"Set Shapes","parametric-meshes":"Parametric Meshes","polyhedra-shapes":"Polyhedra Shapes","custom-meshes":"Custom Meshes"}},{name:"custom-meshes",route:"/docs/meshes/creating-meshes/custom-meshes",frontMatter:{description:"Custom meshes are 3D objects whose geometry is explicitly defined by specifying its vertices, indices, normals, UV mapping, and sometimes colors, giving full control over its shape and appearance.",sidebarTitle:"Custom Meshes"}},{name:"parametric-meshes",route:"/docs/meshes/creating-meshes/parametric-meshes",frontMatter:{description:"Parametric meshes enable the creation of 3D objects based on mathematical parameters, allowing for flexible and dynamic geometry creation driven by specific inputs.",sidebarTitle:"Parametric Meshes"}},{name:"polyhedra-shapes",route:"/docs/meshes/creating-meshes/polyhedra-shapes",frontMatter:{description:"Polyhedra shapes consist of 3D geometries made of flat polygonal faces, useful for creating complex, mathematically precise models. They are widely used in simulations, game development, and visualizations for their symmetry and flexibility.",sidebarTitle:"Polyhedra Shapes"}},{name:"set-shapes",route:"/docs/meshes/creating-meshes/set-shapes",frontMatter:{description:"A set of predefined geometric shapes, such as boxes, spheres, cylinders, and toruses, can be easily created and customized for 3D scenes. Each shape can be fine-tuned in terms of dimensions, subdivisions, and appearance.",sidebarTitle:"Set Shapes"}}]},{name:"curves",route:"/docs/meshes/curves",frontMatter:{description:"Curves represent mathematical paths used to animate objects or define trajectories. They can control the movement of meshes, cameras, or particles, providing smooth, natural motion in 3D scenes.",sidebarTitle:"Curves"}},{name:"decals",route:"/docs/meshes/decals",frontMatter:{description:'Decals are textures projected onto the surface of a mesh, adding dynamic markings like bullet holes or graffiti without altering the original mesh, giving the effect of "sticking" textures to objects.',sidebarTitle:"Decals"}},{name:"exploding-meshes",route:"/docs/meshes/exploding-meshes",frontMatter:{description:'Exploding meshes is a visual effect where a mesh\'s components are displaced outward, creating an "explosion" appearance. This effect can be achieved through geometry manipulation or shaders for dramatic results.',sidebarTitle:"Exploding Meshes"}},{name:"gaussian-splatting",route:"/docs/meshes/gaussian-splatting",frontMatter:{description:"Gaussian splatting is a rendering technique that uses Gaussian functions to create smooth, blurred transitions, useful for effects like soft shadows, particle effects, or simulating volumetric objects.",sidebarTitle:"Gaussian Splatting"}},{name:"gizmo",route:"/docs/meshes/gizmo",frontMatter:{description:"A gizmo
1is a visual tool used for interacting with meshes in a 3D scene, typically used to move, rotate, or scale objects. Gizmos are essential for editor-like applications, allowing users to modify scene objects interactively.",sidebarTitle:"Gizmo"}},{name:"glow",route:"/docs/meshes/glow",frontMatter:{description:"Glow effects create a bright halo around objects, enhancing their visual appeal. This is useful for emphasizing specific objects, like lights or magical effects, by adding a luminous outer effect.",sidebarTitle:"Glow"}},{name:"highlight",route:"/docs/meshes/highlight",frontMatter:{description:"Highlighting a mesh applies a colored glow or outline effect around it, drawing attention to important objects. Itâs commonly used in games and simulations for visual emphasis.",sidebarTitle:"Highlight"}},{name:"interactions",route:"/docs/meshes/interactions",frontMatter:{description:"Interactions in 3D scenes are handled through intersections and picking, allowing for detection when objects in the scene intersect with each other or when a user interacts with objects using input devices.",sidebarTitle:"Interactions"}},{name:"levels-of-detail",route:"/docs/meshes/levels-of-detail",frontMatter:{description:"Levels of Detail (LOD) optimize performance by simplifying meshes as they move farther from the camera. This technique reduces rendering complexity while maintaining visual quality up close.",sidebarTitle:"Levels of Detail"}},{name:"merging",route:"/docs/meshes/merging",frontMatter:{description:"Merging involves combining multiple meshes into a single mesh, reducing the number of draw calls and improving performance, especially in large scenes with many objects sharing materials or geometry.",sidebarTitle:"Merging"}},{name:"mesh-transformations",route:"/docs/meshes/mesh-transformations",children:[{data:{position:"Position",rotation:"Rotation","coordinate-transformations":"Coordinate Transformation","parents-and-pivots":"Parents and Pivots"}},{name:"coordinate-transformations",route:"/docs/meshes/mesh-transformations/coordinate-transformations",frontMatter:{description:"Coordinate transformation in 3D involves storing the positions of vertices in local space, and using a World Matrix to transform them to world space. This matrix defines how a mesh is positioned and oriented in the global scene.",sidebarTitle:"Coordinate Transformations"}},{name:"parents-and-pivots",route:"/docs/meshes/mesh-transformations/parents-and-pivots",frontMatter:{description:"Parents and pivots are tools used to manage how meshes relate to each other in terms of movement and transformation, creating hierarchical structures for more intuitive control over groups of objects.",sidebarTitle:"Parents and Pivots"}},{name:"position",route:"/docs/meshes/mesh-transformations/position",frontMatter:{description:"Position refers to the location of a mesh in 3D space. It defines where the mesh is placed relative to the sceneâs coordinate system, determining its spatial relationship with other objects in the environment.",sidebarTitle:"Position"}},{name:"rotation",route:"/docs/meshes/mesh-transformations/rotation",frontMatter:{description:"The rotation of a mesh defines its orientation in 3D space, determining how it is turned along the X, Y, and Z axes. Modifying the rotation changes the direction the mesh faces, affecting its appearance in the scene.",sidebarTitle:"Rotation"}}]},{name:"rendering-edges",route:"/docs/meshes/rendering-edges",frontMatter:{description:"Rendering edges visualizes the wireframe structure of a mesh by highlighting its edges. This is useful for debugging and creating stylistic effects that emphasize the geometry of a mesh.",sidebarTitle:"Rendering Edges"}},{name:"trial-mesh",route:"/docs/meshes/trial-mesh",frontMatter:{description:"A trial mesh is a temporary or experimental mesh used for testing behaviors, materials, or physics in a scene before finalizing the model, commonly used in development and debugging.",sidebarTitle:"Trial Mesh"}},{name:"visualizing-mesh-data",route:"/docs/meshes/visualizing-mesh-data",frontMatter:{description:"Visualizing mesh data involves displaying a mesh's underlying data such as vertices, edges, and normals, useful for debugging, optimizing models, or teaching 3D geometry concepts.",sidebarTitle:"Visualizing Mesh Data"}}]},{name:"physics",route:"/docs/physics",children:[{data:{"rigid-bodies":"Rigid Bodies","motion-forces":"Motion Forces","collision-events":"Collision Events"}},{name:"collision-events",route:"/docs/physics/collision-events",frontMatter:{description:"Collision events allow for the detection and response to interactions between physics-enabled objects, providing information about when two bodies start colliding, remain in contact, or separate.",sidebarTitle:"Collision Events"}},{name:"motion-forces",route:"/docs/physics/motion-forces",frontMatter:{description:"Motion forces are influences applied to a physics body that affect its motion, such as gravity, friction, and user-defined forces. These forces can act continuously or instantaneously, enabling realistic physics interactions.",sidebarTitle:"Motion Forces"}},{name:"rigid-bodies",route:"/docs/physics/rigid-bodies",frontMatter:{description:"Rigid bodies are objects that maintain their shape and size when forces act upon them. Unlike soft bodies, rigid bodies move, rotate, or collide without deforming, bending, or stretching.",sidebarTitle:"Rigid Bodies"}}]},{name:"physics",route:"/docs/physics",frontMatter:{description:"Physics engine simulates physical interactions in 3D scenes, supporting engines like Havok, Cannon.js, and Ammo.js for realistic behaviors.",sidebarTitle:"Physics"}}]},{name:"index",route:"/",frontMatter:{title:"Reactylon"}},{name:"privacy",route:"/privacy",frontMatter:{description:"We prioritize your privacy and are dedicated to safeguarding your personal data. This policy outlines how we
1collect, use, and protect your information when you visit our website.",sidebarTitle:"Privacy"}},{name:"releases",route:"/releases",frontMatter:{description:"Find releases that introduce breaking changes, along with essential details for updating your projects. Review this section before upgrading. For a full release history, check the CHANGELOG.md.",sidebarTitle:"Releases"}},{name:"showcase",route:"/showcase",children:[{data:{duomo:{display:"hidden",theme:{timestamp:!1,toc:!1,sidebar:!1,pagination:!1}},"vico-dei-sotterranei":{display:"hidden",theme:{timestamp:!1,toc:!1,sidebar:!1,pagination:!1}},"polar-rose":{theme:{timestamp:!1,toc:!1,sidebar:!1,pagination:!1}},"boeing-787-dreamliner":{theme:{timestamp:!1,toc:!1,sidebar:!1,pagination:!1}},"cyberpunk-city":{theme:{timestamp:!1,toc:!1,sidebar:!1,pagination:!1}},"left-hand-menu":{theme:{timestamp:!1,toc:!1,sidebar:!1,pagination:!1}},"floating-panels":{theme:{timestamp:!1,toc:!1,sidebar:!1,pagination:!1}},"vespa-configurator":{theme:{timestamp:!1,toc:!1,sidebar:!1,pagination:!1}},"vespa-visualizer":{title:"Vespa Visualizer",theme:{timestamp:!1,toc:!1,sidebar:!1,pagination:!1}},"vision-fitness":{display:"hidden",theme:{timestamp:!1,toc:!1,sidebar:!1,pagination:!1}}}},{name:"boeing-787-dreamliner",route:"/showcase/boeing-787-dreamliner",frontMatter:{description:"A boeing at your fingertipsâtap-thumb to spawn, swipe to take off and bank. Hovering AR + spatial audio for instant, gesture-driven wow.",sidebarTitle:"Boeing 787 Dreamliner"}},{name:"cyberpunk-city",route:"/showcase/cyberpunk-city",frontMatter:{description:"A portal in your palm - reveal a neon cyberpunk city with an open hand, return to reality with a close - immersive gesture-driven storytelling.",sidebarTitle:"Cyberpunk City"}},{name:"duomo",route:"/showcase/duomo",frontMatter:{description:"Discover the Duomo di Lecce through an immersive Gaussian Splat scene, with smooth arrow-key navigation and fluid mouse-look controls for a real-time cinematic 3D experience in your browser.",sidebarTitle:"Duomo"}},{name:"floating-panels",route:"/showcase/floating-panels",frontMatter:{description:"Discover immersive mixed reality UI with floating panels, smooth animations, spatial audio, and full 6DoF interaction to select your favorite music genre.",sidebarTitle:"Floating Panels"}},{name:"left-hand-menu",route:"/showcase/left-hand-menu",frontMatter:{description:"Adaptive left-hand menu in mixed reality with context-aware call-to-actions and intuitive pinch gesture controls for seamless spatial interaction.",sidebarTitle:"Left Hand Menu"}},{name:"polar-rose",route:"/showcase/polar-rose",frontMatter:{description:"Turn a polar equation into a spatial experience. This WebXR AR prototype lets you manipulate a polar rose in real time and explore 63 dynamic combinations around you.",sidebarTitle:"Polar Rose"}},{name:"vespa-configurator",route:"/showcase/vespa-configurator",frontMatter:{description:"Customize a 3D Vespa model in real-time, adjusting paint color, mirrors, dashboard, and license plate. End the experience with a unique QR code to view your creation in augmented reality.",sidebarTitle:"Vespa Configurator"}},{name:"vespa-visualizer",route:"/showcase/vespa-visualizer",frontMatter:{description:"View your customized 3D Vespa in augmented reality with a unique QR code, bringing your design to life in the real world.",sidebarTitle:"Vespa Visualizer"}},{name:"vico-dei-sotterranei",route:"/showcase/vico-dei-sotterranei",frontMatter:{description:"Explore an immersive Gaussian Splat scene with smooth arrow-key navigation and fluid mouse-look controls, for a real-time cinematic 3D experience directly in your browser.",sidebarTitle:"Vico Dei Sotterranei"}},{name:"vision-fitness",route:"/showcase/vision-fitness",frontMatter:{description:"Vision fitness.",sidebarTitle:"Vision Fitness"}}]},{name:"showcase",route:"/showcase",frontMatter:{description:"Explore real-world use cases, demos and success stories showing how Reactylon is used across various industries to solve diverse challenges.",sidebarTitle:"Showcase"}}]},19941:(e,i,s)=>{"use strict";s.d(i,{P:()=>l});var t=s(37876),n=s(69241),a=s(30087);let r={default:"\uD83D\uDCA1",error:"\uD83D\uDEAB",info:(0,t.jsx)(a.KS,{className:"_mt-1"}),warning:"â ï¸"},o={default:(0,n.A)("_border-orange-100 _bg-orange-50 _text-orange-800 dark:_border-orange-400/30 dark:_bg-orange-400/20 dark:_text-orange-300"),error:(0,n.A)("_border-red-200 _bg-red-100 _text-red-900 dark:_border-red-200/30 dark:_bg-red-900/30 dark:_text-red-200"),info:(0,n.A)("_border-blue-200 _bg-blue-100 _text-blue-900 dark:_border-blue-200/30 dark:_bg-blue-900/30 dark:_text-blue-200"),warning:(0,n.A)("_border-yellow-100 _bg-yellow-50 _text-yellow-900 dark:_border-yellow-200/30 dark:_bg-yellow-700/30 dark:_text-yellow-200")};function l({children:e,type:i="default",emoji:s=r[i]}){return(0,t.jsxs)("div",{className:(0,n.A)("nextra-callout _overflow-x-auto _mt-6 _flex _rounded-lg _border _py-2 ltr:_pr-4 rtl:_pl-4","contrast-more:_border-current contrast-more:dark:_border-current",o[i]),children:[(0,t.jsx)("div",{className:"_select-none _text-xl ltr:_pl-3 ltr:_pr-2 rtl:_pr-3 rtl:_pl-2",style:{fontFamily:'"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'},children:s}),(0,t.jsx)("div",{className:"_w-full _min-w-0 _leading-7",children:e})]})}},25107:(e,i,s)=>{"use strict";s.d(i,{A:()=>a});var t=s(19941);s(14232);var n=s(37876);let a=function(e){var i=e.type,s=e.emoji,a=e.children;return(0,n.jsx)(t.P,{type:void 0===i?"warning":i,emoji:s,children:a})}},31870:(e,i,s)=>{"use strict";s.d(i,{A:()=>o}),s(14232);var t=s(2491),n=s.n(t),a=s(37876),r=navigator.userAgent.includes("Safari")&&!navigator.userAgent.includes("Chrome");let o=function(e){var i=e.id,s=e.url;return(0,a.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"end"},children:[i?(0,a.jsx)("canvas",{id:i,"touch-action":"none",style:{touchAction:"none"}}
1):null,s?(0,a.jsx)("img",{style:{float:"right",marginTop:10,cursor:"pointer "},onClick:function(){r?n().fire({title:"Safari browser?",html:'<p style="font-size: 1rem">This documentation utilizes <b style="color: cornflowerblue">Stackblitz WebContainers</b> to provide interactive code examples. These containers are fully supported in Chrome-based browsers and are currently in beta on Safari. <br/><br/>We recommend using a Chrome-based browser like Chrome or Edge for the best experience. If you continue using Safari, you\'ll be able to view the code, but execution is not supported.</p><br>',icon:"warning",showConfirmButton:!1,footer:'<a style="text-decoration: underline" href="'.concat(s,'" target="_blank">Proceed anyway</a>')}):window.open(s,"_blank")},src:"https://developer.stackblitz.com/img/open_in_stackblitz.svg"}):null]})}},45721:(e,i,s)=>{"use strict";s.d(i,{$B:()=>b,H3:()=>j,IA:()=>f,bD:()=>x,jy:()=>y,sz:()=>D});var t=s(67251),n=s(23745),a=s(45794),r=s(42969),o=s(59860),l=s(68887),d=s(58630),h=s(71774),c=s(78658),p=s(37876);s(72091);var u=["id","Component"],k=["id","Component"];function g(e,i){var s=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);i&&(t=t.filter(function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable})),s.push.apply(s,t)}return s}function m(e){for(var i=1;i<arguments.length;i++){var s=null!=arguments[i]?arguments[i]:{};i%2?g(Object(s),!0).forEach(function(i){(0,r.A)(e,i,s[i])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(s)):g(Object(s)).forEach(function(i){Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(s,i))})}return e}function y(e,i){var s=Object.entries(i).map(function(e){var i=(0,a.A)(e,2);return m({id:i[0]},i[1])});return{renderFeature:function(){return(0,p.jsx)(h.A,m(m({},e),{},{children:s.map(function(e){var i=e.id,s=e.Component,t=(0,o.A)(e,u);return(0,p.jsx)(c.Z5,m(m({},t),{},{children:(0,p.jsx)(s,{})}),i)})}))},renderFeatureForTest:function(s){var t,n,a,r,l=i[s];if(!l)throw Error("Unknown sceneId: ".concat(s));return n=(t=m({id:s},l)).id,a=t.Component,r=(0,o.A)(t,k),(0,p.jsx)(h.A,m(m({},e),{},{children:(0,p.jsx)(c.Z5,m(m({},r),{},{children:(0,p.jsx)(a,{})}),n)}))}}}var f=function(e){e.createDefaultLight()},x=function(e,i,s,t){e.createDefaultCamera(!0,void 0,!0);var n=e.activeCamera;i&&(n.radius=i),s&&(n.alpha=l.S0.ToRadians(s)),t&&(n.beta=l.S0.ToRadians(t))},D=function(e,i,s,t){e.createDefaultCameraOrLight(!0,void 0,!0);var n=e.activeCamera;i&&(n.radius=i),s&&(n.alpha=l.S0.ToRadians(s)),t&&(n.beta=l.S0.ToRadians(t))},j=(0,n.A)(function e(){(0,t.A)(this,e)},null,[{key:"getFaceUVs",value:function(e,i){var s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;return Array(6).fill(null).map(function(t,n){return new d.IU(n/e,(0+s)/i,(n+1)/e,(1+s)/i)})}},{key:"getFaceUVsT",value:function(){return[new d.IU(.75,.333,1,.666),new d.IU(.25,.333,.5,.666),new d.IU(.5,.333,.75,.666),new d.IU(0,.333,.25,.666),new d.IU(.25,.666,.5,1),new d.IU(.25,0,.5,.333)]}}]);function b(){return window.innerWidth<=768}},60942:(e,i,s)=>{"use strict";s.d(i,{A:()=>b});var t=s(45721),n=s(1104),a=s(14232),r=s(63296),o=s(58630),l=s(78658),d=s(37876);s(34570),s(58570),s(62154);var h=s(22121),c=s(63131),p=s(30604),u=s(69040),k=s(56447);(0,l.kz)({freeCamera:[k.S,0],sphere:[u._6,0],standardMaterial:[p.F,0],sound:[c.A,0],ground:[h.km,0]});var g=s(32746),m=s(68887),y=s(37036),f=s(78224),x=s(61741);s(47454);var D=s(38912);(0,l.kz)({hemisphericLight:[D.g,0],freeCamera:[k.S,0],sound:[c.A,0],ground:[h.km,0]}),s(72091);var j={ambient:{Component:n.A},spatial:{Component:function(){var e=(0,l.Kj)(),i=(0,a.useRef)(2),s=function(){i.current--,i.current||e.hideLoadingUI()};return(0,a.useEffect)(function(){setTimeout(function(){e.displayLoadingUI()},0)},[]),(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)("freeCamera",{name:"camera-spatial",position:new o.Pq(5,1,-100),checkCollisions:!0,applyGravity:!0,ellipsoid:new o.Pq(1,1,1),onCreate:function(e){return e.attachControl()}}),(0,d.jsx)("sphere",{name:"reggae-dome",position:new o.Pq(-40,0,10),options:{diameter:60},children:(0,d.jsx)("standardMaterial",{name:"reggae-dome-material",alpha:.3,diffuseColor:r.v9.Yellow(),backFaceCulling:!1})}),(0,d.jsx)("sound",{name:"reggae-sound",urlOrArrayBuffer:"https://cdn.pixabay.com/download/audio/2022/03/24/audio_bb9edce0b3.mp3?filename=01-main-mix-bl3-104381.mp3",options:{autoplay:!0,spatialSound:!0,loop:!0,maxDistance:30},readyToPlayCallback:s,onCreate:function(e){e.setPosition(new o.Pq(-40,0,10))}}),(0,d.jsx)("sphere",{name:"trap-dome",position:new o.Pq(40,0,10),options:{diameter:80},children:(0,d.jsx)("standardMaterial",{name:"trap-dome-material",alpha:.3,diffuseColor:r.v9.Blue(),backFaceCulling:!1})}),(0,d.jsx)("sound",{name:"trap-sound",urlOrArrayBuffer:"https://cdn.pixabay.com/download/audio/2024/01/13/audio_a4e191aca0.mp3?filename=epic-trap-intro-185815.mp3",options:{autoplay:!0,spatialSound:!0,loop:!0,maxDistance:40},readyToPlayCallback:s,onCreate:function(e){e.setPosition(new o.Pq(40,0,10))}}),(0,d.jsx)("ground",{name:"ground",checkCollisions:!0,options:{width:500,height:500}})]})},onSceneReady:function(e){e.createDefaultLight(),e.collisionsEnabled=!0,e.gravity=new o.Pq(0,-9.8,0)}},"spatial-on-mesh":{Component:function(){var e=(0,l.YJ)(),i=(0,a.useRef)(null);return(0,a.useEffect)(function(){(0,g.uD)("/meshes/biplane/ww1_plane.glb",e).then(function(s){var t,n=s.meshes[0],a=s.meshes.find(function(e){return"proppeler_base_0"===e.name}),r=0;n.position.y=3,n.position.x=7*Math.cos(r),n.position.z=7*Math.sin(r);var l=7*Math.cos(r+.015),d=7*Math.sin(r+.015);n.lookAt(new o.Pq(l,n.position.y,d),m.S0.ToRadians(180),m.S0.ToRadians(-10)),null==(t=i.current)||t.attachToMesh(n),s.addAllToScene();var h=o.PT.RotationAxis(y._0.Y,20);e.actionManager=new f.m,e.actionManager.registerAction(new x.FH({trigger:f.m.OnKeyDownTrigger,parameter:13},function(){var s;e.actionManager.dispose(),null==(s=i.current)||s.play(),e.registerBeforeRender(function(){null==(e=a.rotationQuaternion)||e.multiplyInPlace(h);var e,i=7*Math.cos(r+=.015),s=7*Math.sin(r);n.position.x=i,n.position.z=s;var t=7*Math.cos(r+.015),l=7*Math.sin(r+.015);n.lookAt(new o.Pq(t,n.position.y,l),m.S0.ToRadians(180),m.S0.ToRadians(-10))})}))})},[]),(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)("hemisphericLight",{name:"light-up",direction:o.Pq.Up()}),(0,d.jsx)("freeCamera",{name:"camera-spatial-on-mesh",position:new o.Pq(0,2,-12),checkCollisions:!0,applyGravity:!0,ellipsoid:new o.Pq(1,1,1),onCreate:function(e){return e.attachControl()}}),(0,d.jsx)("sound",{ref:i,name:"biplane-sound",urlOrArrayBuffer:"https://cdn.pixabay.com/download/audio/2022/01/18/audio_7d45099260.mp3?filename=prop-plane-14513.mp3",options:{loop:!0,maxDistance:20}}),(0,d.jsx)("ground",{name:"ground",checkCollisions:!0,options:{width:400,height:400}})]})},onSceneReady:function(){}}};let b=(0,t.jy)({isAudio:!0},j)},65020:(e,i,s)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/audio",function(){return s(96140)}])},71774:(e,i,s)=>{"use strict";s.d(i,{A:()=>f});var t=s(42969),n=s(63857),a=s(43081),r=s.n(a),o=s(14232),l=s(335),d=s(7536),h=s(13767),c=s(79279),p=s(71002),u=s(37876);function k(e,i){var s=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);i&&(t=t.filter(function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable})),s.push.apply(s,t)}return s}function g(e){for(var i=1;i<arguments.length;i++){var s=null!=arguments[i]?arguments[i]:{};
1i%2?k(Object(s),!0).forEach(function(i){(0,t.A)(e,i,s[i])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(s)):k(Object(s)).forEach(function(i){Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(s,i))})}return e}s(72091),s(21576),(0,d.h)();var m=function(){var e=(0,n.A)(r().mark(function e(i){return r().wrap(function(e){for(;;)switch(e.prev=e.next){case 0:i.createDefaultCameraOrLight(!0,void 0,!0);case 1:case"end":return e.stop()}},e)}));return function(i){return e.apply(this,arguments)}}();function y(){this.click()}let f=function(e){var i=e.children,s=e.canvasId,t=e.xrDefaultExperienceOptions,a=e.isPhysics,d=e.isAudio,k=e.forceWebGL,f=(0,o.useState)(),x=f[0],D=f[1],j=(0,o.useRef)(null);(0,o.useEffect)(function(){var e=!1,i=[];return(0,n.A)(r().mark(function s(){return r().wrap(function(s){for(;;)switch(s.prev=s.next){case 0:if(!a){s.next=4;break}return s.next=3,(0,p.A)();case 3:j.current=s.sent;case 4:if(!e){s.next=6;break}return s.abrupt("return");case 6:(i=Array.from(document.getElementsByTagName("canvas"))).forEach(function(e){e.addEventListener("pointerenter",y)}),D(i);case 9:case"end":return s.stop()}},s)}))(),function(){e=!0,i.forEach(function(e){e.removeEventListener("pointerenter",y)})}},[]);var b=function(){var e=(null==x?void 0:x.length)>1,p=o.Children.count(i)>1,y=window.__E2E__;return(0,u.jsx)(l.N,{forceWebGL:y?window.forceWebGL:k||!!t,canvasId:s,isMultipleCanvas:e,loadingScreenOptions:{component:c.A},engineOptions:{audioEngine:d},manualRenderLoop:y?function(e,i){var s;window.renderFrames=(s=(0,n.A)(r().mark(function s(t){var n;return r().wrap(function(s){for(;;)switch(s.prev=s.next){case 0:return n=i.scenes.map(function(e){return new Promise(function(i){e.useConstantAnimationDeltaTime=!0,e.deltaTime=16.66,e.executeWhenReady(i)})}),s.next=3,Promise.all(n);case 3:return i.resize(),s.abrupt("return",new Promise(function(s){var n=0,a=i.onEndFrameObservable.add(function(){++n>=t&&(i.onEndFrameObservable.remove(a),i.stopRenderLoop(e),s({renderedFrames:n,engineName:i.name}))});i.runRenderLoop(e)}));case 5:case"end":return s.stop()}},s)})),function(e){return s.apply(this,arguments)})}:void 0,children:o.Children.map(i,function(e,i){return o.cloneElement(e,{xrDefaultExperienceOptions:t?g(g({},t),{},{handSupportOptions:g(g({},t.handSupportOptions),{},{jointMeshes:{invisible:!0}})}):void 0,canvas:p?x[i]:void 0,onSceneReady:e.props.onSceneReady||m,physicsOptions:a?{plugin:new h.P(!0,j.current)}:void 0})})})};return x?t?(0,u.jsx)("div",{style:{position:"relative"},children:b()}):b():null}},79279:(e,i,s)=>{"use strict";s.d(i,{A:()=>n}),s(14232);var t=s(37876);let n=function(){return(0,t.jsxs)("div",{className:"loader",style:{display:"flex",width:"100%",height:"100%",backgroundColor:"black",position:"relative"},children:[(0,t.jsx)("div",{style:{display:"flex",width:"100%",justifyContent:"center",alignItems:"center"},children:(0,t.jsx)("img",{src:"/logo.svg",width:190})}),(0,t.jsx)("div",{style:{width:300,gridArea:1,top:"50%",left:"50%",transform:"translate(-50%, -50%)",position:"absolute"},children:(0,t.jsx)("img",{src:"/spark.svg",style:{animation:"0.75s linear 0s infinite normal none running spin",transformOrigin:"50% 50%"}})})]})}},96140:(e,i,s)=>{"use strict";s.r(i),s.d(i,{default:()=>f,useTOC:()=>y});var t=s(42969),n=s(71807),a=s(14798),r=s(34256),o=s(25107),l=s(14232),d=s(82852),h=s(37876);let c=function(){var e=(0,l.useState)(!1),i=e[0],s=e[1];return(0,l.useEffect)(function(){setTimeout(function(){var e;null!=(e=d.N.audioEngine)&&e.unlocked||s(!0)},1e3)},[]),i?(0,h.jsxs)(o.A,{children:[(0,h.jsx)("p",{style:{display:"inline"},children:'Modern browsers block audio until the user has interacted with the webpage. Babylon.js will supply a default "unmute" button ('}),(0,h.jsx)("img",{style:{display:"inline"},width:25,src:"data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2239%22%20height%3D%2232%22%20viewBox%3D%220%200%2039%2032%22%3E%3Cpath%20fill%3D%22lightgray%22%20d%3D%22M9.625%2018.938l-0.031%200.016h-4.953q-0.016%200-0.031-0.016v-12.453q0-0.016%200.
1031-0.016h4.953q0.031%200%200.031%200.016v12.453zM12.125%207.688l8.719-8.703v27.453l-8.719-8.719-0.016-0.047v-9.938zM23.359%207.875l1.406-1.406%204.219%204.203%204.203-4.203%201.422%201.406-4.219%204.219%204.219%204.203-1.484%201.359-4.141-4.156-4.219%204.219-1.406-1.422%204.219-4.203z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"}),(0,h.jsx)("p",{style:{display:"inline"},children:") on top-left corner which unlocks audio once clicked."})," Please make sure to click on it before starting any audio experience."]}):null};var p=s(31870),u=s(60942),k=s(30087);function g(e,i){var s=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);i&&(t=t.filter(function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable})),s.push.apply(s,t)}return s}function m(e){for(var i=1;i<arguments.length;i++){var s=null!=arguments[i]?arguments[i]:{};i%2?g(Object(s),!0).forEach(function(i){(0,t.A)(e,i,s[i])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(s)):g(Object(s)).forEach(function(i){Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(s,i))})}return e}function y(e){return[{value:"Ambient Sound",id:"ambient-sound",depth:2},{value:"Spatial 3D Sound",id:"spatial-3d-sound",depth:2},{value:"Attaching a sound to a mesh",id:"attaching-a-sound-to-a-mesh",depth:3},{value:"Learn More",id:"learn-more",depth:3}]}let f=(0,n.e)(function(e){var i=e.toc,s=void 0===i?y(e):i,t=m(m({a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",hr:"hr",p:"p",pre:"pre",span:"span"},(0,r.R)()),e.components);return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(t.h1,{children:"Audio"}),"\n",(0,h.jsx)(c,{}),"\n",(0,h.jsxs)(t.p,{children:["Babylon.js provides a powerful ",(0,h.jsx)("b",{children:"audio"})," engine that allows developers to integrate spatial and non-spatial sound into their 3D scenes. The framework supports 2D sounds (global audio) and 3D spatialized sounds that react to the userâs position in the scene.\nThe supported sound formats are: ",(0,h.jsx)("b",{children:".mp3"}),", ",(0,h.jsx)("b",{children:".ogg"}),", ",(0,h.jsx)("b",{children:".wav"}),", ",(0,h.jsx)("b",{children:".m4a"}),", ",(0,h.jsx)("b",{children:".mp4"}),"."]}),"\n",(0,h.jsx)(t.p,{children:"There are several types of sounds. Here are the main ones:"}),"\n",(0,h.jsx)(t.h2,{id:s[0].id,children:s[0].value}),"\n",(0,h.jsx)(t.p,{children:"Ambient sound is used to create background audio that plays consistently throughout the scene, independent of the listenerâs position. It provides a persistent audio experience, ideal for background music, environmental sounds (like wind or rain), or immersive atmospheres."}),"\n",(0,h.jsx)(t.pre,{icon:k.$0,tabIndex:"0","data-language":"tsx","data-word-wrap":"",children:(0,h.jsx)(t.code,{children:(0,h.jsxs)(t.span,{children:[(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"<"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#800000"},children:"sound"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" name"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:"'ambient'"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" urlOrArrayBuffer"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"audio"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" options"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"{ "}
1),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"autoplay:"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:" false"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:" }"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" />"})]})})}),"\n",(0,h.jsx)(p.A,{id:"ambient",url:"https://stackblitz.com/edit/reactylon-ambient-sound?file=src%2FContent.tsx"}),"\n",(0,h.jsx)(t.h2,{id:s[1].id,children:s[1].value}),"\n",(0,h.jsx)(t.p,{children:"Spatial 3D sound brings audio to life by placing sounds in a 3D space, making you feel like youâre truly inside the environment. Imagine hearing footsteps behind you, a helicopter soaring overhead, or an echo bouncing off distant wallsâjust like in real life. As you move, the sound shifts in volume, pitch, and direction, reacting naturally to your position."}),"\n",(0,h.jsxs)(t.p,{children:["In this example, use the arrow keys to move around and explore! Step inside the blue dome if youâre feeling a ",(0,h.jsx)("i",{children:"trap"})," vibe, or enter the yellow sphere if youâre in a more relaxed ",(0,h.jsx)("i",{children:"reggae"})," mood!"]}),"\n",(0,h.jsx)(t.pre,{icon:k.$0,tabIndex:"0","data-language":"tsx","data-word-wrap":"",children:(0,h.jsxs)(t.code,{children:[(0,h.jsx)(t.span,{children:(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"<>"})}),"\n",(0,h.jsxs)(t.span,{children:[(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" <"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#4EC9B0","--shiki-light":"#267F99"},children:"freeCamera"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" name"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:"'camera-spatial'"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" position"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{new"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:" Vector3"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"5"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"1"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"-"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"100"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:")"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" checkCollisions"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" applyGravity"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" ellipsoid"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{new"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:" Vector3"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"1"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"1"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"1"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:")"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}
1),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" onCreate"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"camera"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:" =>"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:" camera"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"."}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:"attachControl"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"()"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" />"})]}),"\n",(0,h.jsxs)(t.span,{children:[(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" <"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#800000"},children:"sphere"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" name"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:"'reggae-dome'"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" position"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{new"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:" Vector3"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"-"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"40"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"10"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:")"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" options"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"{ "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"diameter:"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:" 60"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:" }"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:">"})]}),"\n",(0,h.jsxs)(t.span,{children:[(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" <"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#4EC9B0","--shiki-light":"#267F99"},children:"standardMaterial"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" name"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:"'reggae-dome-material'"}
1),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" alpha"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0.3"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" diffuseColor"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"Color3"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"."}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:"Yellow"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"()"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" backFaceCulling"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{false}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" />"})]}),"\n",(0,h.jsxs)(t.span,{children:[(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" </"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#800000"},children:"sphere"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:">"})]}),"\n",(0,h.jsxs)(t.span,{children:[(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" <"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#800000"},children:"sound"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" name"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:"'reggae-sound'"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" urlOrArrayBuffer"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"mainMixbl3Url"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" options"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"{ "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"autoplay:"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:" true"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"spatialSound:"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:" true"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"loop:"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:" true"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}
1),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"maxDistance:"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:" 30"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:" }"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" onCreate"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"sound"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:") "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"=>"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:" {"})]}),"\n",(0,h.jsxs)(t.span,{children:[(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:" sound"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"."}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:"setPosition"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"new"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:" Vector3"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"-"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"40"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"10"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"));"})]}),"\n",(0,h.jsxs)(t.span,{children:[(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:" }"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" />"})]}),"\n",(0,h.jsxs)(t.span,{children:[(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" <"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#800000"},children:"sphere"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" name"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:"'trap-dome'"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" position"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{new"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:" Vector3"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"40"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"10"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:")"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}
1),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" options"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"{ "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"diameter:"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:" 80"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:" }"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:">"})]}),"\n",(0,h.jsxs)(t.span,{children:[(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" <"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#4EC9B0","--shiki-light":"#267F99"},children:"standardMaterial"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" name"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:"'trap-dome-material'"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" alpha"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0.3"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" diffuseColor"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"Color3"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"."}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:"Blue"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"()"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" backFaceCulling"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{false}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" />"})]}),"\n",(0,h.jsxs)(t.span,{children:[(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" </"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#800000"},children:"sphere"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:">"})]}),"\n",(0,h.jsxs)(t.span,{children:[(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" <"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#800000"},children:"sound"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" name"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:"'trap-sound'"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" urlOrArrayBuffer"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}
1),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"epicTrapIntroUrl"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" options"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"{ "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"autoplay:"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:" true"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"spatialSound:"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:" true"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"loop:"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:" true"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"maxDistance:"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:" 40"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:" }"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" onCreate"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"sound"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:") "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"=>"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:" {"})]}),"\n",(0,h.jsxs)(t.span,{children:[(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:" sound"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"."}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:"setPosition"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"new"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:" Vector3"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"40"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"10"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"));"})]}),"\n",(0,h.jsxs)(t.span,{children:[(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:" }"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" />"})]}),"\n",(0,h.jsxs)(t.span,{children:[(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" <"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#800000"},children:"ground"}
1),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" name"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:"'ground'"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" checkCollisions"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" options"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"{ "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"width:"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:" 500"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"height:"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:" 500"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:" }"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" />"})]}),"\n",(0,h.jsx)(t.span,{children:(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"</>"})})]})}),"\n",(0,h.jsx)(p.A,{id:"spatial",url:"https://stackblitz.com/edit/reactylon-spatial-sound?file=src%2FContent.tsx"}),"\n",(0,h.jsx)(o.A,{type:"info",children:(0,h.jsx)(t.p,{children:"Each sound comes from the center of the dome, meaning the farther you are, the quieter it will be. As you move closer, the sound gradually increases, just like in real life. Additionally, the direction of your camera matters! Rotating the camera along the Y-axis changes how you perceive the soundâturn left, and youâll hear it more in your right ear; turn right, and it shifts to your left."})}),"\n",(0,h.jsx)(t.h3,{id:s[2].id,children:s[2].value}),"\n",(0,h.jsx)(t.p,{children:"You can attach a sound to a mesh in a way that the sound plays relative to the meshâs position, so that when the mesh moves, the sound also moves with it. This can be particularly useful for creating immersive experiences where sound sources are tied to objects in the 3D world."}),"\n",(0,h.jsxs)(t.p,{children:["In this example, press ",(0,h.jsx)("i",{children:"ENTER"})," to make the biplane begin flying. Feel free to use the arrow keys to move farther if the sound is bothering you!"]}),"\n",(0,h.jsx)(t.pre,{icon:k.$0,tabIndex:"0","data-language":"tsx","data-word-wrap":"",children:(0,h.jsx)(t.code,{children:(0,h.jsxs)(t.span,{children:[(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"<"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#800000"},children:"sound"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" ref"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"soundRef"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" name"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:"'biplane-sound'"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" urlOrArrayBuffer"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}
1),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"propPlaneUrl"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" options"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"{ "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"loop:"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:" true"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"maxDistance:"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:" 20"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:" }"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,h.jsx)(t.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" />"})]})})}),"\n",(0,h.jsx)(p.A,{id:"spatial-on-mesh",url:"https://stackblitz.com/edit/reactylon-spatial-sound-on-mesh?file=src%2FContent.tsx"}),"\n",(0,h.jsx)("br",{}),"\n",(0,h.jsx)(t.hr,{}),"\n",(0,h.jsx)(t.h3,{id:s[3].id,children:s[3].value}),"\n",(0,h.jsxs)(t.p,{children:["For advanced usage, properties and customizations, please refer to Babylon.js documentation: ",(0,h.jsx)(t.a,{href:"https://doc.babylonjs.com/features/featuresDeepDive/audio/playingSoundsMusic",children:"https://doc.babylonjs.com/features/featuresDeepDive/audio/playingSoundsMusic"}),"."]}),"\n",u.A.renderFeature()]})},"/docs/audio",{filePath:"pages/docs/audio.mdx",pageMap:a.O,frontMatter:{description:"Audio engine integrates both spatial and non-spatial sounds into 3D scenes, with 2D global and 3D positional audio for dynamic sound experiences."},title:"Audio"},"undefined"==typeof RemoteContent?y:RemoteContent.useTOC)}},e=>{e.O(0,[46593,23891,28770,60683,202,50351,60390,71807,32900,75229,22160,19933,25277,46506,74341,91452,73333,2772,76300,68560,57162,2255,58570,62154,90636,38792],()=>e(e.s=65020)),_N_E=e.O()}]);
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.