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