How to use the CylinderGeometry function from three

Find comprehensive JavaScript three.CylinderGeometry code examples handpicked from public code repositorys.

three.CylinderGeometry is a three-dimensional object in the Three.js library that represents a cylinder shape geometry.

52
53
54
55
56
57
58
59
60
61

if (colors && colors.length / 2 !== vectors.length) {
    throw new Error('there should be 2 colors for each vector');
}

const singleConeGeometry = new THREE.CylinderGeometry(
    0,
    0.025 * headSize,
    0.2 * headSize,
    5,
fork icon119
star icon813
watch icon25

+ 3 other calls in file

213
214
215
216
217
218
219
220
221

    // pass the scene to visualize the octree
});

//鼠标移动相关操作
var geometry = new THREE.CylinderGeometry(0, 20, 100, 3);
geometry.translate(0, -50, 0);
geometry.scale(0.1, 0.1, 0.1);
geometry.rotateX(-Math.PI / 2);
fork icon13
star icon28
watch icon7

How does three.CylinderGeometry work?

three.CylinderGeometry is a class in the Three.js library that generates a geometry representing a cylinder shape, which can be rendered as a 3D object. The cylinder is constructed by specifying its radius, height, and number of segments. The resulting geometry is composed of vertices, edges, and faces that can be used to create a mesh object that can be added to a Three.js scene.

19
20
21
22
23
24
25
26
27

//--TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)
geometries.loop = new THREE.TorusGeometry(constants.size.radius, 20, 5, 30);

//--CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded, thetaStart, thetaLength)
geometries.functionInvocation = new THREE.CylinderGeometry(70, 35, 60, 6, 1, true);

//--DodecahedronGeometry(radius, detail)
geometries.variable = new THREE.DodecahedronGeometry(25);
fork icon9
star icon26
watch icon5

+ 9 other calls in file

