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.
GitHub: K3D-tools/K3D-jupyter
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,
+ 3 other calls in file
GitHub: shinseed/BIMServer-NodeJs
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);
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.
GitHub: Holograf/Holograf
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);
+ 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(
+ 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.
GitHub: avin/sketches
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;
GitHub: audunsh/evince
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);
+ 2 other calls in file
GitHub: audunsh/evince
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]));
+ 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]));
+ 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);
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,
+ 3 other calls in file
GitHub: vidartf/ipyvolume
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,
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)
GitHub: agoose77/K3D-jupyter
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]);
GitHub: sarahforcier/LSystems
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 );
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);
+ 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
GitHub: paulxuca/nomanshub
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);
GitHub: lyxnter/DuetWebControl
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 });
+ 2 other calls in file
GitHub: jsdf/robot-control
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
GitHub: 0xFlicker/onchaingas
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,
three.Vector3 is the most popular function in three (22341 examples)