Convert Figma logo to code with AI

lo-th logoOimo.js

Lightweight 3d physics engine for javascript

3,047
301
3,047
49

Top Related Projects

4,134

Direct port of the Bullet physics engine to JavaScript using Emscripten

A lightweight 3D physics engine written in JavaScript.

2,763

Physics plugin for Three.js

16,610

a 2D rigid body physics engine for the web ▲● ■

💣 A lightweight 3D physics engine written in JavaScript.

Quick Overview

Oimo.js is a lightweight 3D physics engine for JavaScript. It's designed to be fast and easy to use, making it suitable for web-based 3D applications, games, and simulations. Oimo.js can be integrated with various 3D rendering libraries like Three.js or Babylon.js.

Pros

  • Lightweight and fast performance
  • Easy to integrate with popular 3D rendering libraries
  • Supports various shapes and constraints for physics simulations
  • Active development and community support

Cons

  • Limited documentation compared to some larger physics engines
  • May lack some advanced features found in more comprehensive physics engines
  • Performance may degrade with very complex simulations
  • Learning curve for those new to 3D physics programming

Code Examples

Creating a world and adding a sphere:

const world = new OIMO.World({ 
    timestep: 1/60, 
    iterations: 8, 
    broadphase: 2,
    worldscale: 1, 
    random: true,
    info: false
});

const sphereBody = world.add({ 
    type: 'sphere',
    size: [1],
    pos: [0, 10, 0],
    move: true
});

Adding a static ground plane:

const ground = world.add({
    type: 'box',
    size: [100, 2, 100],
    pos: [0, -1, 0],
    move: false
});

Stepping the physics simulation:

function update() {
    world.step();
    
    // Update your 3D objects' positions here
    // For example, with Three.js:
    // sphere.position.copy(sphereBody.getPosition());
    
    requestAnimationFrame(update);
}

update();

Getting Started

  1. Include Oimo.js in your project:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/oimo/1.0.9/oimo.min.js"></script>
    
  2. Create a world and add objects:

    const world = new OIMO.World({ gravity: [0, -9.8, 0] });
    const sphere = world.add({ type: 'sphere', size: [1], pos: [0, 10, 0], move: true });
    const ground = world.add({ type: 'box', size: [100, 2, 100], pos: [0, -1, 0], move: false });
    
  3. Set up a render loop to step the physics simulation:

    function update() {
        world.step();
        // Update your 3D object positions here
        requestAnimationFrame(update);
    }
    update();
    

Competitor Comparisons

4,134

Direct port of the Bullet physics engine to JavaScript using Emscripten

Pros of Ammo.js

  • More comprehensive physics simulation capabilities
  • Better performance for complex simulations
  • Wider community support and integration with popular 3D engines

Cons of Ammo.js

  • Larger file size and potentially slower initial load times
  • Steeper learning curve due to more complex API
  • Less straightforward integration for simple projects

Code Comparison

Oimo.js:

var world = new OIMO.World({ 
    timestep: 1/60, 
    iterations: 8, 
    broadphase: 2,
    worldscale: 1, 
    random: true 
});

Ammo.js:

var collisionConfiguration = new Ammo.btDefaultCollisionConfiguration();
var dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration);
var overlappingPairCache = new Ammo.btDbvtBroadphase();
var solver = new Ammo.btSequentialImpulseConstraintSolver();
var dynamicsWorld = new Ammo.btDiscreteDynamicsWorld(dispatcher, overlappingPairCache, solver, collisionConfiguration);

Both Oimo.js and Ammo.js are JavaScript physics engines, but they cater to different needs. Oimo.js is lightweight and easy to use, making it ideal for simple physics simulations in web applications. Ammo.js, on the other hand, is a port of the Bullet physics engine, offering more advanced features and better performance for complex simulations. The code comparison shows that Oimo.js has a more straightforward setup process, while Ammo.js requires more detailed configuration but provides greater control over the physics world.

A lightweight 3D physics engine written in JavaScript.

Pros of cannon.js

  • More comprehensive documentation and examples
  • Wider range of physics features, including constraints and vehicle dynamics
  • Active community support and regular updates

Cons of cannon.js

  • Generally slower performance compared to Oimo.js
  • Larger file size, which may impact load times for web applications

Code Comparison

Oimo.js:

var world = new OIMO.World({ 
    timestep: 1/60, 
    iterations: 8, 
    broadphase: 2,
    worldscale: 1,
    random: true,
    info: false
});

cannon.js:

var world = new CANNON.World();
world.gravity.set(0, -9.82, 0);
world.broadphase = new CANNON.NaiveBroadphase();
world.solver.iterations = 10;

Both libraries offer similar basic setup for creating a physics world, but cannon.js provides more granular control over individual properties like gravity and solver iterations. Oimo.js combines multiple settings in a single configuration object, which can be more convenient for quick setups but may offer less flexibility for fine-tuning.

Overall, cannon.js is better suited for complex physics simulations with diverse requirements, while Oimo.js excels in performance-critical applications with simpler physics needs.

2,763

Physics plugin for Three.js

Pros of Physijs

  • Tighter integration with Three.js, making it easier to use for Three.js-based projects
  • More comprehensive documentation and examples
  • Better support for complex physics simulations, including constraints and compound shapes

Cons of Physijs

  • Less actively maintained, with the last update being several years ago
  • Heavier and potentially slower performance compared to Oimo.js
  • Limited compatibility with newer versions of Three.js

