See this model drawn out of its own program, then drag any number in it and watch that part re-form. It needs an account, and free models open on a free one.
3 legs, and it walks:
walk.mjs finds the ground under each foot, plants it so it does not
slide, and leans the body onto the plane through the feet that are down. Natural step
1.972 m, measured off this model. The numbers are in the
API under gait if you are not in three.js.
Part of Sky Town
59 matching parts, one palette and scale
The fastest path in three.js: one import, zero loaders. The module returns a ready THREE.Group with named parts.
import { createAsset } from './cargo-walker-6b8a31.mjs';
scene.add(createAsset());
<!doctype html>
<script type="importmap">
{ "imports": { "three": "https://unpkg.com/[email protected]/build/three.module.js",
"three/addons/": "https://unpkg.com/[email protected]/examples/jsm/" } }
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { createAsset } from './cargo-walker-6b8a31.mjs';
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf3ecdc);
// Far plane at 5000: terrain blocks are 64 to 256m across and a 100m
// frustum slices them.
const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 0.1, 5000);
camera.position.set(3, 2, 4);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.style.margin = 0;
document.body.appendChild(renderer.domElement);
scene.add(new THREE.HemisphereLight(0xffffff, 0x998877, 1.2));
const sun = new THREE.DirectionalLight(0xfff2e0, 2);
sun.position.set(4, 7, 5);
scene.add(sun);
scene.add(createAsset());
new OrbitControls(camera, renderer.domElement);
renderer.setAnimationLoop(() => renderer.render(scene, camera));
</script>
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('./cargo-walker-6b8a31.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 './cargo-walker-6b8a31.mjs';
function CargoWalker(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} />
<CargoWalker colorway="barn-red" />
</Canvas>
Every knob is a prop. colorway="barn-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.
A model that animates itself exposes
userData.tick(seconds). Drive it from R3F's own loop:
useFrame((state) => obj.userData.tick?.(state.clock.elapsedTime));
To merge a static set into a single draw call, import
mergeAssets from https://polyfork.dev/cdn/merge.mjs and pass the merged
group to one <primitive>.
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:
Your agent authenticates with an API key: create one under My assets after purchase, and it can fetch everything you own.
I own "Cargo walker" on polyfork.dev. My API key is in
the POLYFORK_KEY env var. Download it into my project and add it
to my three.js scene:
metadata: GET https://polyfork.dev/api/assets/cargo-walker-6b8a31 files: GET https://polyfork.dev/dl/cargo-walker-6b8a31.glb
GET https://polyfork.dev/dl/cargo-walker-6b8a31.mjs
(both with header Authorization: Bearer $POLYFORK_KEY)
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 }, // 'hip-fl' 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: hip-fl, knee-fl, hip-fr, knee-fr, hip-r, knee-r. 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 'hip-fl' open (tween this value for smooth motion):
asset.getObjectByName('hip-fl').rotation.y = Math.PI / 4;
Loading the GLB instead? The same named nodes are there: gltf.scene.getObjectByName('hip-fl').
Subscribe and download every asset on Polyfork, this one included, plus every new one: 159 new assets in the last 7 days.
or $149/year · what is included
One-time purchase, no renewal. Every kit and every asset, current and future.
99 of 100 seats at this price
Towering village-built cargo walker about 11m tall on three very long articulated stilt legs that stride over rooftops, a small rounded riveted boiler-plate body slung high with a big open timber cargo cradle on its back. Part of the Sky Town kit.