Grouping the Geometries
Learn how to group and merge multiple geometries into a single block or combine them with another geometry.
We’ll look at two basic features of Three.js:
Grouping objects together
Merging multiple geometries into a single geometry
We’ll start with grouping objects.
Grouping objects together
We already saw how we can group objects when working with multiple materials. When we create a mesh from a geometry using multiple materials, Three.js creates a group. Multiple copies of our geometry are added to this group, each with its own specific material. This group is returned, so it looks like a mesh that uses multiple materials. In truth, however, it is a group that contains a number of meshes.
Creating groups is very easy. Every mesh we create can contain child elements, which can be added using the add function. The effect of adding a child object to a group is that we can move, scale, rotate, and translate the parent object, and all the child objects will also be affected. When using a group, we can still refer to, modify, and position the individual geometries. The only thing we need to remember is that all positions, rotations, and translations are done relative to the parent object.
Let’s look at an example in the following screenshot:
Example: Grouping objects
Let’s execute the grouping.js example in the playground below by clicking the “Run” button. Once the application is running, please click the provided link to view the output in a new window.
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-8': './samples/chapters/chapter-8/grouping.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 properties of the geometries from the right control panel in the output screen.
In this example, we see a ...