threejs-vehicles: Traffic for every road, rail, sea and sky.
threejs-vehicles is in development, but usable today. It generates fourteen vehicle types from seeds and parameters and moves whole fleets along road networks, rails, harbour loops, flight paths, launch pads and carrier decks.
A whole fleet in one object.
Describe groups of vehicles as plain JSON, each with a type, a count and a route, and add fleet.object to your scene. Roads come from threejs-city's city.graph or any graph of that shape. The API is still settling before the first release, so names may change.
import { Fleet, Vehicle } from 'threejs-vehicles'
const fleet = new Fleet({
groups: [
{ type: 'car', count: 300, route: { kind: 'roads' } },
{ type: 'train', count: 1, params: { wagons: 8, cargo: 'mixed' }, route: { kind: 'path', points: rail } },
{ type: 'aircraft-carrier', count: 1, route: { kind: 'circle', center: [2000, 0, 1400], radius: 1300 } },
{ type: 'fighter-jet', count: 6, route: { kind: 'host', group: 2 } }, // parked on the deck
{ type: 'rocket', count: 1, route: { kind: 'pad', position: [-200, 0, 700], period: 90 } },
],
}, { roads: city.graph })
scene.add(fleet.object)
renderer.setAnimationLoop(() => { fleet.update(); renderer.render(scene, camera) })
fleet.set({ lights: 1, exposure: { snowfall: 1 } }) // headlights on; parked cars collect snow
const bus = new Vehicle({ type: 'car', params: { style: 'bus' }, speed: 8, seed: 3 })import { Fleet, Vehicle } from 'threejs-vehicles/react'
function Traffic({ graph, night, rain }) {
return (
<>
<Fleet
roads={graph}
groups={[
{ type: 'car', count: 300, route: { kind: 'roads' } },
{ type: 'bicycle', count: 30, route: { kind: 'roads' } },
]}
lights={night}
exposure={{ rain }}
/>
<group position={[0, 0, 5]}>
<Vehicle type="car" params={{ style: 'bus' }} speed={6} tint="#c0392b" />
</group>
</>
)
}What is working now.
Every row without a "planned" tag is in the package and in the demos: a gallery of every type, and a live scene with traffic, a train, a harbour, a carrier group, planes overhead and a rocket launch. Planned rows are on the roadmap.
Fourteen vehicle types
Bicycles to aircraft carriers.
Models built into typed arrays, with smooth lofted bodywork for the cars, pickups and trucks, each type with its own JSON parameters: car style (including lookalikes of six well-known cars), pickup cab and bed, truck cab and trailers, tractor implements, train traction, wagons and cargo, liner decks and funnels, carrier deck spots, rocket stages and boosters. Wheels spin and steer, fans and propellers turn. The same type, parameters and seed always give the same vehicle.
- Car
- Pickup
- Truck
- Tractor
- Bicycle
- Train
- Fishing boat
- Cruise liner
- Speedboat
- Hovercraft
- Aircraft carrier
- Airplane
- Fighter jet
- Rocket
Routes of every kind
Roads, rails, loops and parking.
A fleet is a list of groups, each with a route. On a road network, cars and bikes keep to their lane, pick a seeded turn at each junction and round corners on a curve. Trains pull their wagons along a smoothed path.
- path
- circle
- roads
- static
- pad
- host
Boats on real waves
Heave, pitch, roll and wakes.
Pass the same wave settings as a threejs-water ocean and boats bob on them, sampled under bow, stern and both sides, with a wake behind each hull. Bicycles and speedboats lean into turns.
Carrier decks
Vehicles that carry vehicles.
A host route parks a group on the deck spots of another group's vehicles, so fighter jets ride a carrier as it steams in a circle.
Rocket launches
Countdown, ascent, staging.
Rockets count down on the pad, lift off on a plume and pitch over in a gravity turn, drop spent stages at set times and launch again every period seconds. The flight is analytic, so any moment can be scrubbed to.
A fleet in a few draw calls
Instanced, with lights at night.
Every vehicle is drawn through one InstancedMesh per model part (bodies, wheels, fans, stages) with a single shared material, driven from typed arrays. Raise lights with the sky's night value and headlights and windows come on.
Weather and damage
Rain, snow and fire.
Vehicles get wet in rain and dry off, gather snow when parked and shed it at speed, and catch fire in a wildfire. Badly damaged or burning vehicles on land, rail and sea roll to a stop.
Networks between settlements
Rail lines, shipping lanes and air routes.
planRoute() already finds plausible loops on a generated world: deep enough water for a hull, flat ground for rails, safe height for aircraft. Next: rail lines, shipping lanes and flight paths between settlements, with traffic placed by threejs-worldgen.
Get things moving.
threejs-vehicles is in development: drive every vehicle in the live demos, read the API reference, or follow along on GitHub until the first release.