Home

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.jsGLTFLoader from three/examples/jsm/loaders/GLTFLoader
  • Babylon.jsSceneLoader.Append with the GLTF plugin (default)
  • PlayCanvas — drop GLB into Assets, instantiate at runtime
  • A-Frame<a-entity gltf-model="url(./model.glb)">