Back to Aframe

A Cylinder

docs/primitives/a-cylinder.md

1.7.16.5 KB
Original Source

The cylinder primitive is used to create tubes and curved surfaces.

Examples

The cylinder primitive is versatile and can be used to create different kinds of shapes:

html
<!-- Basic cylinder. -->
<a-cylinder color="crimson" height="3" radius="1.5"></a-cylinder>

<!-- Hexagon. -->
<a-cylinder color="cyan" segments-radial="6"></a-cylinder>

<!-- Pac-man. -->
<a-cylinder color="yellow" theta-start="50" theta-length="280" side="double"></a-cylinder>

<!-- Green pipe. -->
<a-cylinder color="green" open-ended="true"></a-cylinder>

In degrees, thetaStart defines where to start the arc and thetaLength defines where the arc ends.

Also, we can create a tube by making the cylinder open-ended, which removes the top and bottom surfaces of the cylinder such that the inside is visible. Then, we need a double-sided material to render properly:

html
<a-cylinder color="cyan" material="side: double" open-ended="true" rotation="90 0 0"></a-cylinder>

Attributes

AttributeComponent MappingDefault Value
alpha-testmaterial.alphaTest0
ambient-occlusion-mapmaterial.ambientOcclusionMapNone
ambient-occlusion-map-intensitymaterial.ambientOcclusionMapIntensity1
ambient-occlusion-texture-offsetmaterial.ambientOcclusionTextureOffset0 0
ambient-occlusion-texture-repeatmaterial.ambientOcclusionTextureRepeat1 1
anisotropymaterial.anisotropy0
blendingmaterial.blendingnormal
colormaterial.color#FFF
depth-testmaterial.depthTesttrue
depth-writematerial.depthWritetrue
displacement-biasmaterial.displacementBias0.5
displacement-mapmaterial.displacementMapNone
displacement-scalematerial.displacementScale1
displacement-texture-offsetmaterial.displacementTextureOffset0 0
displacement-texture-repeatmaterial.displacementTextureRepeat1 1
ditheringmaterial.ditheringtrue
emissivematerial.emissive#000
emissive-intensitymaterial.emissiveIntensity1
env-mapmaterial.envMapNone
flat-shadingmaterial.flatShadingfalse
heightgeometry.height1
mag-filtermaterial.magFilterlinear
material-fogmaterial.fogtrue
material-visiblematerial.visibletrue
metalnessmaterial.metalness0
metalness-mapmaterial.metalnessMapNone
metalness-texture-offsetmaterial.metalnessTextureOffset0 0
metalness-texture-repeatmaterial.metalnessTextureRepeat1 1
min-filtermaterial.minFilterlinear-mipmap-linear
normal-mapmaterial.normalMapNone
normal-scalematerial.normalScale1 1
normal-texture-offsetmaterial.normalTextureOffset0 0
normal-texture-repeatmaterial.normalTextureRepeat1 1
offsetmaterial.offset0 0
opacitymaterial.opacity1
open-endedgeometry.openEndedfalse
radiusgeometry.radius1
repeatmaterial.repeat1 1
roughnessmaterial.roughness0.5
roughness-mapmaterial.roughnessMapNone
roughness-texture-offsetmaterial.roughnessTextureOffset0 0
roughness-texture-repeatmaterial.roughnessTextureRepeat1 1
segments-heightgeometry.segmentsHeight18
segments-radialgeometry.segmentsRadial36
shadermaterial.shaderstandard
sidematerial.sidefront
spherical-env-mapmaterial.sphericalEnvMapNone
srcmaterial.srcNone
theta-lengthgeometry.thetaLength360
theta-startgeometry.thetaStart0
transparentmaterial.transparentfalse
vertex-colors-enabledmaterial.vertexColorsEnabledfalse
wireframematerial.wireframefalse
wireframe-linewidthmaterial.wireframeLinewidth2