javascript - 如何在 MeshPhongMaterial 上动态设置纹理？

Question

我正在尝试在 THREE.MeshPhongMaterial 上设置纹理，但纹理未加载。我的代码:

let earth_geometry = new THREE.SphereGeometry(450, 10, 10)
let earth_material = new THREE.MeshPhongMaterial({
  emissive: 0xffffff
})
let earth = new THREE.Mesh(earth_geometry, earth_material)
loadImage(earth_material, '/img/earth.jpg')
scene.add(earth)

function loadImage(material, url) {
  let texture = new THREE.TextureLoader().load(url, (e) => {
    texture.minFilter = THREE.LinearFilter
    texture.anisotropy = 8
    material.map = texture
    material.needsUpdate = true
  })

如果我将 Material 更改为 THREE.MeshBasicMaterial()，则会加载纹理。为什么它不适用于 THREE.MeshPhongMaterial？

Answer 1

可能与您的纹理变量有关？
我想你是在设置他的纹理变量，在你尝试使用它之后。
加载器回调中的 e 参数实际上是加载的纹理。
试试这个..

function loadImage(material, url) {
  let loader = new THREE.TextureLoader()
  loader.load(url, (texture) => {
    texture.minFilter = THREE.LinearFilter
    texture.anisotropy = 8
    material.map = texture
    material.needsUpdate = true
    // maybe need this too..
    material.map.needsUpdate = true;
  })