3D model doesn't show correctly

[mihomi]

Hello, I can’t figure out how to code to show the 3D model properly. Please take a look at this model shaded on the threejs editor.

and this is what I see on my web.

And this is my script.

Not only the blue hue colors are overly shifted but also the base of the model has 2 tones (white and grey). Please ignore the different view angles. It just looks different lightings no matter which angles. I set up the .json file to load, but should I use the .gltf file and load instead? Any suggestions are much appreciated!

Thank you SO much all!!

[Mugen87]

I’m afraid your expected outcome is not yet clear. Do you mind sharing an image that shows how the city should look like?

@mihomi

I set up the .json file to load, but should I use the .gltf file and load instead?

Yes, it’s better to go for glTF. This makes it also easier to compare the rendering of the asset with different engines/viewers.

[mihomi]

Hi Mugen87,

Thank you so much for your attention.

First of all, I created the 3D model in Blender first. And I exported as a .glb file.
And I imported it to “https://threejs.org/editor/” and I added different lightings there.
And I exported it as a '.json" file and added some code to load it on my web.

But the 3D model I see on the web doesn’t look like the one I saw in the threejs editor.

My goal is to show the 3D model I created (original in blender + lighting in threes editor) exactly the same on my web. Unfortunately, they look different right now.

You can also see the screenshot of the model (the very top image in my previous post) which I want to show on the web.

I wanted to attached here the .json files that I exported straight from the threejs.org editor but the file size is too big to upload. So I attached more screenshots from the threejs editor trying to show you the different lighting values.

Do these help you to examine what’s wrong with me? Please let me know.

Thank you so much!

[Mugen87]

@mihomi

My goal is to show the 3D model I created (original in blender + lighting in threes editor) exactly the same on my web. Unfortunately, they look different right now.

When inspecting your script, I’ve noticed that you miss this line (which is present in the editor’s renderer configuration).

renderer.outputEncoding = THREE.sRGBEncoding;

Please add it to ensure to output the same color space. Does this improve the result?

[mihomi]

Hi Mugen87, Thank you SO much for your suggestion. I"ll try and let you know!

[mihomi]

Hi Mugen87, It was great a hit! We still have a bit more to go but your piece of advice opened so many doors for us! Thank you SOOO much!!