skills.rest
Bailipa
BailipaCOMMUNITY
Explore all skills by this author →
GitHub

threejs-impl-physics

Integrate cannon-es or Rapier physics into Three.js scenes with synchronized meshes.

4|Updated Apr 14, 2026
Search Tags:#physics#threejs#rapier#raycasting#cannon-es#sync-patterns
One-click install
npx skills add https://github.com/Bailipa/EZTor_FULLBLOOD --skill threejs-impl-physics-bailipa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-impl-physics
Source: https://github.com/Bailipa/EZTor_FULLBLOOD/tree/main/.opencode/skills/threejs/threejs-impl/threejs-impl-physics
Command: npx skills add https://github.com/Bailipa/EZTor_FULLBLOOD --skill threejs-impl-physics-bailipa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Three.js scenes often lack robust physics, leading to jittery motion, wrong collisions, and detached visuals between rendered objects and physics bodies. This Skill provides clear guidance for integrating physics using cannon-es or Rapier, proper synchronization, and safe patterns to avoid common mistakes such as incorrect Vec3 conversions or missing world.step calls.

Core Features & Use Cases

  • Engine selection guidance for cannon-es vs Rapier based on scene size, determinism, and performance.
  • Sync patterns to keep Three.js meshes aligned with physics bodies and reliable raycasting.
  • Practical examples and anti-patterns to accelerate production-ready integrations.

Use cases include building interactive 3D demos, training simulations, or games that require stable physics in a Three.js environment.

Quick Start

Use this skill to wire up a Three.js scene with physics bodies and a synchronized 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 integrate physics into a Three.js scene?▼

To integrate physics into a Three.js scene, coordinate a physics engine like cannon-es or Rapier with your rendering loop, ensuring proper synchronization of meshes to physics bodies and calling world.step for stable motion.

Why are my Three.js physics objects jittery and misaligned?▼

Jittery motion and misaligned visuals in Three.js physics usually occur from missing world.step calls or incorrect Vec3 conversions, which proper mesh-to-body synchronization patterns resolve.

Should I use cannon-es or Rapier for Three.js physics?▼

Choose between cannon-es and Rapier based on your Three.js scene size, determinism requirements, and performance needs, with Rapier generally better suited for large-scale simulations.

How do I perform raycasting interactions with physics bodies in Three.js?▼

Raycasting interactions in Three.js require proper synchronization of meshes to physics bodies, enabling accurate raycasting support in both cannon-es and Rapier engine backends.

Can I achieve deterministic physics simulation in a large Three.js environment?▼

Yes, you can achieve deterministic physics simulation in large Three.js environments by selecting an appropriate engine backend and applying proper synchronization patterns to maintain scene stability.

What are common anti-patterns when wiring up Three.js physics?▼

Common Three.js physics anti-patterns include incorrect Vec3 conversions, missing world.step calls, and failing to properly sync meshes to physics bodies, which cause detached visuals and wrong collisions.

Related Skills

Explore More Software Engineering Skills→
OpenAEC-FoundationOpenAEC-Foundation
11

threejs-impl-physics

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

Official
Advanced
het8802het8802
3

threejs-interaction

Implement interactive Three.js experiences with raycasting and camera controls.

Community
Advanced
Impertio-StudioImpertio-Studio
11

threejs-impl-physics

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

Official
Advanced
XyrcesXyrces
2

physics_engine_integration

Integrate deterministic physics into an engine-agnostic ECS with a three-phase pipeline.

Community
Advanced