I am recreating a website in which i need the same quality as of the reference website, but am unable to achieve that quality with threejs lighting and environments. Can anyone help out with this issue? Also there is some blur kind of effect when orbit controls stop, that effect also i want in my code, how can i get that, if anyone has any idea regarding these problem kindly help.
Left side - My site
Right side - Reference site
Are you using the same environment / reflections map as the reference website? The look of the lights depends pretty much only on the envmap (unless you use other, strong light sources.)
As for the blur when orbiting - motion blur is what you’re looking for. But this effect does not come out of the box neither with three.js postprocessing nor with pmndrs/postprocessing - you may need to implement it manually.
I tried creating the same environment, but am unable to create it, so i tried creating it with lights, rect-area light and spotlights, but am not able to get the exact match.
What do you mean? Environment is usually a texture - it’s not possible, or at least in most cases no viable, to reproduce it with just lights. Environment map contains reflections which add realism to shiny materials.
Yes, i know that environment is single texture, i have tried doing it using environment map also, but am unable to recreate it, the shininess on materials are either very sharp or either very reflective or either very dull.
ALSO, Regarding the Motion blur, this is the type of blur am expecting.
The blur you are looking for is Depth of Field, or DOF.
https://threejs.org/examples/?q=post#webgl_postprocessing_dof2
When manipulating lights and especially environment lighting, it’s a good idea to make a little GUI where you can manipulate values and see the result in realtime (as in the example above).
I would also recommend trying different toneMapping. This has a big effect on color.
I tried to replicate the environment, got it almost, need to know one thing.
In Blender i am able to create the colors and everything like the reference website, but when imported in threejs am unable to acheieve the exact colors like the reference website, is it because of some
tonemapping difference between threejs and blender or some material issue.
If you can help me fix this, then please bro.
Also, the areas in between the model like the engine lines and space between the engine lines looks darker in the reference but in my they are brighter. Not able to figure out why its happening like that.
