From 4878c960c5ca67e00b56bdcf4a721598ee5d4e54 Mon Sep 17 00:00:00 2001 From: cx20 Date: Mon, 14 Oct 2024 15:09:19 +0900 Subject: [PATCH] Added three.js Rapier example --- README.md | 84 ++++++++++----------- examples/threejs/rapier/minimum/index.html | 20 +++++ examples/threejs/rapier/minimum/index.js | 87 ++++++++++++++++++++++ examples/threejs/rapier/minimum/style.css | 11 +++ 4 files changed, 160 insertions(+), 42 deletions(-) create mode 100644 examples/threejs/rapier/minimum/index.html create mode 100644 examples/threejs/rapier/minimum/index.js create mode 100644 examples/threejs/rapier/minimum/style.css diff --git a/README.md b/README.md index 8e60b0b..cba2e4c 100644 --- a/README.md +++ b/README.md @@ -6,36 +6,36 @@ Examples of WebGL Physics Library. ![](assets/screenshot/minimum.png) -|Library |[ammo.js](https://github.com/kripken/ammo.js/) |[Cannon.js](https://github.com/schteppe/cannon.js) /
[cannon-es](https://github.com/pmndrs/cannon-es) |[Havok](https://doc.babylonjs.com/features/featuresDeepDive/physics) |[Oimo.js](https://github.com/lo-th/Oimo.js/) /
[OimoPhysics](https://github.com/saharan/OimoPhysics) |[PhysX](https://github.com/fabmax/physx-js-webidl) | -|:------------------------------------------------------------|:---------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------| -|WebGL 1.0 | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl1/oimo/minimum/) | | -|[Ashes](https://github.com/but0n/Ashes) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/ashes/oimo/minimum/) | | -|[Babylon.js](https://github.com/BabylonJS/Babylon.js) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/ammo/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/cannon/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/havok/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/oimo/minimum/) | | -|[ClayGL](https://github.com/pissang/claygl) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/claygl/oimo/minimum/) | | -|[CZPG.js](https://github.com/PrincessGod/CraZyPG) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/czpg/oimo/minimum/) | | -|[GLBoost](https://github.com/emadurandal/GLBoost) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/oimo/minimum/) | | -|[Grimoire.js](https://github.com/GrimoireGL/GrimoireJS) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/oimo/minimum/) /
[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/oimophysics/minimum/)| | -|[Hilo3d](https://github.com/hiloteam/Hilo3d) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/hilo3d/oimo/minimum/) | | -|[PlayCanvas](https://github.com/playcanvas/engine) |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/ammo/minimum/) | | | | | -|[Rhodonite](https://github.com/actnwit/RhodoniteTS) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/rhodonite/oimo/minimum/) | | -|[three.js](https://github.com/mrdoob/three.js/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/ammo/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon/minimum/) /
[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon-es/minimum/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/minimum/) /
[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimophysics/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/physx/minimum/) | -|[XenoGL](https://github.com/kotofurumiya/xenogl) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/xenogl/oimo/minimum/) /
[Link](https://cx20.github.io/webgl-physics-examples/examples/xenogl/oimophysics/minimum/) | | +|Library |[ammo.js](https://github.com/kripken/ammo.js/) |[Cannon.js](https://github.com/schteppe/cannon.js) /
[cannon-es](https://github.com/pmndrs/cannon-es) |[Havok](https://doc.babylonjs.com/features/featuresDeepDive/physics) |[Oimo.js](https://github.com/lo-th/Oimo.js/) /
[OimoPhysics](https://github.com/saharan/OimoPhysics) |[PhysX](https://github.com/fabmax/physx-js-webidl) |[rapier](https://github.com/dimforge/rapier) | +|:------------------------------------------------------------|:---------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------| +|WebGL 1.0 | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl1/oimo/minimum/) | | | +|[Ashes](https://github.com/but0n/Ashes) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/ashes/oimo/minimum/) | | | +|[Babylon.js](https://github.com/BabylonJS/Babylon.js) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/ammo/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/cannon/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/havok/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/oimo/minimum/) | | | +|[ClayGL](https://github.com/pissang/claygl) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/claygl/oimo/minimum/) | | | +|[CZPG.js](https://github.com/PrincessGod/CraZyPG) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/czpg/oimo/minimum/) | | | +|[GLBoost](https://github.com/emadurandal/GLBoost) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/oimo/minimum/) | | | +|[Grimoire.js](https://github.com/GrimoireGL/GrimoireJS) | | | |[Link1](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/oimo/minimum/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/oimophysics/minimum/)| | | +|[Hilo3d](https://github.com/hiloteam/Hilo3d) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/hilo3d/oimo/minimum/) | | | +|[PlayCanvas](https://github.com/playcanvas/engine) |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/ammo/minimum/) | | | | | | +|[Rhodonite](https://github.com/actnwit/RhodoniteTS) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/rhodonite/oimo/minimum/) | | | +|[three.js](https://github.com/mrdoob/three.js/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/ammo/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon/minimum/) /
[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon-es/minimum/) | |[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/minimum/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimophysics/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/physx/minimum/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/rapier/minimum/) | +|[XenoGL](https://github.com/kotofurumiya/xenogl) | | | |[Link1](https://cx20.github.io/webgl-physics-examples/examples/xenogl/oimo/minimum/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/xenogl/oimophysics/minimum/) | | | ## Domino examples ![](assets/screenshot/domino.jpg) -|Library |[ammo.js](https://github.com/kripken/ammo.js/) |[Cannon.js](https://github.com/schteppe/cannon.js) /
[cannon-es](https://github.com/pmndrs/cannon-es) |[Havok](https://doc.babylonjs.com/features/featuresDeepDive/physics) |[Oimo.js](https://github.com/lo-th/Oimo.js/) /
[OimoPhysics](https://github.com/saharan/OimoPhysics) |[PhysX](https://github.com/fabmax/physx-js-webidl) | -|:------------------------------------------------------------|:---------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:--------------------------------------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------| -|WebGL 1.0 | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl1/oimo/domino/) | | -|[Babylon.js](https://github.com/BabylonJS/Babylon.js) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/ammo/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/cannon/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/havok/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/oimo/domino/) | | -|[ClayGL](https://github.com/pissang/claygl) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/claygl/oimo/domino/) | | -|[GLBoost](https://github.com/emadurandal/GLBoost) |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/ammo/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/cannon/domino/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/oimo/domino/) | | -|[Grimoire.js](https://github.com/GrimoireGL/GrimoireJS) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/cannon/domino/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/oimo/domino/) /
[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/oimophysics/domino/) | | -|[Hilo3d](https://github.com/hiloteam/Hilo3d) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/hilo3d/oimo/domino/) | | -|[PlayCanvas](https://github.com/playcanvas/engine) |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/ammo/domino/) | | | | | -|[Rhodonite](https://github.com/actnwit/RhodoniteTS) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/rhodonite/oimo/domino/) | | -|[three.js](https://github.com/mrdoob/three.js/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/ammo/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon/domino/) /
[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon-es/domino/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/domino/) /
[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimophysics/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/physx/domino/) | +|Library |[ammo.js](https://github.com/kripken/ammo.js/) |[Cannon.js](https://github.com/schteppe/cannon.js) /
[cannon-es](https://github.com/pmndrs/cannon-es) |[Havok](https://doc.babylonjs.com/features/featuresDeepDive/physics) |[Oimo.js](https://github.com/lo-th/Oimo.js/) /
[OimoPhysics](https://github.com/saharan/OimoPhysics) |[PhysX](https://github.com/fabmax/physx-js-webidl) | +|:------------------------------------------------------------|:---------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:--------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------| +|WebGL 1.0 | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/webgl1/oimo/domino/) | | +|[Babylon.js](https://github.com/BabylonJS/Babylon.js) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/ammo/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/cannon/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/havok/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/oimo/domino/) | | +|[ClayGL](https://github.com/pissang/claygl) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/claygl/oimo/domino/) | | +|[GLBoost](https://github.com/emadurandal/GLBoost) |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/ammo/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/cannon/domino/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/oimo/domino/) | | +|[Grimoire.js](https://github.com/GrimoireGL/GrimoireJS) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/cannon/domino/) | |[Link1](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/oimo/domino/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/oimophysics/domino/) | | +|[Hilo3d](https://github.com/hiloteam/Hilo3d) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/hilo3d/oimo/domino/) | | +|[PlayCanvas](https://github.com/playcanvas/engine) |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/ammo/domino/) | | | | | +|[Rhodonite](https://github.com/actnwit/RhodoniteTS) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/rhodonite/oimo/domino/) | | +|[three.js](https://github.com/mrdoob/three.js/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/ammo/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon/domino/) /
[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon-es/domino/) | |[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/domino/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimophysics/domino/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/physx/domino/) | ## Falling Football examples @@ -43,38 +43,38 @@ Examples of WebGL Physics Library. |Library |[ammo.js](https://github.com/kripken/ammo.js/) |[Cannon.js](https://github.com/schteppe/cannon.js) /
[cannon-es](https://github.com/pmndrs/cannon-es) |[Havok](https://doc.babylonjs.com/features/featuresDeepDive/physics) |[Oimo.js](https://github.com/lo-th/Oimo.js/) /
[OimoPhysics](https://github.com/saharan/OimoPhysics) |[PhysX](https://github.com/fabmax/physx-js-webidl) | |:------------------------------------------------------------|:---------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------| -|[Babylon.js](https://github.com/BabylonJS/Babylon.js) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/ammo/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/cannon/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/havok/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/oimo/football/) | | -|[ClayGL](https://github.com/pissang/claygl) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/claygl/oimo/football/) | | -|[GLBoost](https://github.com/emadurandal/GLBoost) |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/ammo/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/cannon/football/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/oimo/football/) | | -|[Grimoire.js](https://github.com/GrimoireGL/GrimoireJS) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/cannon/football/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/oimo/football/) | | -|[PlayCanvas](https://github.com/playcanvas/engine) |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/ammo/football/)| | | | | -|[three.js](https://github.com/mrdoob/three.js/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/ammo/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon/football/) /
[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon-es/football/)| |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/football/) /
[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimophysics/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/physx/football/) | +|[Babylon.js](https://github.com/BabylonJS/Babylon.js) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/ammo/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/cannon/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/havok/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/oimo/football/) | | +|[ClayGL](https://github.com/pissang/claygl) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/claygl/oimo/football/) | | +|[GLBoost](https://github.com/emadurandal/GLBoost) |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/ammo/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/cannon/football/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/oimo/football/) | | +|[Grimoire.js](https://github.com/GrimoireGL/GrimoireJS) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/cannon/football/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/oimo/football/) | | +|[PlayCanvas](https://github.com/playcanvas/engine) |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/ammo/football/)| | | | | +|[three.js](https://github.com/mrdoob/three.js/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/ammo/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon/football/) /
[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon-es/football/)| |[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/football/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimophysics/football/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/physx/football/) | ## Stacked Boxes examples ![](assets/screenshot/box.jpg) |Library |[ammo.js](https://github.com/kripken/ammo.js/) |[Cannon.js](https://github.com/schteppe/cannon.js) /
[cannon-es](https://github.com/pmndrs/cannon-es) |[Havok](https://doc.babylonjs.com/features/featuresDeepDive/physics) |[Oimo.js](https://github.com/lo-th/Oimo.js/) /
[OimoPhysics](https://github.com/saharan/OimoPhysics) |[PhysX](https://github.com/fabmax/physx-js-webidl) | -|:------------------------------------------------------------|:---------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------| +|:------------------------------------------------------------|:---------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------| |[Babylon.js](https://github.com/BabylonJS/Babylon.js) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/ammo/box/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/cannon/box/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/havok/box/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/oimo/box/) | | |[ClayGL](https://github.com/pissang/claygl) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/claygl/oimo/box/) | | |[GLBoost](https://github.com/emadurandal/GLBoost) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/cannon/box/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/oimo/box/) | | |[Grimoire.js](https://github.com/GrimoireGL/GrimoireJS) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/cannon/box/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/oimo/box/) | | |[PlayCanvas](https://github.com/playcanvas/engine) |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/ammo/box/) | | | | | -|[three.js](https://github.com/mrdoob/three.js/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/ammo/box/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon/box/) /
[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon-es/box/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/box/) /
[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimophysics/box/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/physx/box/) | +|[three.js](https://github.com/mrdoob/three.js/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/ammo/box/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon/box/) /
[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon-es/box/) | |[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/box/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimophysics/box/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/physx/box/) | ## Falling Balls examples ![](assets/screenshot/balls.jpg) -|Library |[ammo.js](https://github.com/kripken/ammo.js/) |[Cannon.js](https://github.com/schteppe/cannon.js) /
[cannon-es](https://github.com/pmndrs/cannon-es) |[Havok](https://doc.babylonjs.com/features/featuresDeepDive/physics) |[Oimo.js](https://github.com/lo-th/Oimo.js/) /
[OimoPhysics](https://github.com/saharan/OimoPhysics) | -|:------------------------------------------------------------|:---------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------------------------------------------------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +|Library |[ammo.js](https://github.com/kripken/ammo.js/) |[Cannon.js](https://github.com/schteppe/cannon.js) /
[cannon-es](https://github.com/pmndrs/cannon-es) |[Havok](https://doc.babylonjs.com/features/featuresDeepDive/physics) |[Oimo.js](https://github.com/lo-th/Oimo.js/) /
[OimoPhysics](https://github.com/saharan/OimoPhysics) | +|:------------------------------------------------------------|:---------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------------------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |[Babylon.js](https://github.com/BabylonJS/Babylon.js) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/ammo/balls/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/cannon/balls/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/havok/balls/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/oimo/balls/) | |[ClayGL](https://github.com/pissang/claygl) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/claygl/oimo/balls/) | |[GLBoost](https://github.com/emadurandal/GLBoost) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/glboost/oimo/balls/) | |[Grimoire.js](https://github.com/GrimoireGL/GrimoireJS) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/grimoirejs/oimo/balls/) | |[PlayCanvas](https://github.com/playcanvas/engine) |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/ammo/balls/) | | | | -|[three.js](https://github.com/mrdoob/three.js/) | | - /
[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon-es/balls/) | |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/balls/) /
[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimophysics/balls/) | +|[three.js](https://github.com/mrdoob/three.js/) | | - /
[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/cannon-es/balls/) | |[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/balls/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimophysics/balls/) | ## Falling glTF examples @@ -83,17 +83,17 @@ Examples of WebGL Physics Library. |Library |[ammo.js](https://github.com/kripken/ammo.js/) |[Cannon.js](https://github.com/schteppe/cannon.js) /
[cannon-es](https://github.com/pmndrs/cannon-es) |[Havok](https://doc.babylonjs.com/features/featuresDeepDive/physics) |[Oimo.js](https://github.com/lo-th/Oimo.js/) /
[OimoPhysics](https://github.com/saharan/OimoPhysics) | |:------------------------------------------------------------|:---------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------------------------------------------------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -|[Babylon.js](https://github.com/BabylonJS/Babylon.js) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/ammo/gltf/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/cannon/gltf/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/havok/gltf/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/oimo/gltf/) | -|[PlayCanvas](https://github.com/playcanvas/engine) |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/ammo/gltf/) | | | | -|[three.js](https://github.com/mrdoob/three.js/) | | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/gltf/) /
[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimophysics/gltf/) | +|[Babylon.js](https://github.com/BabylonJS/Babylon.js) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/ammo/gltf/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/cannon/gltf/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/havok/gltf/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/oimo/gltf/) | +|[PlayCanvas](https://github.com/playcanvas/engine) |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/ammo/gltf/) | | | | +|[three.js](https://github.com/mrdoob/three.js/) | | | |[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/gltf/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimophysics/gltf/) | ## Falling Marbles examples (Using glTF) ![](assets/screenshot/marbles.jpg) -|Library |[ammo.js](https://github.com/kripken/ammo.js/) |[Cannon.js](https://github.com/schteppe/cannon.js) /
[cannon-es](https://github.com/pmndrs/cannon-es) |[Havok](https://doc.babylonjs.com/features/featuresDeepDive/physics) |[Oimo.js](https://github.com/lo-th/Oimo.js/) /
[OimoPhysics](https://github.com/saharan/OimoPhysics) | +|Library |[ammo.js](https://github.com/kripken/ammo.js/) |[Cannon.js](https://github.com/schteppe/cannon.js) /
[cannon-es](https://github.com/pmndrs/cannon-es) |[Havok](https://doc.babylonjs.com/features/featuresDeepDive/physics) |[Oimo.js](https://github.com/lo-th/Oimo.js/) /
[OimoPhysics](https://github.com/saharan/OimoPhysics) | |:------------------------------------------------------------|:---------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -|[Babylon.js](https://github.com/BabylonJS/Babylon.js) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/ammo/marbles/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/cannon/marbles/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/havok/marbles/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/oimo/marbles/) | +|[Babylon.js](https://github.com/BabylonJS/Babylon.js) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/ammo/marbles/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/cannon/marbles/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/havok/marbles/) |[Link](https://cx20.github.io/webgl-physics-examples/examples/babylonjs/oimo/marbles/) | ## Falling Shogi examples @@ -111,4 +111,4 @@ Examples of WebGL Physics Library. |Library |[ammo.js](https://github.com/kripken/ammo.js/) |[Cannon.js](https://github.com/schteppe/cannon.js) /
[cannon-es](https://github.com/pmndrs/cannon-es) |[Oimo.js](https://github.com/lo-th/Oimo.js/) /
[OimoPhysics](https://github.com/saharan/OimoPhysics) | |:------------------------------------------------------------|:---------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |[PlayCanvas](https://github.com/playcanvas/engine) |[Link](https://cx20.github.io/webgl-physics-examples/examples/playcanvas/ammo/cone/) | | | -|[three.js](https://github.com/mrdoob/three.js/) | | |[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/cone/) /
[Link](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimophysics/cone/) | +|[three.js](https://github.com/mrdoob/three.js/) | | |[Link1](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/cone/) / [Link2](https://cx20.github.io/webgl-physics-examples/examples/threejs/oimophysics/cone/) | diff --git a/examples/threejs/rapier/minimum/index.html b/examples/threejs/rapier/minimum/index.html new file mode 100644 index 0000000..8072444 --- /dev/null +++ b/examples/threejs/rapier/minimum/index.html @@ -0,0 +1,20 @@ + + + + [WIP] three.js + rapier Minimum Example + + + +
+ + + + + diff --git a/examples/threejs/rapier/minimum/index.js b/examples/threejs/rapier/minimum/index.js new file mode 100644 index 0000000..0454d3c --- /dev/null +++ b/examples/threejs/rapier/minimum/index.js @@ -0,0 +1,87 @@ +import * as THREE from 'three'; +import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; +import RAPIER from 'https://cdn.skypack.dev/@dimforge/rapier3d-compat@0.12.0'; + +let container; +let camera, scene, renderer; +let meshGround, meshCube; +let world, groundBody, boxBody; +let controls; + +async function initRapier() { + await RAPIER.init(); + const gravity = new RAPIER.Vector3(0, -9.81, 0); + world = new RAPIER.World(gravity); + + const groundColliderDesc = RAPIER.ColliderDesc.cuboid(100, 1, 100).setRestitution(0.1).setFriction(0.5); + const groundBodyDesc = RAPIER.RigidBodyDesc.fixed().setTranslation(0, -45, 0); + groundBody = world.createRigidBody(groundBodyDesc); + world.createCollider(groundColliderDesc, groundBody); + + const boxColliderDesc = RAPIER.ColliderDesc.cuboid(50, 50, 50); + const boxBodyDesc = RAPIER.RigidBodyDesc.dynamic().setTranslation(0, 100, 0); + boxBody = world.createRigidBody(boxBodyDesc); + world.createCollider(boxColliderDesc, boxBody); + + const rotationAxis = new RAPIER.Vector3(1, 0, 1); + const angle = Math.PI * 10 / 180; + boxBody.setRotation(rotationAxis, angle); +} + +function initThree() { + container = document.getElementById('container'); + camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 1000); + camera.position.y = 50; + camera.position.z = 200; + scene = new THREE.Scene(); + + const loader = new THREE.TextureLoader(); + const texture = loader.load('../../../../assets/textures/frog.jpg'); + const material = new THREE.MeshBasicMaterial({ map: texture }); + + const geometryGround = new THREE.BoxGeometry(200, 2, 200); + meshGround = new THREE.Mesh(geometryGround, material); + meshGround.position.y = -20; + scene.add(meshGround); + + const geometryCube = new THREE.BoxGeometry(50, 50, 50); + meshCube = new THREE.Mesh(geometryCube, material); + scene.add(meshCube); + + renderer = new THREE.WebGLRenderer(); + renderer.setClearColor(0xffffff); + renderer.setSize(window.innerWidth, window.innerHeight); + container.appendChild(renderer.domElement); + + controls = new OrbitControls(camera, renderer.domElement); + controls.autoRotate = true; + + setInterval(() => { + updatePhysics(); + }, 1000 / 60); +} + +function updatePhysics() { + world.step(); + + const boxPosition = boxBody.translation(); + const boxRotation = boxBody.rotation(); + + meshCube.position.set(boxPosition.x, boxPosition.y, boxPosition.z); + meshCube.quaternion.set(boxRotation.x, boxRotation.y, boxRotation.z, boxRotation.w); +} + +function animate() { + controls.update(); + requestAnimationFrame(animate); + render(); +} + +function render() { + renderer.render(scene, camera); +} + +initRapier().then(() => { + initThree(); + animate(); +}); diff --git a/examples/threejs/rapier/minimum/style.css b/examples/threejs/rapier/minimum/style.css new file mode 100644 index 0000000..caaddd3 --- /dev/null +++ b/examples/threejs/rapier/minimum/style.css @@ -0,0 +1,11 @@ +* { + margin: 0; + padding: 0; + border: 0; + overflow: hidden; +} + +body { + background: #fff; + font: 30px sans-serif; +} \ No newline at end of file