One Line 3D for the Web

SceneView Web

The lightest way to add interactive 3D models to any website. One script tag. One function call. Powered by Filament.js WASM.

Get started GitHub npm
<!-- That's it. Two lines. --> <script src="https://cdn.jsdelivr.net/npm/sceneview-web@1.2.0/sceneview.js"></script> <script> SceneView.modelViewer("canvas", "model.glb") </script>

Live demo

The DamagedHelmet model rendered in real-time with Filament.js WASM. Drag to orbit. Scroll to zoom.

Filament.js WASM

Powered by the same Filament engine used in Android SceneView

Why SceneView Web?

Production-quality rendering at a fraction of the bundle size. The same Filament engine that powers Android SceneView.

Feature SceneView Web Three.js model-viewer
Library size ~25 KB ~600 KB ~200 KB
Rendering engine Filament (WASM) Custom WebGL Three.js
PBR quality Production (matches Android) Good Good
Setup complexity 1 function call ~50 lines boilerplate 1 HTML tag
glTF / GLB Native Plugin (GLTFLoader) Native
Auto-rotate / orbit Built-in Manual (OrbitControls) Built-in
Programmatic API Full JS API Full JS API Limited (attributes)
WebXR AR/VR Planned Yes AR only

Install

Pick whatever fits your stack.

CDN (fastest)
<script src="https://cdn.jsdelivr.net/npm/sceneview-web@1.2.0/sceneview.js"></script>
npm
npm install sceneview-web
ES Module import
import SceneView from "sceneview-web";
Script tag + init
<canvas id="viewer"></canvas> <script src="https://cdn.jsdelivr.net/npm/sceneview-web@1.2.0/sceneview.js"></script> <script> SceneView.modelViewer("viewer", "model.glb", { autoRotate: true }); </script>

API reference

Five functions. That's the entire surface.

SceneView.modelViewer
modelViewer(canvasOrId, modelUrl, options?)
All-in-one: creates a viewer, loads Filament.js from CDN, loads your glTF/GLB model, sets up orbit camera and auto-rotation. Returns a viewer instance.
SceneView.create
create(canvasOrId, options?)
Creates an empty viewer without loading a model. Call loadModel(url) later. Useful when the model URL is dynamic.
viewer.loadModel
loadModel(url) → Promise
Loads a glTF or GLB model from any URL. Replaces the current model. Returns a promise that resolves when the model is ready.
viewer.setAutoRotate
setAutoRotate(enabled)
Enables or disables automatic Y-axis rotation. Pauses on user interaction, resumes after idle.
viewer.setCameraDistance
setCameraDistance(distance)
Sets the orbit camera distance from the model center. Useful for controlling the initial zoom level.
viewer.dispose
dispose()
Cleans up all GPU resources, removes event listeners, and stops the render loop. Call when removing the viewer.
Powered by Filament.js WASM — the same engine behind Android SceneView

Get involved

SceneView Web is open source. Contributions welcome.

GitHub

Star the repo, report issues, submit pull requests

Discord

Chat with developers, ask questions, share your creations