前端 - vue2与three.js：图片颜色为什么显示异常？

Question

前端vue2 使用three.js 创建的 3D 场景，为什么部署之后图片颜色不正常

第一张是部署在服务器上的展示样式截图，第二张是本地展示样式截图
打包之后在dist查看static 里面的图片是正常的，没有问题
背景是通过three 场景添加的背景图

  // 创建场景    setScene() {      //  创建场景对象Scene      this.scene = new THREE.Scene()      // 加载背景图片      var texture = new THREE.TextureLoader().load(require('@/assets/screen/backGround_big.png'))      // 纹理对象Texture赋值给场景对象的背景属性.background      this.scene.background = texture    },

部署之后F12中 ele中dom结构并没有异常，没有什么多余蒙版遮住。
中间是一个地图，地图加载代码已经注释并不会影响three场景，
地图展示是另一个问题，https://segmentfault.com/q/1010000044486266

Answer 1

依赖包的问题，
我在前期开发时候由于网不好下载不下来依赖包，就从别的博主项目里面复制的依赖包，但是没有复制 package。json文件。我本地的 是159版本，但是实际的包确实140的包。因此有这问题出现

正确版本 "three": "^0.140.2",

Answer 2

这个问题可能是由于图片的路径或者加载方式引起的。在你的代码中，你是使用 THREE.TextureLoader().load() 方法来加载图片的。这个方法会返回一个 Promise，你需要等待这个 Promise 完成，图片才能被正确加载。如果服务器上的图片路径和本地图片路径不同，或者服务器上图片的加载有延迟，都可能导致图片颜色显示异常。

另一个可能的原因是，你的 Vue 应用可能没有正确处理跨域请求。如果你的服务器不允许跨域请求，那么你的图片可能无法正确加载。你需要检查你的服务器设置，确保它允许跨域请求。

此外，你可能需要检查你的打包配置。如果你的静态资源（包括你的图片）在打包后被错误地处理或放置，那么也可能导致颜色显示异常。你应该检查你的 Vue.config.js 文件（如果你有的话），或者你的 webpack 配置，确保你的静态资源被正确处理和放置。

你可以尝试以下的解决方案：

1. 确保服务器允许跨域请求。
2. 检查并确保你的图片路径是正确的。
3. 确保你的打包配置正确，静态资源被正确处理和放置。
4. 使用 then() 方法来处理 TextureLoader().load() 的 Promise，确保图片加载完成后再进行渲染。

像这样：

setScene() {  // 创建场景对象Scene  this.scene = new THREE.Scene();    // 加载背景图片  var texture = new THREE.TextureLoader().load(require('@/assets/screen/backGround_big.png'));  // 使用 then() 方法处理 Promise  texture.then(texture => {    // 纹理对象Texture赋值给场景对象的背景属性.background    this.scene.background = texture;  });},