- Three.js Tutorial
- Three.js - Home
- Three.js - Introduction
- Three.js - Installation
- Three.js - Hello Cube App
- Three.js - Renderer and Responsiveness
- Three.js - Responsive Design
- Three.js - Debug and Stats
- Three.js - Cameras
- Three.js - Controls
- Three.js - Lights & Shadows
- Three.js - Geometries
- Three.js - Materials
- Three.js - Textures
- Three.js - Drawing Lines
- Three.js - Animations
- Three.js - Creating Text
- Three.js - Loading 3D Models
- Three.js - Libraries and Plugins
- Three.js Useful Resources
- Three.js - Quick Guide
- Three.js - Useful Resources
- Three.js - Discussion
Three.js - Cylinder Geometries
To create a cylinder in Three.js, you can use the Three.CylinderGeometry.
radiusTop − Radius of the cylinder at the top. Default is 1.
radiusBottom − Radius of the cylinder at the bottom. Default is 1.
radialSegments − the number of segments around the circumference of the cylinder. Default is 8.
heightSegments − Number of rows of faces along with the height of the cylinder. Default is 1.
openEnded − It's a Boolean indicating whether the ends of the cylinder are open or not. Default is false, meaning closed.
thetaStart − Start angle for the first segment, defaults to 0.
thetaLength − The central angle, often called theta, of the circular sector. The default is 2* Math.PI, which makes for a complete cylinder.
const cylinder = new THREE.CylinderGeometry( radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength )
Example
Check out the following example.
cylinder.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Three.js - cylinder</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: -applesystem, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } html, body { height: 100vh; width: 100vw; } #threejs-container { position: block; width: 100%; height: 100%; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.js"></script> </head> <body> <div id="threejs-container"></div> <script type="module"> // Cylinder geometry in Three.js // GUI const gui = new dat.GUI() // sizes let width = window.innerWidth let height = window.innerHeight // scene const scene = new THREE.Scene() scene.background = new THREE.Color(0x262626) // camera const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 100) camera.position.set(0, 0, 10) const camFolder = gui.addFolder('Camera') camFolder.add(camera.position, 'z').min(10).max(60).step(10) camFolder.open() // cylinder const geometry = new THREE.CylinderGeometry() const material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true }) const materialFolder = gui.addFolder('Material') materialFolder.add(material, 'wireframe') materialFolder.open() const cylinder = new THREE.Mesh(geometry, material) scene.add(cylinder) const cylinderProps = { radiusTop: 1, radiusBottom: 1, height: 1, radialSegments: 8, heightSegments: 1, openEnded: false, thetaStart: 0, thetaLength: 2 * Math.PI } const props = gui.addFolder('Properties') props .add(cylinderProps, 'radiusTop', 1, 50) .step(1) .onChange(redraw) .onFinishChange(() => console.dir(cylinder.geometry)) props.add(cylinderProps, 'radiusBottom', 0, 50).onChange(redraw) props.add(cylinderProps, 'height', 0, 100).onChange(redraw) props.add(cylinderProps, 'radialSegments', 1, 50).step(1).onChange(redraw) props.add(cylinderProps, 'heightSegments', 1, 50).step(1).onChange(redraw) props.add(cylinderProps, 'openEnded').onChange(redraw) props.add(cylinderProps, 'thetaStart', 0, 2 * Math.PI).onChange(redraw) props.add(cylinderProps, 'thetaLength', 0, 2 * Math.PI).onChange(redraw) props.open() function redraw() { let newGeometry = new THREE.CylinderGeometry( cylinderProps.radiusTop, cylinderProps.radiusBottom, cylinderProps.height, cylinderProps.radialSegments, cylinderProps.heightSegments, cylinderProps.openEnded, cylinderProps.thetaStart, cylinderProps.thetaLength ) cylinder.geometry.dispose() cylinder.geometry = newGeometry } // responsiveness window.addEventListener('resize', () => { width = window.innerWidth height = window.innerHeight camera.aspect = width / height camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight) renderer.render(scene, camera) }) // renderer const renderer = new THREE.WebGL1Renderer() renderer.setSize(width, height) renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) // animation function animate() { requestAnimationFrame(animate) cylinder.rotation.x += 0.005 cylinder.rotation.y += 0.01 renderer.render(scene, camera) } // rendecylinder the scene const container = document.querySelector('#threejs-container') container.append(renderer.domElement) renderer.render(scene, camera) animate() </script> </body> </html>
Output
threejs_geometries.htm
Advertisements