Skip to main content

Quick Start

DOM Structure​

View3D requires appropriate DOM structure for initialization. There should be one canvas element inside the wrapper element.

<div id="wrapper-el" class="view3d-wrapper view3d-square">
  <canvas class="view3d-canvas"></canvas>
</div>
new View3D("#wrapper-el");

All class names are optional, but it's needed when you're using our CSS files.

Setup Script & Styles​

import View3D from "@egjs/view3d";
import "@egjs/view3d/css/view3d-bundle.min.css";
// or import "@egjs/view3d/css/view3d.min.css"; if you don't use any plugin or annotations

const view3D = new View3D("#view3d", {
  // Options
})

Ratio helper classes​

The class view3d-square(or view3d-1by1) will set the height of canvas element same to its width.
You can use one of our other pre-defined classes to set responsive canvas height with fixed ratio.

view3d-square
view3d-1by1
view3d-5by4
view3d-4by3
view3d-3by2
view3d-5by3
view3d-16by9
view3d-2by1
view3d-3by1
view3d-4by5
view3d-3by4
view3d-2by3
view3d-3by5
view3d-9by16
view3d-1by2
view3d-1by3

You can also can set canvas width/height without ratio class but with CSS like this, and View3D will follow.

.view3d-wrapper {
  width: 100%;
  height: 100vh;
}

Displaying a model​

3D model will be displayed on the canvas if you set the option src.

Load 3D model
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm_default.png"
}

View3D uses generated envmap as a default light source.
You can turn this off with the option useDefaultEnv, or you can use a HDR image as envmap for IBL(image-based lighting), so you can set any HDR image for the option envmap and model will be litten.

Load 3D model
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    envmap: "/egjs-view3d/texture/artist_workshop_1k.hdr",
    poster: "/egjs-view3d/poster/alarm.png"
}

To get HDR images, check this awesome collection of Poly Haven