Simulating Dominos in Rapier
Explore how to simulate dominos falling using Rapier physics integrated with Three.js. Learn to create 3D domino objects, apply physical properties, and update their motion in real-time. Understand how gravity settings affect the domino interactions within your scene.
Dominos in the Rapier world
The following example is built upon the same core concepts we looked at in the ‘‘Setting up the world and creating the descriptions’’ section in the previous lesson. The following screenshot shows the output of the example dominos.js (given in the playground below):
Example: Dominos
Let’s execute the dominos.js example in the playground below by clicking the “Run” button:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// const CopyWebpackPlugin = require('copy-webpack-plugin')
const fs = require('fs').promises
// we should search through the directories in examples, and use
// the name from the files to generate the HtmlWebpackPlugin settings.
module.exports = async () => {
return {
module: {
rules: [
{
test: /\.glsl$/i,
use: 'raw-loader'
}
]
},
mode: 'development',
entry: {
'chapter-12': './samples/chapters/chapter-12/dominos.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/',
},
plugins: [
new HtmlWebpackPlugin(),
],
experiments: {
asyncWebAssembly: true
},
devServer: {
allowedHosts: 'all',
host: '0.0.0.0',
port: '3000',
static: [
{
directory: path.join(__dirname, 'assets'),
publicPath: '/assets'
},
{
directory: path.join(__dirname, 'dist')
}
]
},
mode: 'development',
}
}
Note: We can change the gravity of dominos in the right control panel in the output screen.
Here, we can see that we’ve created a simple floor on which many dominos are positioned. If we look closely, we can see that the first instance of these dominos is tilted a little bit.
Gravity property
If we enable gravity on the