Question

以下代码来自THREE.JS示例;效果很好。我用three.js代码制作了自己的艺术画廊。我用来悬挂绘画的代码源自three.js示例：webgl_materials_texture_manualmipmap.html

下面的代码可行，但我不明白如何在回调函数中使用materialPainting1，直到它在回调函数之后才完全定义。

有人可以向我解释这是如何运作的。如何在回调函数中使用materialpainting1，即使它是后来定义的，因为它在示例中运行良好，但在我自己的代码中，我必须使用小提琴来加载绘画。

var callbackPainting = function () {
  var image = texturePainting1.image;
  texturePainting2.image = image;
  texturePainting2.needsUpdate = true;
  scene1.add(meshCanvas1);
  scene2.add(meshCanvas2);
  var geometry = new THREE.PlaneGeometry(100, 100);
  var mesh1 = new THREE.Mesh(geometry, materialPainting1);
  var mesh2 = new THREE.Mesh(geometry, materialPainting2);
  addPainting(scene1, mesh1);
  addPainting(scene2, mesh2);

  function addPainting(zscene, zmesh) {
    zmesh.scale.x = image.width / 100;
    zmesh.scale.y = image.height / 100;
    zscene.add(zmesh);
    var meshFrame = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
      color: 0x000000,
      polygonOffset: true,
      polygonOffsetFactor: 1,
      polygonOffsetUnits: 5
    }));
    meshFrame.scale.x = 1.1 * image.width / 100;
    meshFrame.scale.y = 1.1 * image.height / 100;
    zscene.add(meshFrame);
    var meshShadow = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
      color: 0x000000,
      opacity: 0.75,
      transparent: true
    }));
    meshShadow.position.y = -1.1 * image.height / 2;
    meshShadow.position.z = -1.1 * image.height / 2;
    meshShadow.rotation.x = -Math.PI / 2;
    meshShadow.scale.x = 1.1 * image.width / 100;
    meshShadow.scale.y = 1.1 * image.height / 100;
    zscene.add(meshShadow);
    var floorHeight = -1.117 * image.height / 2;
    meshCanvas1.position.y = meshCanvas2.position.y = floorHeight;
  }
};
var texturePainting1 = THREE.ImageUtils.loadTexture("textures/758px-Canestra_di_frutta_(Caravaggio).jpg", THREE.UVMapping, callbackPainting),
  texturePainting2 = new THREE.Texture(),
  materialPainting1 = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    map: texturePainting1
  }),
  materialPainting2 = new THREE.MeshBasicMaterial({
    color: 0xffccaa,
    map: texturePainting2
  });

Answer 1

纹理加载是异步的;在纹理加载之前，才会执行回调函数。到那时，您的材料已被定义。

然而，作为一种良好实践，我首先要定义材料。

three.js r.66

试图理解THREEJS中使用的回调函数

1 个答案: