Browser 3d viewer

The 3d viewer https://design.havipropel.com/havi/store/product/1/48

I designed the shoe in Fusion 360.

There is a major difference in how the product is visible in Autodesk viewer and the above-mentioned link.

Can you please help me know what exactly is causing the change and what factors are affecting the such a major change in the view of the same product.

How does your material definition look like? It seems you just load an OBJ file and thus define the material directly in your app. The entire scene setup would actually be useful.

BTW: I’ve tried to inspect your source code but because of the number of files and code minification it’s hard to find the place where the scene setup is implemented.

could you please rephrase this.

I don’t think there is a scene setup. I will ask the team and get back on this.

I am 3d modeller not a fulltime programmer. could you please suggest articles or readings to go through for web 3d viewers. I am having an hard time find them.

Can you please share the code that shows how you add the loaded OBJ to your scene?

My apologies for the delay I have uploaded the code.
JS call for 3d.rtf (9.2 KB)

According to the code, it seems the shoe is only affected by a single ambient light. I suggest you apply other types of light to your scene, for example an instance of DirectionalLight or PointLight.

Besides, if you want to make your scene as realistic as possible, you should not use MeshLambertMaterial but a PBR-based workflow. So MeshStandardMaterial or MeshPhysicalMaterial are better choices. You also want to apply a HDR environment map to your model for better lighting similar to the following example:

https://threejs.org/examples/webgl_loader_gltf

Besides, I also recommend to use the more modern glTF instead of OBJ/MTL.

This is amazing.

I shall give this a try.

Thank you.