I'm having trouble adding a texture to my plane that repeats both horizontally and vertically. Every time I try to apply the texture, it shows up as black. I've attempted to add some lights to the scene, but the issue persists without any errors. I'm not sure how to fix it. Here's the code I'm working with:
window.onload = function init()
{
scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );
var spotlight = new THREE.SpotLight( 0xffffff);
spotlight.position.set( -50, 40, 0 );
scene.add( spotlight );
var axes = new THREE.AxisHelper( 20 ); scene.add(axes);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth, window.innerHeight);
createMap();
document.body.appendChild( renderer.domElement );
renderer.render(scene, camera);
}
function createMap()
{
maze = new THREE.Object3D();
var texturePlane = new THREE.TextureLoader().load("texturaPac.jpg");
planeGeometry = new THREE.PlaneGeometry(50,50);
planeMaterial = new THREE.MeshPhongMaterial( {map: texturePlane} );
var pacManPlane = new THREE.Mesh(planeGeometry,planeMaterial);
pacManPlane.rotation.x = -0.5 * Math.PI;
scene.add(pacManPlane);
}
Any advice on how to solve this issue?