Part of Chrome Arcology Transit kit
43 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 './service-drone-bot-3817e5.mjs';
scene.add(createAsset());
import * as asset from './service-drone-bot-3817e5.mjs';
import { decalsFromSvg } from 'https://polyfork.dev/cdn/decal.mjs';
const model = asset.createAsset();
scene.add(model);
// any SVG with flat colours (up to three, plus transparency); text as paths
const svg = await (await fetch('/your-logo.svg')).text();
await decalsFromSvg(model, asset.decals, svg);
Areas on this asset:
flank-plate (0.11m×0.17m)
— pass a filtered asset.decals to print on some only.
The bake runs in a worker; on a GLB mount read the areas from
https://polyfork.dev/cdn/service-drone-bot-3817e5-params.json and pass
them in place of asset.decals. Full reference:
llms.txt § Your own logo.
<!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 './service-drone-bot-3817e5.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('./service-drone-bot-3817e5.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 './service-drone-bot-3817e5.mjs';
function ServiceDroneBot(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} />
<ServiceDroneBot undercarriage="wheels" />
</Canvas>
Every knob is a prop. undercarriage="wheels" 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 "Service Drone Bot" 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/service-drone-bot-3817e5 files: GET https://polyfork.dev/dl/service-drone-bot-3817e5.glb
GET https://polyfork.dev/dl/service-drone-bot-3817e5.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 }, // 'arm-l' 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: arm-l, arm-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 'arm-l' open (tween this value for smooth motion):
asset.getObjectByName('arm-l').rotation.y = Math.PI / 4;
Loading the GLB instead? The same named nodes are there: gltf.scene.getObjectByName('arm-l').
Subscribe and download every asset on Polyfork, this one included, plus every new one: 215 new assets in the last 7 days.
or $99/year · what is included
One-time purchase, no renewal. Every kit and every asset, current and future.
24 of 100 seats left
Knee-high autonomous city service bot roughly 0.7m across, a swollen white capsule body on a dark grey rounded base, one recessed tinted sensor band for a face and a thin pastel-mint ring light; two stubby folded manipulator nubs. Part of the Chrome Arcology Transit kit.