Threejs textureLoader - 缩放和映射到网格

Question

我有一个立方体，我试图将图像映射到。我用加载管理器加载图像。我想知道为什么material.map以未定义的形式返回，也想知道我是否有缩放问题。原始图像为512x512。方框是20x20x20。

我遗漏了有关相机，渲染器等的所有代码，但我尝试将其全部包含在下面的代码段/交互式部分中。

var loadingManager = new THREE.LoadingManager();

loadingManager.onProgress = function (item, loaded, total) {

  //Loading percentage
  console.log(loaded / total * 100 + '%');

}

//Signify loading done
loadingManager.onLoad = function () {

  //Start the animation when the models are done loading
  animate();
}

function init() {

  //create a loader
  var loader2 = new THREE.TextureLoader(loadingManager);

  //load the texture, and when it's done, push it into a material
  loader2.load("../img/leo.jpg", function (texture) {

    //do I need to do this?
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping
    texture.repeat.set(boxSize, boxSize)

    //why is this texture not coming through?
    console.log(texture)

    //does not work:
    material1 = new THREE.MeshBasicMaterial({
      map: texture,
      side: THREE.DoubleSide
    });


  })

  var geo = new THREE.BoxGeometry(30, 30, 30)
  var mat = new THREE.MeshBasicMaterial({
    color: 0xb7b7b7
  })
  mesh = new THREE.Mesh(geo, material1)
  scene.add(mesh)

}

// This works, so I know the image path is correct
var img = document.createElement('img');
img.src = '../img/leo.jpg';
document.getElementById('container').appendChild(img);

控制台日志中的纹理值如下：

Answer 1

错误与您在加载程序的load函数的回调之外关联材料这一事实有关，您必须在回调中执行此操作。

来自TextureLoader的文档：

• onLoad - 将在加载完成时调用。

您必须执行以下操作：

loader2.load("../img/leo.jpg", function(texture) {
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping
      texture.repeat.set( boxSize,boxSize )
      //why is this texture 1 not coming through?
      console.log(texture)

      //neither of these work:
      var geo = new THREE.BoxGeometry(30,30,30);
      material1 = new THREE.MeshBasicMaterial({ map: texture,side: THREE.DoubleSide });

      var mesh = new THREE.Mesh(geo, material1);

        // animation loop
       function animate() {

         requestAnimationFrame( animate );

         render();

        // update stats
        stats.update();
      }

      ...
});

为了使其更具可读性并避免回调噩梦，请执行以下操作：

function myInit(texture) {
  ...
}

loader2.load("../img/leo.jpg", myInit);