3.1 basic geometry

Cylinder (CylinderGeometry)

Constructor:

1 THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)

radiusTop: radius of top surface;

radiusBottom: radius of the bottom surface;

height: is the height of the cylinder;

radiusSegments: two segments of the bottom surface of the slice;

heightSegments: sectioning sides;

openEnded: is a Boolean value indicating whether or not the top and bottom surfaces, the default is false, meaning there are top and bottom surfaces.

Standard cylinder

For example, new THREE.CylinderGeometry (2, 2, 4, 20, 20, false), to create a vertical radius of the bottom surface 2, a height of 4, which sections each surface 20, bottom surface.

A note:

Since the parameters characteristic of the cylinder, we can think of, in fact, may be a combination of a lot of other graphics

E.g:

Round table

For example, new THREE.CylinderGeometry (2, 3, 4, 18, 3), is created on a bottom surface of radius 2, the radius of the ground 3, a height of 4, sectioning the bottom surface 18, side surfaces 3.

Tapered

例如，new THREE.CylinderGeometry(0, 3, 6, 18, 3, false)

Pyramid

and many more.....

A standard cylindrical sample code and demo renderings

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <script type="text/javascript" src="./three.js"></script>
 9     <title>Document</title>
10 </head>
11 
12 <body onload="init()">
13     <!-- 页面加载触发init()初始化函数， -->
14     <script>
15         function init() {
16             //渲染器            
17             var renderer = new THREE.WebGLRenderer();
18             renderer.setSize(800, 600);
19             document.getElementsByTagName('body')[0].appendChild(renderer.domElement);
20 
21             renderer.setClearColor(0x00000);
22             //场景
23             var scene = new THREE.Scene();
24             var aspect = window.innerWidth / window.innerHeight;
25             //相机
26             var camera = new THREE.OrthographicCamera(-4 * aspect, 4 * aspect, -3 * aspect, 3 * aspect, 1, 500);
27             camera.position.set(0, 0, 200);
28             camera.lookAt(new THREE.Vector3(0, 0, 0));
29             scene.add(camera);
30 
31             var circle = new THREE.Mesh(new THREE.CircleGeometry(3, 50, Math.PI, Math.PI / 3 * 4),
32                 new THREE.MeshBasicMaterial({
33                     color: 0xff0000,
34                     wireframe: true
35                 })
36             )
37             scene.add(circle)
38                 //触发渲染
39             renderer.render(scene, camera);
40         }
41     </script>
42 </body>
43 
44 </html>

"Three.js Getting Started Guide" 3.1.1 - basic geometric shapes - cylinder (CylinderGeometry)