3D Geometries: BoxGeometry and SphereGeometry
Learn how to create 3D shapes using THREE.BoxGeometry, THREE.SphereGeometry and their properties.
We'll cover the following...
3D geometries
In this section on basic 3D geometries, we’ll start with a geometry we’ve already seen a couple of times: THREE.BoxGeometry.
The THREE.BoxGeometry
THREE.BoxGeometry is a very simple 3D geometry that allows us to create a box by specifying its width, height, and depth properties. The following screenshot shows this geometry:
Example: BoxGeometry
Let’s execute the box-geometry.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-5': './samples/chapters/chapter-5/box-geometry.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.
As we can see in this example, by changing the width, height, and depth properties of THREE.BoxGeometry, we can control the size of the resulting mesh. These three properties are also mandatory when we create a new cube, as follows:
new THREE.BoxGeometry(10,10,10);
Properties of THREE.BoxGeometry
In the example, we can also see a couple of other properties that we can define on the cube. The following list explains all the properties:
width: This is the width of the cube. This is the length of the vertices of the cube along theaxis. height: This is the height of ...