Different colors when on server vs. running locally?

Questions
1

I did search for this, and it seems like the wackiest thing. Here’s the problem. I am learning three.js following this excellent tutorial. When I run it locally using vite, it looks normal:

image
image657×516 18.3 KB

But, when I upload it and run it on github pages, the colors are….strange (brighter, washed out):

image
image671×467 9.36 KB

The code is identical. I am using three from “https://cdn.jsdelivr.net/npm/three@0.154.0/build/three.module.js". I tried experimenting with “renderer.outputEncoding” but it made no difference.

Any clues? Thanks!

Jared

2

Seems identical to this post!

And yet, I’m pretty sure I’m using the same version, because I’ve uploaded the indentical files. Maybe as someone mentioned, there is a double-exposure? Double the light source?

3

I’d still check whether console.log(__THREE__) prints the same Three.js release.

3 Likes
4

Well, I’ll be damned:

  • localhost: 182
  • remote: 154

Not sure how that’s possible, but you helped me figure out where to investigate next. Thank you!

1 Like
5

In case anyone has this issue in the future, here’s what it was. My local setup was using “vite” which uses npm with a package.json that had

  "dependencies": {
    "three": "^0.182.0"
  }

But I couldn’t get that npm configuration to be successful on github pages, so I switched to just loading three as a module via the CDN in index.html:

<script type="importmap">
{
  "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.154.0/build/three.module.js"
  }
}
</script>

Turns out this CDN import of three version 154 was ignored locally, preceded by version 182, which had the correct lighting. When I uploaded it, the CDN import kicked in, using version 154, which showed the lighting problem.

1 Like