I have a photo-realistic scene already created in 3ds max. I want to render the scene on the web using WebGl and three.js. TO get the realistic effects created in 3ds max using mental ray renderer, I tried to bake the light maps from 3ds max to JPEG files and then map objects in three.js to the texture(exported JPEG) files. But the efeects in three.js seem to be stretched out and not positioned properly. Is my approach correct in the first place? If yes, could it be a problem with the UV mapping from the 3ds Max? Please provide some links if possible to map UVs properly in 3ds max while baking if that's the issue.
Also, do I need to use any custom shaders to get such effects? (I honestly know nothing about shaders if this question seems silly)
Thanks in advance.
I would highly recommend using the THREEjs exporter: https://github.com/mrdoob/three.js/tree/dev/utils/exporters/max
I have had a lot of trouble with Maya and other programs using any of the built in export options. Face winding, UVs and other stuff seems pretty iffy.The exporter helps.
Once you've done that, there's something else to keep in mind - THREEjs allows two sets of UVs only per piece of geometry. One for the map, bumpmap, displacementmap, etc, and another for the lightmap. So if those two UV sets end up different from one another, you might need to swap which you assign as map and which as lightmap.
Link a fiddle with what results you have so far and we might be able to help more. The only thing i can recommend is to use the THREEjs exporter without seeing what code you're using.