3D Geometries: CylinderGeometry and ConeGeometry
Explore how to create and modify 3D cylinders and cones in Three.js by using CylinderGeometry and ConeGeometry. Learn to adjust properties like radius, height, segments, and angles to customize shapes and achieve various effects including hourglass forms and partial cylinders.
The THREE.CylinderGeometry
With this geometry, we can create cylinders and cylindrical objects. As with the other geometries, we also have an example that lets us experiment with the properties. The following screenshot shows this example:
Example: CylinderGeometry
Let’s execute cylinder-geometry.js example in the below playground 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/cylinder-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.
When we create THREE.CylinderGeometry (lines 26–35), there aren’t any mandatory arguments, so we can create a cylinder by just calling ...