As part of a course requirement, I am tasked with creating a simple game using Three.js. One of the tasks involves setting up an array of spotlights in the following manner:
function loadLights(roomWidth, roomHeight) {
let spotlights = [];
fetch(configLights).then(res => res.text()).then(data => {
const doc = yaml.load(data);
const ambient = new THREE.AmbientLight(doc.ambientLight.color);
ambient.intensity = doc.ambientLight.intensity;
scene.add(ambient);
let isAmbient = true;
for (const r in doc) {
const room = doc[r];
if (isAmbient) {
isAmbient = false;
continue;
}
for (const spot in room) {
for (let i = 0; i < 5; i++) {
const obj = room[spot];
let sl = new THREE.SpotLight();
sl.intensity = obj.intensity;
sl.decay = obj.decay;
sl.distance = obj.distance;
sl.penumbra = obj.penumbra;
sl.castShadow = true;
sl.shadow.mapSize.width = 1024;
sl.shadow.mapSize.height = 1024;
sl.receiveShadow = true;
scene.add(sl);
spotlights.push(sl);
}
}
}
});
//START
console.log(spotlights);
return spotlights;
}ambientLight:
color: "0x404040"
intensity: 0.3
room:
spotRoom:
intensity: 1.4
decay: 10
penumbra: 0.5
distance: 100
Upon printing the array "spotlights" in the console, the output looks like this: https://i.sstatic.net/154AF.png
I'm having trouble accessing these objects. Attempting spotlights[0] returns undefined.