Onirix OXF Player is a JavaScript-built utility that allows playing Onirix Experience Format (OXF) files in a web browser using WebGL and HTML5 canvas.

Usage

In order to load an OSF file, you must follow these steps:

Import the library from your JavaScript code or via a HTML script tag.
Create a new config object specifying the canvas element on which to load the OXF file and the host of you OXF files.
Instantiate a new OnirixPlayer with the config object.
Use the load(file, placement) to load a OXF file that will be placed on the placement position of the Scene.
Create a renderLoop function to call the render method on each animation frame.

Below you will find an example that includes all the steps:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>OXF Example</title>
    <script type="module">
      import OnirixPlayer from 'https://cdn.jsdelivr.net/npm/@onirix/oxf-player@1.0.0/+esm";
      import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.167.1/+esm";

      const canvas = document.querySelector("#canvas");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      const config = { canvas, host: "http://127.0.0.1:5003/oxf-samples/" };

      const onirixPlayer = new OnirixPlayer(config);

      async function init() {
        const center = {
          position: new THREE.Vector3(0, 0, 0),
          rotation: new THREE.Quaternion(),
        };

        await onirixPlayer.load("sample.oxf", center);

        const camera = onirixPlayer.getCamera();
        const renderer = onirixPlayer.getRenderer();

        function renderLoop() {
          requestAnimationFrame(renderLoop);
          onirixPlayer.render();
        }

        window.addEventListener("resize", () => {
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
          const fov = 45;
          const aspect = canvas.width / canvas.height;
          onirixPlayer.updateCameraParameters({ fov, aspect });
          onirixPlayer.onResize();
        });

        renderLoop();

      }

      init();
    </script>
  </head>
  <body>
    <canvas id="canvas"></canvas>
  </body>
</html>

FAQs

What is @onirix/oxf-player?

Is @onirix/oxf-player well maintained?

Package last updated on 19 Dec 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install