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?