skills.rest
OpenAEC-Foundation
OpenAEC-FoundationOFFICIAL
Explore all skills by this author →
GitHub

threejs-impl-physics

Integrate deterministic physics into Three.js scenes with cannon-es and Rapier.

11|Updated Mar 20, 2026
Search Tags:#simulation#physics#deterministic#webgl#threejs#rapier#cannon-es
One-click install
npx skills add https://github.com/OpenAEC-Foundation/Three.js-Claude-Skill-Package --skill threejs-impl-physics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-impl-physics
Source: https://github.com/OpenAEC-Foundation/Three.js-Claude-Skill-Package/tree/main/skills/source/threejs-impl/threejs-impl-physics
Command: npx skills add https://github.com/OpenAEC-Foundation/Three.js-Claude-Skill-Package --skill threejs-impl-physics

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Solves the lack of deterministic physics integration for Three.js scenes by providing patterns for cannon-es and Rapier.

Core Features & Use Cases

  • Deterministic physics patterns and fixed time step integration for cannon-es and Rapier.
  • Engine-appropriate world setup, body creation, collisions, and constraints, plus optional React Three Fiber integration patterns.
  • Use cases include interactive scenes with falling objects, doors, ramps, and raycast-based interactions.

Quick Start

Initialize a physics world (cannon-es or Rapier), attach colliders to your Three.js meshes, and run a fixed-timestep simulation in your render loop.

Frequently Asked Questions about threejs-impl-physics

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up deterministic physics in a Three.js scene?▼

Deterministic physics in Three.js is achieved by using a fixed timestep when calling world.step() in your render loop, ensuring consistent simulation behavior across different hardware and frame rates.

Does Rapier require any special initialization before creating physics bodies in Three.js?▼

Rapier physics integration requires awaiting RAPIER.init() before use, followed by fixed-timestep world.step() execution and proper syncing between physics bodies and Three.js meshes.

What is the best way to choose between cannon-es and Rapier for WebGL physics?▼

Both cannon-es and Rapier provide deterministic physics patterns for Three.js, with engine-appropriate world setup, body creation, collisions, and constraints, plus optional React Three Fiber integration patterns.

Can I use these deterministic physics patterns with React Three Fiber?▼

Yes, the Skill includes optional React Three Fiber integration patterns, enabling deterministic physics body syncing and fixed-timestep simulation within the React component tree.

Why do my falling objects and doors behave inconsistently across different devices in Three.js?▼

Inconsistent physics behavior for falling objects, doors, and ramps is caused by variable timesteps; running a fixed-timestep world.step() ensures deterministic simulation results across devices.

What collisions and constraints are supported for Three.js physics simulations?▼

Supported patterns include engine-appropriate collisions, constraints, body creation, and raycast-based interactions for simulating falling objects, doors, and ramps in Three.js scenes.

Related Skills

Explore More Software Engineering Skills→
Impertio-StudioImpertio-Studio
11

threejs-impl-physics

Integrate cannon-es and Rapier physics simulations into Three.js scenes.

Official
Advanced
yogaprasetya22yogaprasetya22

react-three-fiber

Convert json-render 3D scene specifications into React Three Fiber components.

Community
Intermediate
dyCuong03dyCuong03
6

wave5-fixed-step-simulation-system-group

Schedule Unity DOTS systems with UpdateBefore and UpdateAfter relative to PhysicsSystemGroup.

Community
Intermediate
adryanmoldokkr32-pixeladryanmoldokkr32-pixel
2

threejs-impl-physics

Integrate and optimize cannon-es and Rapier physics in Three.js scenes.

Community
Advanced