I'm having trouble adding a texture to a MeshPhongMaterial in Three.js. When I try to do so, all I get is a black box with some lighting effects. I've been stuck on this issue for quite some time and can't seem to find a solution.
//Setting up the cube and lighting
function initializeCube() {
var loader = new THREE.TextureLoader();
var texture1 = loader.load("brick.jpg");
cubeTexture = loader.load
cube = new THREE.Mesh(new THREE.BoxGeometry(3, 3, 3), new
THREE.MeshPhongMaterial({color: 0xffffff, map: texture1}));
scene.add(cube);
cube.scale.set(0.5, 0.5, 0.5);
cube.position.x = 0;
//Adding the first light
cubeLight = new THREE.PointLight(0xFF0000 , 30, 1);
cube.add(cubeLight);
cubeLight.position.set(-0.5, -1, 0);
scene.add(cubeLight);
cubeLight.power = 100;
map.cubeLight = {
light: cubeLight,
added: true
}
//Adding the second light
cubeLight2 = new THREE.PointLight(0x6600ff , 1, 1);
cube.add(cubeLight2);
cubeLight2.position.set(0, 1, 0);
scene.add(cubeLight2);
cubeLight2.power = 100;
map.cubeLight2 = {
light: cubeLight2,
added: true
}
}