492
493
494
495
496
497
498
499
500
501
const rotationAxis = new THREE.Vector3();
rotationAxis.crossVectors(cylAxis, new THREE.Vector3(0, 1, 0));
rotationAxis.normalize();
const r1 = node.radius || 0.01;
const r2 = nodeParent.radius || 0.01;
const geometry = new THREE.CylinderGeometry(r1, r2, dist);
const mesh = new THREE.Mesh(geometry, coneMaterial);
mesh.matrixAutoUpdate = false;
mesh.matrix.makeRotationAxis(rotationAxis, -theta);
const position = new THREE.Vector3(
fork icon7
star icon21
watch icon0

+ 3 other calls in file

Ai Example

1
const geometry = new THREE.CylinderGeometry(5, 5, 20, 32);

This code creates a cylinder geometry with a radius of 5 at both ends, a height of 20, and 32 segments.

155
156
157
158
159
160
161
162
163

function createTreeGeometry() {
    const height = 1;
    const levels = 10;

    const treeGeometry = new THREE.CylinderGeometry(0.4, 0.0, height, 20, levels);
    treeGeometry.vertices.forEach(vertex => {
        vertex.y += height * 0.5;
        const randomFactor = vertex.y * 0.1;
fork icon2
star icon14
watch icon2

385
386
387
388
389
390
391
392
393
394
imesh.count = this.pos.length;
imesh.instanceMatrix.needsUpdate = true;

this.scene.add(imesh);

let bondGeometry = new THREE.CylinderGeometry(.4, 0.4, 1.0, 6, 4, true);
bondGeometry.applyMatrix4(new THREE.Matrix4().makeRotationX(3.1415/2.0));


let bondMesh = new THREE.InstancedMesh( bondGeometry, material, 10000);
fork icon3
star icon7
watch icon0

+ 2 other calls in file

285
286
287
288
289
290
291
292
293
var direction = new THREE.Vector3().subVectors(pointY, pointX);
//let material = new THREE.MeshStandardMaterial({ color: 0x2B2B2B });
// Make the geometry (of "direction" length)
//material.roughness = 0.2;
//material.metalness = 0.2;
//var geometry = new THREE.CylinderGeometry(.4, 0.4, direction.length(), 6, 4, true);
// shift it so one end rests on the origin
//geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, direction.length() / 2, 0));
//geometry.position = new THREE.Vector3( .5*(pY[0]+ pX[0]), .5*(pY[1]+ pX[1]), .5*(pY[2]+ pX[2]));
fork icon3
star icon7
watch icon0

+ 9 other calls in file

3332
3333
3334
3335
3336
3337
3338
3339
3340
var direction = new THREE.Vector3().subVectors(pointY, pointX);
let material = new THREE.MeshStandardMaterial({ color: 0x5B5B5B });
// Make the geometry (of "direction" length)
material.roughness = 0.2;
material.metalness = 0.2;
var geometry = new THREE.CylinderGeometry(.4, 0.4, direction.length(), 6, 4, true);
// shift it so one end rests on the origin
//geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, direction.length() / 2, 0));
//geometry.position = new THREE.Vector3( .5*(pY[0]+ pX[0]), .5*(pY[1]+ pX[1]), .5*(pY[2]+ pX[2]));
fork icon3
star icon7
watch icon1

+ 35 other calls in file

34
35
36
37
38
39
40
41
42

// create the base coin geometry
let ringGeometry = new THREE.TorusGeometry(
    this.coinRadius, (0.1 * this.coinRadius), 8, 64
);
let cylGeometry  = new THREE.CylinderGeometry(
    this.coinRadius, this.coinRadius, coinThickness, 16
);
cylGeometry.rotateX(Math.PI / 2);
fork icon2
star icon7
watch icon1

44
45
46
47
48
49
50
51
52
53

}

// create the cylinder that will contain the tunnel of coins
createTunnelMesh() {
    let tunnelGeometry = new THREE.CylinderGeometry(
        this.opts.radius, this.opts.radius, this.opts.length, 16
    );
    let tunnelMaterial = new THREE.MeshBasicMaterial({
        color: 0x00ff00,
fork icon2
star icon7
watch icon1

+ 3 other calls in file

51
52
53
54
55
56
57
58
59
60
this.geo_point_2d = new THREE.PlaneGeometry(0.1, 0.1, 1, 1)
this.geo_triangle_2d = new THREE.CircleGeometry(1, 3, Math.PI/2);
this.geo_circle_2d = new THREE.CircleGeometry(1, 32, Math.PI/2);

//this.geo = new THREE.ConeGeometry(0.2, 1)
this.geo_arrow = new THREE.CylinderGeometry(0, 0.2, 1)
this.geos = {
    diamond: this.geo_diamond,
    box: this.geo_box,
    arrow: this.geo_arrow,
fork icon236
star icon0
watch icon2

53
54
55
56
57
58
59
60
61
62
}

const scalar = scale / Math.max(width, height, length);
colors = colors ? colorsToFloat32Array(colors)
    : getTwoColorsArray(originColor, headColor, width * height * length * 2);
const singleConeGeometry = new THREE.CylinderGeometry(0,
    0.025 * headSize * scalar,
    0.2 * headSize * scalar,
    5,
    1)
fork icon117
star icon0
watch icon0

52
53
54
55
56
57
58
59
60
61

if (colors && colors.length / 2 !== vectors.length) {
    throw new Error('there should be 2 colors for each vector');
}

const singleConeGeometry = new THREE.CylinderGeometry(0, 0.025 * headSize,
    0.2 * headSize, 5, 1).translate(0, -0.1 * headSize, 0);

for (i = 0; i < vectors.length; i += 3) {
    origin = new THREE.Vector3(origins[i], origins[i + 1], origins[i + 2]);
fork icon117
star icon0
watch icon1

127
128
129
130
131
132
133
134
135
}

// Make a cylinder of given length and width 0.1 starting at turtle pos
// Moves turtle pos ahead to end of the new cylinder 
makeCylinder(len, widthA, widthB) {
    var geometry = new THREE.CylinderGeometry(widthA, widthB, len);
    var material = new THREE.MeshLambertMaterial( {color: 0x333333, emissive: this.stem_color} );
    //var material = new THREE.ShaderMaterial(this.stem_mat);
    var cylinder = new THREE.Mesh( geometry, material );
fork icon35
star icon0
watch icon2

27
28
29
30
31
32
33
34
35
36
    0, 0, 0, 1));

var edgeGeometry;
var coneGeometry;
if (edgeLengthRatio !== undefined) {
    edgeGeometry = new THREE.CylinderGeometry(radius, radius, edgeLengthRatio * l, 8, 1);
    coneGeometry = new THREE.CylinderGeometry(0, radiusCone, (1-edgeLengthRatio) * l, 8, 1);
    edgeGeometry.translate( 0,  -(0.5 - 0.5 * edgeLengthRatio) * l, 0 );
    var translate = new THREE.Matrix4().makeTranslation( 0,  (0.5 - 0.5 * (1 - edgeLengthRatio)) * l, 0 );
    edgeGeometry.merge(coneGeometry, translate);
fork icon4
star icon6
watch icon3

+ 7 other calls in file

117
118
119
120
121
122
123
124
125
126

/**
 * return plan
 */
initPlan() {
  const geo = new THREE.CylinderGeometry(100, 100, 0.2, 32)
  // 接收阴影的材质
  const material = new THREE.MeshLambertMaterial({ color: 0xcccccc })
  const plan = new THREE.Mesh(geo, material)
  plan.receiveShadow = true
fork icon1
star icon7
watch icon2

15
16
17
18
19
20
21
22
23
24
let geom;
const randomNumber = Math.random();
if (randomNumber < .25) {
  geom = new THREE.BoxGeometry(s, s, s);
} else if (randomNumber < .5) {
  geom = new THREE.CylinderGeometry(0, s, s * 2, 4, 1);
} else if (randomNumber < .75){
  geom = new THREE.TetrahedronGeometry(s, 2);
} else {
  geom = new THREE.BoxGeometry(s / 6, s, s);
fork icon0
star icon5
watch icon2

178
179
180
181
182
183
184
185
186
187
topCircle.rotation.x = -Math.PI / 2;
topCircle.position.y = 600;
//this.previewScene.add( topCircle );
this.previewScene.add(buildSurface);
this.previewScene.add(buildPlate);
geometry = new THREE.CylinderGeometry(200, 200, 602, 32, 1, true, 0, 2*Math.PI);
material = new THREE.MeshBasicMaterial({
	color: 0xe0e0e0,
	side: THREE.BackSide
});
fork icon1
star icon2
watch icon0

+ 2 other calls in file

92
93
94
95
96
97
98
99
100
101
102
function degToRad(angleDegrees: number): number {
  return angleDegrees * (Math.PI / 180.0);
}


function makeArc(startAngle: number, size: number) {
  return new THREE.CylinderGeometry(
    1,
    1,
    0.2, // geom thickness
    32, // geom segments
fork icon0
star icon3
watch icon0

60
61
62
63
64
65
66
67
68
69
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(innerWidth, innerHeight);

// Draw a spigot to release the gas, using a cylinder that ends at 0, gasHeight / 2, 0
const gasSpigotGeometry = new THREE.CylinderGeometry(
  50,
  100,
  gasHeight,
  32,
fork icon0
star icon3
watch icon0

Other functions in three

Sorted by popularity

function icon

three.Vector3 is the most popular function in three (22341 examples)