A very common reason is a wrong site baseUrl configuration.\n

Current configured baseUrl = /egjs-view3d/ \n

We suggest trying baseUrl = \n\n';var e=document.getElementById("docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,r="/"===s.substr(-1)?s:s+"/";e.innerHTML=r}}window.__DOCUSAURUS_INSERT_BASEURL_BANNER=!0,document.addEventListener("DOMContentLoaded",maybeInsertBanner)

Skip to main content
View3D
npm (scoped)LicenseTypescriptGitHub Repo stars
npm install @egjs/view3d
Fast & Customizable glTF 3D model viewer, packed with full of features!
🚀 Get Started🚂 Playground
Features
glTF Viewer
Load 3D model
View, rotate, translate and zoom your glTF 3D models in the web. Works on both 🖥️ Desktop & 📱 Mobile
Customize your viewer with Options like autoplay, skybox, and shadow
Augmented Reality
View3D supports Augmented Reality based on WebXR, Scene Viewer, and AR Quick Look
You can see, rotate, move, and scale the 3D model on the floor & wall in our AR sessions.
Supports compressed glTF 2.0 models
View3D can display compressed glTF models with the following extensions.
Speed up your page load with compressed glTF models. Check out how to do it in our guide page.
Quick Start
HTML
<div id="view3d" class="view3d-wrapper view3d-square">
  <canvas class="view3d-canvas"></canvas>
</div>
JS
import View3D from "@egjs/view3d";
import "@egjs/view3d/css/view3d-bundle.min.css";

const view3D = new View3D("#view3d", {
  src: "URL_TO_YOUR_3D_MODEL",
  envmap: "URL_TO_YOUR_HDR_IMAGE",
});
CDN Links
JS
https://unpkg.com/@egjs/view3d@latest/dist/view3d.pkgd.min.js
CSS
https://unpkg.com/@egjs/view3d@latest/css/view3d-bundle.min.css