Cylinder

ライブエディター

function Canvas() {
      const geo = cylinder({ radiusTop: 0.5, radiusBottom: 0.5, height: 1 })
      const mat = rotate3dX(iDrag.y).mul(rotate3dY(iDrag.x))
      const gl = useGL({
              isWebGL: true,
              isDepth: true,
              count: geo.count,
              vertex: vec4(mat.mul(geo.vertex), 1),
              fragment: vec4(varying(geo.normal), 1),
      })
      return <canvas ref={gl.ref} />
}

結果

Loading...

Cylinder Props

radiusTop	Radius of the cylinder at the top. Default is 1.
radiusBottom	Radius of the cylinder at the bottom. Default is 1.
height	Height of the cylinder. Default is 1.
radialSegments	Number of segmented faces around the circumference. Default is 32.
heightSegments	Number of rows of faces along the height. Default is 1.
openEnded	Whether the ends of the cylinder are open or capped. Default is false.
thetaStart	Start angle for first segment in radians. Default is 0.
thetaLength	Central angle of the circular sector in radians. Default is Math.PI * 2.

Parametric Surface Definition

The cylinder surface is defined as a parametric equation where the radius varies linearly along the height:

$$r(v) = r_{\text{top}} + v \cdot (r_{\text{bottom}} - r_{\text{top}})$$

For parameters $(u, v)$ where $u \in [0, 1]$ represents angular position and $v \in [0, 1]$ represents height position:

$$\begin{align} x &= r(v) \cdot \sin(\theta_{\text{start}} + u \cdot \theta_{\text{length}}) \\ y &= -v \cdot h + \frac{h}{2} \\ z &= r(v) \cdot \cos(\theta_{\text{start}} + u \cdot \theta_{\text{length}}) \end{align}$$

Normal Vector Calculation

Surface normals are computed considering the slope between top and bottom radii:

$$\text{slope} = \frac{r_{\text{bottom}} - r_{\text{top}}}{h}$$

The unnormalized normal vector at any point is:

$$\vec{n} = (\sin\theta, \text{slope}, \cos\theta)$$