Welcome to “Using ThreeJS API In Ways It Is Not Supposed To Be Used Late Night Show”, I am your host electric hamster - and this is one way of doing it.
(1) Create a super chunky doughnut using TorusGeometry:
(2) Assume some ring width (ex. 0.5, remember this number for later) and subtract it from Torus’ second argument in the constructor. Or just put a super-tiny number there - like 0.000001.
(3) Create a displacement map (black and white map - black parts stay untouched, white parts will be “pushed outwards”.) This is a default UV mapping torus geometry uses:
^ This is also the displacement map used in the example, be sure to use smooth gradients since Torus’ surface is 100% smooth angles.
(4) Apply as MeshStandardMaterial (or any other that supports displacement):
new THREE.MeshStandardMaterial({
displacementMap: displacementMap,
displacementScale: .5 // <- here goes the number you picked in point (2)
})
Note: If you want the profile of the ring to be configurable, it should be enough to use CanvasTexture and a few canvas gradients.