A lightweight Three.js-powered TypeScript library for embedding interactive 3D models with orbit controls, HDR lighting, shadows, animation playback, and full accessibility.
Install from npm or load from CDN — choose the method that fits your workflow.
npm install js-cloudimage-3d-view threeimport { CI3DView } from 'js-cloudimage-3d-view';
const viewer = new CI3DView('#my-container', {
src: 'model.glb',
autoRotate: true,
shadows: true,
});<script src="https://unpkg.com/three/build/three.min.js"></script>
<script src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-3d-view/1.1.0/js-cloudimage-3d-view.min.js?vh=709a52&func=proxy"></script>
<div id="viewer"
data-ci-3d-src="model.glb"
data-ci-3d-auto-rotate="true"
data-ci-3d-shadows="true"
style="width:100%; aspect-ratio:16/9">
</div>
<script>
CI3DView.autoInit();
</script>Automatically detects and loads OBJ, STL, FBX, GLB/glTF, 3DS, AMF, and IFC formats.
glTF 2.0 binary format with DRACO compression support. The recommended format for web 3D.
Wavefront OBJ with automatic MTL material file detection.
STL stereolithography format, commonly used for 3D printing.
Autodesk FBX with embedded animations and skeleton data.
Autodesk 3D Studio format with geometry, UV mapping, and basic materials.
Additive Manufacturing File format for 3D printing with material and color support.
Industry Foundation Classes (IFC) for BIM — architecture and construction models.
3-point lighting, HDR environment maps, tone mapping, and shadows.
Built-in animation controls for models with embedded animations.
Tweak settings in real-time and copy the generated code.
const viewer = new CI3DView('#container', {
src: 'model.glb',
autoRotate: true,
shadows: true,
fullscreenButton: true,
backgroundToggleButton: true,
screenshotButton: true,
});