Corrugated Ring

Hi community!

Picture:

Demo: https://codepen.io/prisoner849/pen/yLprLEZ?editors=0010

Code:

const minR = 0.1;
const maxR = 3;
const segs = 60;
let g = new THREE.RingGeometry(minR, maxR, segs, 1);
let v3 = new THREE.Vector3();
let pos = g.attributes.position;
let uvs = g.attributes.uv;
for(let i = 0; i < pos.count; i++){
  v3.fromBufferAttribute(pos, i);
  let len = THREE.MathUtils.clamp(v3.length(), minR, maxR);
  let diffR = maxR - minR;
  let a = Math.atan2(v3.y, v3.x);
  let z = Math.cos(a * segs * 0.5) * (len / diffR) * 0.1;
  pos.setZ(i, z);
  let u = (a + Math.PI) / (Math.PI * 2);
  let v = len / diffR;
  uvs.setXY(i, u, v);
}
g = g.toNonIndexed();
g.computeVertexNormals();
let m = new THREE.MeshLambertMaterial({map: getTexture()});
let o = new THREE.Mesh(g, m);
scene.add(o);

function getTexture(){
  let c = document.createElement("canvas");
  c.width = 1;
  c.height = 10;
  let ctx = c.getContext('2d');
  let cols = ["pink", "lightgreen", "lightblue", "lightyellow"];
  for(let i = 0; i < c.height; i++){
    ctx.fillStyle = cols[THREE.MathUtils.randInt(0, cols.length - 1)];
    ctx.fillRect(0, i, 1, 1);
  }
  let canvas = new THREE.CanvasTexture(c);
  canvas.minFilter = THREE.NearestFilter;
  canvas.magFilter = THREE.NearestFilter;
  canvas.needsUpdate = true;
  return canvas;
}

@hofk Did you make something similar arleady and I re-invented the bicycle? :thinking:

2 Likes

Interesting decoration :sparkler:

Not that I could remember!

The Swinging Polygon is a completely different matter.


If it should be a 3D model of a lantern like in the picture of the linked job offer, one only needs two such rings with corresponding z-values and the outer edge must be jagged similar (but simpler) to the swinging polygon.


This still has some similarity. However, the soft folding is in the radial direction.
CircleDynamicallyFormable
ComputeNormalsInVertexShader

2 Likes