@egjs/tiny-3d NPM

@egjs/tiny-3d

Yet another 3d model viewer

Getting Started

@egjs/tiny-3d requires one canvas element to be initialized.

<!-- Wrapper element -->
<div id="some-wrapper">
  <!-- Tiny3D needs one canvas element to render a 3d model -->
  <!-- You don't have to set width / height attribute of it, as Tiny3D will manage that for you. -->
  <!-- Just set its size with CSS, then Tiny3D will use it -->
  <canvas id="my-canvas"></canvas>
  <!-- Other UI elements of your choice here -->
</div>

<!-- Here's some sample CSS style for the reference -->
<style>
#some-wrapper {
  width: 100vw;
  height: 100vh;
}
#my-canvas {
  width: 100%;
  height: 100%;
}
</style>

Then you can use it like

import Tiny3D from "@egjs/tiny-3d";

const canvasEl = document.querySelector("#my-canvas");
const tiny3d = new Tiny3D(canvasEl);
// or just
const tiny3d = new Tiny3D("#my-canvas");

See more info at our tutorials / documentations page.