Simulating Dominos in Rapier
Learn how to create dominos effect in Three.js using Rapier.
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):
Press + to interact
Dominos standing still when no gravity is present
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',
}
}
Create dynamic domino effect using Rapier physics
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