3D Geometries: CylinderGeometry and ConeGeometry
Learn to use THREE.CylinderGeometry, THREE.ConeGeometry and how to set their properties.
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 new THREE.CylinderGeometry(). We can pass in a number of properties, as we can see in the preceding example, to alter the appearance of this cylinder.
Properties of THREE.CylinderGeometry
The properties are explained in the following list:
radiusTop: This sets the size that this cylinder will be at the top. The default value is20....