Hello, THREEJS Developers.
I ran into a problem while pursuing my personal project. I wanna create a website which is ring configurator. I have been trying to create a 3d scene that allows users to edit and view the rings.
The issue is that I can’t produce some kind of effect. I would like to produce something like following picture.
I would like to create a sine-wave groove in ring and add 2 materials on both sides, as seen in the picture.
I tried to make use of extrude geometry of threeJS. But, it does not give me much help.
Can anyone give me answer for this issue?
I believe in that it can be done with threejs. But, I can’t figure out how to do.
Thanks for your time.
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.
4 Likes
Thanks for your effort. @mjurczyk
I think you just fake human eyes by manipulating the material displacement map. I will consider it.
Can you give me an idea of 100% replicating the effect in the picture?
It has a sine-wave groove in the center of the ring profile, and different colors on both sides of the groove.
I think it may need more than 2 materials.
Anyway, can you think of any way of creating material that does look like the ring in the picture?
Thanks for your creativity.
Just to clarify - it’s not really faking anything. It’s displacing the vertices in the same way a custom shader would (and takes advantage of the shape and UV mapping of a torus.)
I played around a little to replicate the ring from your picture and there are only 2 things to consider:
- Resolution of the ring geometry - ie. make sure it matches the resolution of the displacement texture.
- Resolution of the displacement map - make sure it’s big enough to look high quality.
Than you just paint whichever shapes you need on the displacement map:
This is both the torus and textures at 2048x2048 - at which the sine groove starts to look decent. To optimise it you could try mixing using displacement maps and normal maps (normal maps are the “human eye faking” ones - but they require far fewer vertices to look good.)
As for the amount of materials - you’d only really need one, as long as it’s using a CanvasTexture.
1 Like
You can deform a box at your will: https://jsfiddle.net/prisoner849/8bw94cs3/
3 Likes
Great job!!! @prisoner849. Thanks very much. Really appreciated.
I think your answer is really close to my question.
Can you help me solve another small issue?
That has something with ring material.
As you can see in the picture, there are 2 materials on both sides of the groove.
If the ring is only one mesh(geometry), not 2 meshes, then how can I get such an effect?
Thanks for your time.
@David_Jumbo
Use a single geometry with two groups, thus you can apply an individual material to a group. https://jsfiddle.net/prisoner849/g5u2fLb0/
There is a single geometry, built with merging of two, that has two groups.
I’m just curious: why don’t you want to use @mjurczyk 's approach with displacement and normal maps? It provides more flexibility with ring’s profile and visuals, from my point of view.
2 Likes
@Gleason748 You’re welcome 