Threejs在运行时更改图像

Question

我正在展示一个 3d obj 并将纹理应用为 jpg。 但是我想在单击按钮时更改此图像，这是可能的，我该怎么做？

var loader = new THREE.ImageLoader(manager);
loader.load('models/obj/dla/dla.jpg', function(image) {
    texture.image = image;
    texture.repeat.set(1,1);
    texture.needsUpdate = true;
});

// model
var loader = new THREE.OBJLoader(manager);
loader.load('models/obj/dla/dla.obj', function(object) {

  object.traverse(function(child) {

  if (child instanceof THREE.Mesh) {

    child.material.map = texture;

  }

});

Answer 1

如果更改材质的纹理/贴图，设置material.needsUpdate = true 很重要。

.needsUpdate : 布尔值

指定需要在 WebGL 级别更新材料。如果您进行了需要反映在 WebGL 中的更改，请将其设置为 true。 实例化新材质时，此属性会自动设置为 true。

这是一些代码，我将如何实现它。我也会使用TextureLoader而不是ImageLoader。

// init
var obj;
var objLoader = new THREE.OBJLoader(manager);
var textureLoader = new THREE.TextureLoader(manager);

// load model
objLoader.load('models/obj/dla/dla.obj', function(object) {

  obj = object;
  loadTexture('models/obj/dla/dla.jpg', obj)

});

// load texture
function loadTexture(path, object) {
  textureLoader.load(path, function(texture) {
    object.traverse(function(child) {

      if (child instanceof THREE.Mesh) {

        child.material.map = texture;
        child.material.needsUpdate = true;

      }

    });
  });
}

// onclick handler
function onClick() {
  loadTexture('models/obj/dla/anotherTexture.jpg', obj);
}

如果您不再使用旧纹理，您可能希望将其从内存中丢弃。

...
if (child.material.map) child.material.map.dispose();

child.material.map = texture;
child.material.needsUpdate = true;
...