JavaScript滚动颗粒过渡滑块本地图片无法加载求助

问题原因分析 #

本地图片无法加载通常由以下几点导致：

• 图片路径配置错误
• 本地file://协议的安全限制
• 不必要的跨域设置干扰本地资源加载
• 异步纹理加载与Mesh创建的顺序冲突

具体解决步骤 #

1. 确认文件路径结构 #

确保你的项目文件结构如下：

你的项目文件夹/
├── index.html
├── images/
│   ├── 1.jpg
│   ├── 2.jpg
│   └── 3.jpg
└── 其他JS/CSS文件

此时['images/1.jpg', 'images/2.jpg', 'images/3.jpg']的路径才是正确的。如果images文件夹在子目录，路径需要对应调整（比如'./src/images/1.jpg'）。

2. 移除不必要的跨域设置 #

本地图片不需要跨域权限，删除TextureLoader的跨域配置：

// 原代码（删除这一行）
loader.crossOrigin = ''

3. 修复异步纹理加载逻辑 #

原代码中createMesh会在纹理加载完成前执行，导致Mesh初始化时纹理为空。改用Promise.all等待所有纹理加载完成后再创建Mesh：

修改loadTextures方法：

loadTextures() {
  const loader = new THREE.TextureLoader()
  // 移除crossOrigin设置

  // 将每个纹理加载转为Promise
  const texturePromises = this.images.map((image) => {
    return new Promise((resolve) => {
      const texture = loader.load(image, () => {
        texture.minFilter = THREE.LinearFilter
        texture.generateMipmaps = false
        resolve(texture)
      })
    })
  })

  // 加载位移纹理的Promise
  const dispPromise = new Promise((resolve) => {
    const dispTexture = loader.load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/rock-_disp.png', () => {
      dispTexture.magFilter = dispTexture.minFilter = THREE.LinearFilter
      dispTexture.wrapS = dispTexture.wrapT = THREE.RepeatWrapping
      resolve(dispTexture)
    })
  })

  // 等待所有纹理加载完成
  Promise.all([...texturePromises, dispPromise]).then((results) => {
    this.textures = results.slice(0, this.images.length)
    this.disp = results[results.length - 1]
    
    // 所有纹理加载完成后再创建Mesh
    this.createMesh()
    // 设置第一张图的尺寸
    this.mat.uniforms.size.value = [
      this.textures[0].image.naturalWidth,
      this.textures[0].image.naturalHeight
    ]
    this.render()
  })
}

修改init方法，移除单独的createMesh调用：

init() {
  this.setup()
  this.cameraSetup()
  this.loadTextures() // createMesh会在纹理加载完成后调用
  this.setStyles()
  this.render()
  this.listeners()
}

4. 使用本地HTTP服务器访问 #

直接用浏览器打开本地HTML文件会触发file://协议的安全限制，导致Three.js无法正常加载纹理。建议用以下方式启动本地服务：

• VSCode安装Live Server插件，右键HTML文件选择"Open with Live Server"
• 使用Node.js的http-server：先安装npm install -g http-server，然后在项目目录执行http-server，访问控制台给出的地址（通常是http://localhost:8080）

额外注意事项 #

• 确保图片格式正确（JPG/PNG等Three.js支持的格式）
• 清除浏览器缓存，避免旧的错误资源缓存影响加载
• 检查浏览器控制台的错误信息（F12打开开发者工具），根据具体错误提示排查问题

内容的提问来源于stack exchange，提问作者user22416593