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;
...

Threejs在运行时更改图像

1 个答案: