bottle纹理加载不出来

Question

bottle纹理加载不出来，代码如下

loadTexture () {
    const loader = new THREE.TextureLoader()
    const specularTexture = loader.load('/game/res/images/head.png')
    const middleTexture = loader.load('/game/res/images/middle.png')
    const bottomTexture = loader.load('/game/res/images/bottom.png')
    const specularMaterial = new THREE.MeshBasicMaterial({
      map: specularTexture
    })
    const middleMaterial = new THREE.MeshBasicMaterial({
      map: middleTexture
    })
    const bottomMaterial = new THREE.MeshBasicMaterial({
      map: bottomTexture
    })

    return {
      specularMaterial,
      middleMaterial,
      bottomMaterial
    }
  }

const {
      specularMaterial,
      middleMaterial,
      bottomMaterial
    } = this.loadTexture()

    const top = new THREE.Mesh(
      new THREE.SphereGeometry(headRadius / 1.4, 20, 20),
      bottomMaterial
    )
    const head = new THREE.Mesh(
      new THREE.OctahedronGeometry(headRadius),
      specularMaterial
    )

 const specularTexture = loader.load('/game/res/images/head.png', function(texture) {
      console.log(texture.image.currentSrc) // 拿到 http://127.0.0.1:58577/game/res/images/head.png，这个地址在浏览器中都无法访问，
    })

请问各位大佬，这是哪里出问题了？

Answer 1

提问者 慕哥7245114 2020-10-12 19:13:07

应该不是图片访问不到到问题，代码也应该没有问题

想了半天，感觉应该是纹理加载是异步到原因，修改一下render函数就好了

但是，为什么老师到代码不用requestAnimationFrame也可以呢？

```

render() {

this.renderer.render(this.instance, this.camera.instance)

requestAnimationFrame(this.render.bind(this))

}

```

• 千迦 #1

  同学你好，在慕课网平台上下载代码可以作为参考。我看了complete-version的代码，用的也是requestAnimationFrame。祝你学习愉快