I have a cube and I'm attempting to project an image onto it. I am using a loading Manager to load the image, but I am encountering an issue where material.map is showing as undefined. I suspect that there may be a problem with scaling. The original image size is 512x512 pixels while the cubes are 20x20x20 units.
Although I have omitted the code related to camera and renderer for brevity, I have included all necessary details in the following interactive code snippet below.
var loadingManager = new THREE.LoadingManager();
loadingManager.onProgress = function (item, loaded, total) {
//Display loading progress percentage
console.log(loaded / total * 100 + '%');
}
//Indicate when loading is complete
loadingManager.onLoad = function () {
//Initiate animation once models have finished loading
animate();
}
function init() {
//Create a loader
var loader2 = new THREE.TextureLoader(loadingManager);
//Load the texture, and assign it to a material once loaded
loader2.load("../img/leo.jpg", function (texture) {
//Should these lines be added?
texture.wrapS = texture.wrapT = THREE.RepeatWrapping
texture.repeat.set(boxSize, boxSize)
//Why is the texture not being displayed properly?
console.log(texture)
//The following does not seem to 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)
}
//Confirming if the image path is correct by displaying it
var img = document.createElement('img');
img.src = '../img/leo.jpg';
document.getElementById('container').appendChild(img);
The value of 'texture' from the console log shows this: https://i.sstatic.net/pISak.png