Hot Cocoa Stand

The standard route: load the GLB with GLTFLoader. The same file works in any glTF pipeline (Babylon.js, <model-viewer>, custom engines).

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

new GLTFLoader().load('https://polyfork.dev/cdn/hot-cocoa-stand-884f36.glb', (gltf) => {
  scene.add(gltf.scene); // real-world scale in meters, origin on the ground
});

Flat-shaded vertex colors on a single material: no textures to wire up, one draw call.

R3F takes any Object3D through <primitive>, and these modules return a ready THREE.Group synchronously. No useGLTF, no loader, no <Suspense>.

import { useMemo } from 'react';
import { Canvas } from '@react-three/fiber';
import { createAsset } from './hot-cocoa-stand-884f36.mjs';

function HotCocoaStand(props) {
  const obj = useMemo(() => createAsset(props), [JSON.stringify(props)]);
  return <primitive object={obj} />;
}

<Canvas camera={{ position: [3, 2, 4] }}>
  <hemisphereLight args={[0xffffff, 0x998877, 1.2]} />
  <directionalLight position={[4, 7, 5]} intensity={2} />
  <HotCocoaStand colorway="christmas-red" />
</Canvas>

Every knob is a prop. colorway="christmas-red" above is one of this model's own parameters, so the component rebuilds when it changes, exactly like any other React component. More on using these in R3F.

Open this model in StackBlitz A running R3F project with this model in it, no install.

useFrame((state) => obj.userData.tick?.(state.clock.elapsedTime));

1. Download the .glb from this page.
2. Unity: drag the file into Assets (glTFast or UnityGLTF import it). Godot: drop it into the project, it imports natively. Blender: File → Import → glTF 2.0.
3. Place it as-is: real-world scale in meters, origin at ground level.
4. Materials arrive as vertex colors on one material: no texture files, nothing to relink.

Using Claude Code, Cursor or another coding agent? This site is built for them: agent-readable docs at /llms.txt and a JSON API at /api. Paste this prompt:

Add the "Hot Cocoa Stand" low-poly model from polyfork.dev
to my three.js scene. It is free and hotlinkable, nothing to download:

  ES module: https://polyfork.dev/cdn/hot-cocoa-stand-884f36.mjs
             (import { createAsset } - returns a THREE.Group, real-world scale)
  GLB:       https://polyfork.dev/cdn/hot-cocoa-stand-884f36.glb

Full metadata (size, palette, rigged parts): https://polyfork.dev/api/assets/hot-cocoa-stand-884f36
Site docs for agents: https://polyfork.dev/llms.txt

Every asset in this catalog shares one identical vertex-colored material, with no textures at all. That means whole scenes collapse into a single draw call: the same result Synty-style packs get from a texture atlas, without the atlas.

import { mergeAssets } from 'https://polyfork.dev/cdn/merge.mjs';

// position your assets first, then:
const { merged, dynamic } = mergeAssets([
  terrain, tree, rock,
  { object: asset, rig },   // 'shutter' stays animatable
]);
scene.add(merged);                  // ONE draw call, static
dynamic.forEach(d => scene.add(d)); // rigged parts, still movable

Placing many copies of one model? Use THREE.InstancedMesh instead: one draw call and even less memory. The landing page's forest demo ends with exactly this merge.

Rigged parts: shutter. Each is a named group with its pivot at the hinge or axle, so one line animates it.

const asset = createAsset();
scene.add(asset);

// swing 'shutter' open (tween this value for smooth motion):
asset.getObjectByName('shutter').rotation.y = Math.PI / 4;

Loading the GLB instead? The same named nodes are there: gltf.scene.getObjectByName('shutter').