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

Question

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

马文庆i

271822

发布于
2023-12-20 河南

更新于
2023-12-20

前端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

vue2 three.js 前端异常处理部署

阅读 1.4k

AI BotBETA

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

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

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

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

确保服务器允许跨域请求。
检查并确保你的图片路径是正确的。
确保你的打包配置正确，静态资源被正确处理和放置。
使用 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;
  });
},

1 个回答

得票最新

马文庆i

271822

发布于
2023-12-20 河南

✓ 已被采纳

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

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

撰写回答