I am new to this threejs and i am really getting a hang of it. So far this is what i have created https://ngcouture.herokuapp.com/ i have been trying to build a cloth product configurator and it is coming out well, but i have a slight issue. it looks kinda novice, looks low poly and fake. Is there any way to make it look more realistic in terms of adding shadows, materials, ambient occlusion so that the folds in the cloth shows, also the texture which is a jpg image seems like a picture plastered on a cartoon comes out well, please can some suggest any ideas to how i can tush this project up. I will be grateful ?
I actually think it’s looking pretty good so far!
I would set material.side = THREE.DoubleSide so the back faces don’t disappear.
I would maybe add more lights… Like a point light or hemisphere light off to the side somewhere… Look up “three point lighting” on the web… You could also look at adding some post-processing if you want to get super fancy… like realtime Ambient occlusion… Or you could also bake ambient occlusion from your modeller into a separate texture and apply that to your model.
One of the biggest things I’ve seen that affects quality is how the object interacts with it’s background… for instance you’re looking at this model against a perfectly white background, which is unrealistic, and makes the model pop out weirdly because it has subtle shadowing… So maybe try using a subtle gradient background for the scene to give it more of a sense of fitting in?
The next step beyond that could be to use PBR shading, and bump/normal maps to give the fabric more texture… Then with PBR shading you can use Image Based Lighting, and an environment skybox, to make the object have subtle lighting variation that matches with the environment the model is in.
CGI is really an art form, so it can be helpful to watch some videos by classical offline/vfx 3d artists to get some hints.
It might not be a huge help, but here is a simple demo I hacked up a while ago… it at least shows how using more than one light, and a non-white background can give things a little pop.
Also I made a custom color picker there, and the app supports pasting textures… Feel free to look at the code and use it if you find anything useful.
Although your app already looks miles better than my little demo… keep at it!
hth
http://www.vectorslave.com/coffeemug/index.html?mug.json,3000,404040,0,0,0
http://www.vectorslave.com/coffeemug/index.html?shirt.json,100,ffffff,0,0,0
i am still new to this so i am a bit confused.
-
What do you mean by “THREE.DoubleSide so the back faces don’t disappear” , and based on the background i wanted to actually make it a cube map, but i dont know how to do that.
-
Then is PBR shading the same as "
MeshStandardMaterial" cause i used a “MeshLambertMaterial” -
how did you make your cup model rotate around one spot.
This is what i have done so far https://ngcouture.herokuapp.com/