@onirix/oxf-player
v1.0.0
Published
JavaScript library for playing OXF files
Downloads
55
Readme
Onirix OXF Player
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 theplacementposition of the Scene. - Create a
renderLoopfunction to call therendermethod 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/[email protected]/+esm";
import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/+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>