# Examples Complete, self-contained pages for a few common scenarios, combining the [Configuration Reference](configuration-reference.md) and the [`DiscoVR` class](discovr-class-api.md). Copy one as a starting point and adapt it. ## Virtual tour An environment with a few 3D models placed around it, and free movement/teleport — no multiplayer, no demo content. ```html Virtual Tour ``` ## Multiplayer meetup room A shared room with voice chat, text chat, and named avatars. Everyone who opens this page with the same `roomName` lands together. ```html Meetup Room ``` `interface:userClick:true` is required here so visitors get a "click to enter" prompt — browsers block microphone/audio access without that initial user gesture. ## Physics playground Enables the built-in physics demo content (a ball rolling down ramps) to sanity-check that PhysX is working, as a starting point for your own physics-driven scene. ```html Physics Playground ``` `defaultContents:true` together with `physics:true` is what brings in the demo ramps and ball — swap those out for your own `physx-body` entities once you've confirmed physics is working (see the `DiscoVR` class's `addEntity()` for adding arbitrary components like `physx-body`). ## Embedded widget A small, non-VR scene meant to sit inside an iframe or a section of a larger page — no VR button, drag instead of pointer-lock to look around. ```html Embedded Widget ``` ## Product viewer (orbit camera) A product or 3D configurator page. There is no walking: the camera orbits the object (drag to rotate, wheel or pinch to zoom), and a slow turntable runs until the visitor touches it. `i-orbit-camera` needs a `camera` on the same entity, and that entity's position is where the view starts. ```html Product Viewer ``` ## Product configurator (variants) The product viewer above, with options the visitor can switch. Each `i-variant__` is one choice of one option group. A choice can change the colour, texture (`map`), `metalness` or `roughness` of glTF `materials` or `nodes`, and can `show` or `hide` parts. With `xray: on` (or `off`) a choice switches the model's x-ray view, on the nodes listed in `xrayNodes` (empty = the whole model), with the look of the model's own `i-xray` settings. `i-configurator-ui` on the scene lists the groups as a panel. The current choice of a group is the bus topic `variant:`, so the options can also be changed from a script, for example `DiscoVR.bus.set("variant:fabric", "Blue")`, or from an `i-bus` rule. ```html ``` ### Sharing and embedding a configurator `i-configurator-api` on the scene connects the configurator to the outside: - With `url: true`, the visitor's choices are kept in the page address, for example `?variant.fabric=Linen&variant.arms=Without`. That makes the configuration a link that can be shared. A link with those parameters opens with the same choices. - With `embed: true`, a page that shows the configurator in an ` ``` `origins` lists the pages allowed to talk to the configurator. `*`, or leaving it empty, allows any page.