Examples

Every example runs in your browser, here, and its code is a click away: press the </> on a card to read it on GitHub. Each one is its own small Vite app in examples/, run against the engine's sources, so you can clone the repository and start any of them with one command.

Running them yourself

git clone https://github.com/QusaiAlbonni/eulerjs.git
cd eulerjs
npm install
npm run dev          # the sailboat
npm run dev:city     # the city
npm run dev:f1       # the formula car at Monza
npm run dev:wedding  # the wedding
npm run dev:ocean    # the spectral ocean
npm run dev:basics   # the short examples
npm run dev:three-addons  # three.js's own physics examples

Games

Complete games built only on the public API: what the engine is for.

WebGPU

Sailboat

Sail on a spectral sea among rocks that stand on the sea floor and crates drifting on the water, which the hull shoves aside. Raise a storm with the sea’s wind, wave height and choppiness.

A/D rudder · Q/E mainsail · Z/X jib · V camera · N day/night

• marine
• buoyancy
• sails
• spectral sea
• post-processing

Open example →View code

City

Drive a car through a city of towers, knocking crates, cones and barrels about, past people walking the pavements: active ragdolls that fall in a heap and get up again.

W/S drive and brake · A/D steer · Space handbrake · R back on the wheels · V camera

• vehicle
• ragdolls
• joints
• drives

Open example →View code

Formula car at Monza

A time trial in a Formula 1 car round Monza, the circuit laid out from OpenStreetMap: slip tyres, downforce, DRS, a seamless gearbox, kerbs and grass to bounce over, and an engine you hear simulated, after engine-sim.

W/S throttle and brake · A/D steer · E/Q shift · Space DRS · T traction control · C camera · I inspect the car · N sound · R back to the grid · Esc menu

• vehicle
• slip tyres
• aerodynamics
• engine sound
• worker

Open example →View code

Wedding

A wedding in first person: shove chairs, carry flutes, topple the champagne tower. Hundreds of instanced bodies that start asleep and wake when disturbed.

WASD walk · Shift run · Space jump · click to shove or throw · E pick up · R back to the entrance

• instancing
• sleeping
• TargetJoint
• first person

Open example →View code

WebGPU

Spectral ocean

A spectral sea drawn to the horizon around the camera, crates afloat on the very waves drawn. Switch between the quadtree and ring layouts, tune the sea and its foam.

• FFT waves
• LOD
• foam
• worker

Open example →View code

Basics

Short examples, one idea each, in plain three.js.

Hello

A world, a body bound to a mesh, and the render loop: the smallest program there is.

• World
• Body

Open example →View code

Tumbling

Exact inertia from meshes: an uneven box flipping over and over when spun about its middle axis.

• inertia
• mass properties

Open example →View code

Springs

Writing your own Behavior (a spring) and Plugin (air drag). Click to apply impulses.

• Behavior
• Plugin
• impulses

Open example →View code

Chain

Links pinned together with distance joints.

• DistanceJoint

Open example →View code

Collisions

A pyramid of crates and balls to throw at it.

• contacts
• stacking

Open example →View code

WebGPU

Floating

Cork, pine and oak cubes afloat on a spectral sea: each floats at its own draft, and the pine one rolls onto an edge.

• buoyancy
• spectral sea

Open example →View code

Joints

A self-closing door, a windmill on a motor, a lift on a slider, a lamp on a cone-twist joint and a bridge of fixed joints that break.

• hinge
• slider
• motors
• breaking

Open example →View code

Scene queries

Click to cast rays and push what they hit, right-click for a blast found by an overlap test, and a capsule steering itself with shape casts.

• ray casts
• shape casts
• overlaps

Open example →View code

Sensors and events

A trigger zone that lights up while anything is in it, and crates that flash when something starts touching them.

• sensors
• contact events

Open example →View code

Terrain and meshes

Barrels, cones and balls rolling down a heightfield, and a torus knot as a triangle mesh collider.

• heightfield
• MeshCollider
• bvh

Open example →View code

Solvers

The same stack and pendulum solved by XPBD and by soft step, side by side.

• soft step
• XPBD

Open example →View code

three.js's own examples

three.js's physics examples, copied as they are with one change: they await EulerPhysics(), from @eulerjs/scene, where they awaited RapierPhysics().

three.js: basic

three.js’s own example of boxes, balls and rounded boxes dropped onto a floor, one a second, on EulerPhysics in place of RapierPhysics.

• EulerPhysics
• userData.physics

Open example →View code

three.js: instancing

three.js’s own example of 800 instanced boxes and balls, respawned with setMeshPosition and shaken with applyImpulse, on EulerPhysics.

• EulerPhysics
• InstancedMesh

Open example →View code

three.js: terrain

three.js’s own example of spheres, boxes and cylinders tumbling down a heightfield made by addHeightfield, on EulerPhysics.

• EulerPhysics
• heightfield

Open example →View code

Tools

Pages that measure rather than show: checks of the GPU's waves and benchmarks.

WebGPU

GPU waves against the CPU

The GPU’s inverse FFT of the spectral sea read back and compared, field by field, with the CPU’s.

• verification

Open example →View code

Floating: main thread or worker

What floating crates on the spectral sea cost the main thread, with its waves evaluated there or in a worker.

• benchmark
• worker

Open example →View code

WebGPU

The examples marked WebGPU draw with three's WebGPURenderer, which uses WebGPU where the browser has it and falls back to WebGL 2 by itself where it doesn't: they run in any current browser.