Code Comparison

Oimo.js:

var world = new OIMO.World({ 
    timestep: 1/60, 
    iterations: 8, 
    broadphase: 2,
    worldscale: 1, 
    random: true
});

Physijs:

Physijs.scripts.worker = '/js/physijs_worker.js';
Physijs.scripts.ammo = '/js/ammo.js';

var scene = new Physijs.Scene;
scene.setGravity(new THREE.Vector3(0, -10, 0));

Both libraries provide physics simulations for web-based 3D environments, but they differ in their approach and integration. Oimo.js is lighter and more flexible, while Physijs offers tighter integration with Three.js at the cost of being heavier and less actively maintained. The code comparison shows the different initialization processes, with Oimo.js creating a world object directly, while Physijs extends the Three.js scene and requires additional script loading.

16,610

a 2D rigid body physics engine for the web ▲● ■

Pros of Matter.js

  • More comprehensive documentation and examples
  • Broader community support and active development
  • Includes additional features like constraints and composites

Cons of Matter.js

  • Generally slower performance, especially for large simulations
  • Higher memory usage compared to Oimo.js
  • Steeper learning curve for beginners

Code Comparison

Matter.js:

var engine = Matter.Engine.create();
var world = engine.world;
var box = Matter.Bodies.rectangle(200, 200, 80, 80);
Matter.World.add(world, box);
Matter.Engine.run(engine);

Oimo.js:

var world = new OIMO.World();
var box = world.add({type:'box', size:[1,1,1], pos:[0,0,0]});
world.step();

Summary

Matter.js offers a more feature-rich and well-documented physics engine with strong community support, making it suitable for complex simulations and interactive projects. However, it may have performance limitations for large-scale simulations.

Oimo.js, on the other hand, provides better performance and lower memory usage, making it more suitable for games and applications requiring many physics objects. Its simpler API can be easier for beginners to grasp, but it may lack some advanced features found in Matter.js.

The choice between the two depends on the specific requirements of your project, balancing features, performance, and ease of use.

💣 A lightweight 3D physics engine written in JavaScript.

Pros of cannon-es

  • More active development and maintenance
  • Better TypeScript support and modern JavaScript practices
  • Wider community adoption and integration with popular frameworks

Cons of cannon-es

  • Potentially higher learning curve for beginners
  • May have more complex API compared to Oimo.js
  • Larger file size, which could impact load times for smaller projects

Code Comparison

Oimo.js:

var world = new OIMO.World({ 
    timestep: 1/60, 
    iterations: 8, 
    broadphase: 2,
    worldscale: 1,
    random: true,
    info: false
});

cannon-es:

const world = new CANNON.World({
    gravity: new CANNON.Vec3(0, -9.82, 0),
    allowSleep: true,
    broadphase: new CANNON.SAPBroadphase(),
    solver: new CANNON.GSSolver()
});

Both libraries offer similar functionality for physics simulations in JavaScript. Oimo.js provides a simpler API and may be easier for beginners to get started with. On the other hand, cannon-es offers more advanced features, better TypeScript support, and is more actively maintained. The choice between the two depends on the specific requirements of your project and your familiarity with 3D physics engines.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README


Oimo.js is a lightweight 3d physics engine for JavaScript.
It's a full javascript conversion of OimoPhysics
Originally created by Saharan for actionscript 3.0.
Version Version

Home

Docs

  • docs (in progress)

Demo

Usage

Download the minified library and include it in your HTML.
Alternatively, use Node and install the package: npm install oimo

<script src="js/oimo.min.js"></script>

Create physics world:

world = new OIMO.World({ 
    timestep: 1/60, 
    iterations: 8, 
    broadphase: 2, // 1 brute force, 2 sweep and prune, 3 volume tree
    worldscale: 1, // scale full world 
    random: true,  // randomize sample
    info: false,   // calculate statistic or not
    gravity: [0,-9.8,0] 
});

Add physics object or joint

var body = world.add({ 
    type:'sphere', // type of shape : sphere, box, cylinder 
    size:[1,1,1], // size of shape
    pos:[0,0,0], // start position in degree
    rot:[0,0,90], // start rotation in degree
    move:true, // dynamic or statique
    density: 1,
    friction: 0.2,
    restitution: 0.2,
    belongsTo: 1, // The bits of the collision groups to which the shape belongs.
    collidesWith: 0xffffffff // The bits of the collision groups with which the shape collides.
});

var body = world.add({ 
    type:'jointHinge', // type of joint : jointDistance, jointHinge, jointPrisme, jointSlide, jointWheel
    body1: "b1", // name or id of attach rigidbody
    body2: "b1" // name or id of attach rigidbody
});


// update world
world.step();

// and copy position and rotation to three mesh
myMesh.position.copy( body.getPosition() );
myMesh.quaternion.copy( body.getQuaternion() );

Note

Oimo Physics uses international system units: 0.1 to 10 meters max for dynamic body.
In basic demo with THREE, I scaled all by 100 so objects are between 10 to 1000 in THREE units.

/!\ Shape name change in last version
SphereShape to Sphere, BoxShape to Box, CylinderShape to Cylinder

UPDATE

Is time to switch ES6 worker version with the last OimoPhysics 1.2.2 :)
go to new PHY repro

NPM DownloadsLast 30 Days