I am working on a project that involves displaying multiple renderer, scene, and camera "groups" on a single HTML page. However, I encountered challenges when attempting to implement a render loop using requestAnimationFrame across all these groups. Despite trying to iterate over the list, I have been unsuccessful in rendering even a single frame.
Initially, calling renderer.render on each of the groups within the same function where they are instantiated worked well. But upon refactoring the code to enable rendering outside of that function, my blue spheres disappeared.
The HTML elements include...
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>
...to which I add some Three.js components.
$(document).ready(function(){
addResizeandCenterListener(window, $("#container"), 4/3);
addResizeListener($("#container"), $(".playerhalf"), 2/1);
for (let item of [".1", ".2", ".3", ".4", ".5", ".6", ".7", ".8"]) {
var threeDetails = addThreeRendererToElem($(item), item);
var scene = threeDetails["scene"];
addClickListenerToElem($(item), scene);
}
});
threeList = [];
function addThreeRendererToElem(elem, name){
var width = elem.innerWidth();
var height = elem.innerHeight();
var scene = newScene();
scene.name = name;
addDefaultLight(scene);
addBlueBall(scene);
var camera = addDefaultCamera(scene, width, height);
var renderer = newRenderer(width, height);
elem[0].appendChild(renderer.domElement);
var threeDict = {"renderer":renderer, "scene":scene, "camera":camera}
threeList.push(threeDict)
renderList();
}
function renderList() {
var tlist = threeList;
for (var i = 0; i < tlist.length;i++) {
var threeDict = tlist[i];
threeDict["renderer"].render(threeDict["scene"],
threeDict["camera"]);
}
}
// Remaining functions will be added here...
Despite expecting to see the blue spheres rendered like before, this time only blank canvases appear instead of the expected visual output. While inspecting threeList confirms that all objects are present, there are no error messages displayed.