AI 3D models in Three.js & the web
GLB is the web's native 3D format. KingDavez Studios models load directly into <model-viewer>, react-three-fiber, raw Three.js, and Babylon.js — no conversion.
<model-viewer> (1 line)
<!-- model-viewer (easiest) --> <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> <model-viewer src="https://kingdavez.click/path/to/model.glb" camera-controls auto-rotate style="width:100%;height:480px"></model-viewer>
react-three-fiber
// react-three-fiber + drei
import { Canvas } from "@react-three/fiber";
import { OrbitControls, useGLTF } from "@react-three/drei";
function Model() {
const { scene } = useGLTF("https://kingdavez.click/path/to/model.glb");
return <primitive object={scene} />;
}
export default () => (
<Canvas camera={{ position: [0, 1, 3] }}>
<ambientLight intensity={0.6} />
<directionalLight position={[5, 5, 5]} />
<Model />
<OrbitControls />
</Canvas>
);Compatible loaders
- Three.js —
GLTFLoaderfromthree/examples/jsm/loaders/GLTFLoader - Babylon.js —
SceneLoader.Appendwith the GLTF plugin (default) - PlayCanvas — drop GLB into Assets, instantiate at runtime
- A-Frame —
<a-entity gltf-model="url(./model.glb)">