bottle纹理加载不出来

来源:7-5 threejs纹理映射&bottle纹理高光

慕哥7245114

2020-10-11

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,这个地址在浏览器中都无法访问,
    })

图片描述

请问各位大佬,这是哪里出问题了?

写回答

1回答

慕哥7245114

提问者

2020-10-12

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

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

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

```

render() {

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

requestAnimationFrame(this.render.bind(this))

}

```

0
1
千迦
同学你好,在慕课网平台上下载代码可以作为参考。我看了complete-version的代码,用的也是requestAnimationFrame。祝你学习愉快
2020-10-20
共1条回复

three.js-打造微信小游戏跳一跳 快速掌握3D游戏开发

three.js+WebGL+微信小游戏API, 带你进入3D的游戏世界

793 学习 · 147 问题

查看课程