Interactive 3D Model & 360° Panorama Viewer – Xzero.js

Preview:

Description:

Xzero JS is a powerful, interactive, JavaScript (ES6)-powered 3D viewer that lets you display 3D models, scenes, and even 360° panoramas directly on your website.

It supports various 3D model formats, including GLTF/GLB, FBX, OBJ, and STL. Plus, it throws in all the bells and whistles you expect from a modern 3D library – PBR materials, environment maps, and even Draco compression for keeping file sizes down.

You can create fully interactive scenes where objects respond to user actions like hovering and clicking. Imagine making a product demo on your website where users can explore every angle of your product. Or consider adding dynamic 3D elements to educational content, making learning more engaging and interactive.

Xzero also offers different view modes, like orbit and look around, which you can constrain to specific angles of view. And if you’re a fan of eye-candy, you can easily enable soft shadows and reflections with just a few clicks.

But that’s not all. You can pin HTML elements to 3D positions, creating hotspots or labels that add an extra layer of interactivity to your scenes. And if that’s not enough, you can even play and control the animation of the model, animate the view, and tweak every property to your heart’s content.

Basic usage:

1. Install & import the xzero-js with NPM.

# NPM
$ npm install xzero-js

import * as XzeroJS from "xzero-js";

<!-- OR -->
<script type="module" src="./xzero.min.js"></script>

<!-- OR -->
<script type="module">
import * as XzeroJS from "./xzero.min.js";
</script>

2. Import plugins as per your needs.

import { Animations } from "./core/Animations.js";
import { AutoRotation } from "./core/AutoRotation.js";
import { ElementObserver } from "./core/ElementObserver.js";
import { ModelLoader } from "./core/ModelLoader.js";
import { Overlays } from "./core/Overlays.js";
import { SoftReflection } from './core/SoftReflection.js';
import { SoftShadow } from './core/SoftShadow.js';
import { OrbitControls } from "./three/OrbitControls.mod.js";

3. All you need is the <xzero-js> Custom Element to get started.

<xzero-js
  id="example"
  src="/path/to/model.fbx">
</xzero-js>

4. Customize the Xzero with the following HTML attributes:

• resource-path: path to your folder containing all 3D assets
• draco-path: path to Draco-compressed GLTF files
• env: path to an environment map
• env-background: display the environment map as a panorama background
• ratio: aspect ratio
• autorotate: enable auto rotation
• autorotate-delay: delay in seconds
• autorotate-speed: speed in seconds
• autorotate-elevation: degree of range

<xzero-js
  id="example"
  src="/path/to/model.fbx">
  autorotate
</xzero-js>