Проблемы с рендерингом списка трех рендеров - PullRequest
Новая
       31

Проблемы с рендерингом списка трех рендеров

1 голос
/ 25 июня 2019

Я пытаюсь отобразить список «групп» рендерера / сцены / камеры на той же html-странице.Я столкнулся с проблемами при попытке реализовать цикл рендеринга на всех из них, используя requestAnimationFrame.Однако я не могу успешно визуализировать даже один кадр, циклически перебирая список.

, вызывая renderer.render для каждой из "групп" в той же функции, в которой я их создаю, работает нормально.Я реорганизовал код, чтобы разрешить вызовы render для каждого из средств визуализации вне указанной функции, и мои синие сферы исчезли;

У меня есть некоторые элементы ... 

 <div class="1"></div>
 <div class="2"></div>
 <div class="3"></div>
 <div class="4"></div>

, которые я добавляю несколькотри вещи в 

$(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 = [];

//this adds a renderer/scene/camera to the element "elem"
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);
    //this works fine regardless of how many renderer/scene/camera groups I have placed in the DOM
    //renderer.render(scene, camera);
    var threeDict = {"renderer":renderer, "scene":scene, "camera":camera}
    threeList.push(threeDict)
    //this does not work, even if I only place a single renderer/scene camera group in the DOM
    renderList();
}

function renderList() {
    var tlist = threeList;
    for (var i = 0; i< tlist;i++) {
        var threeDict = tlist[i];
        threeDict["renderer"].render(threeDict["scene"], 
                                     threeDict["camera"]);
    }
}

function newScene(){
    scene = new THREE.Scene();
    return scene;
}

function newCamera(w, h){
    camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 100);
    return camera;
}

function newRenderer(w, h){
    renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
    renderer.setSize(w, h);
    return renderer;
}

function addObjectToScene(obj, scene){    
    scene.add(obj);
}

function ballObj(color){
    var ballGeometry = new THREE.SphereGeometry(3, 16, 16);
    var ballMaterial = new THREE.MeshPhongMaterial({color: 0x33aaff});
    var ball = new THREE.Mesh(ballGeometry, ballMaterial);
    return ball;
}

function spotLightObj(){
    var spot = new THREE.SpotLight(0xffffff);
    return spot;
}

function addDefaultCamera(scene, width, height){
    var camera = newCamera(width, height);    
    camera.position.set(1,1,20);
    camera.lookAt(scene.position);
    return camera;
}

function addDefaultLight(scene){    
    var spot = spotLightObj();
    spot.position.set(1, 10, 4);
    addObjectToScene(spot, scene);
}

function addBlueBall(scene){
    var hexcolor = "0x33aaff";
    bball = ballObj(hexcolor);
    addObjectToScene(bball, scene);
}

Я ожидаю увидеть некоторые синие сферы, например, когда я вызываю рендер изнутри addThreeRendererToElem, но я не вижу.Вместо этого холсты все пустые.Полотна находятся в правильных местах на веб-странице, проверка ThreeList в консоли показывает, что все объекты действительно есть.Нет сообщений об ошибках.

1 Ответ

0 голосов
/ 25 июня 2019

Неправильное условие завершения в цикле for внутри функции renderList.

Вы пропали без вести .length. Должно быть: 

function renderList() {
    var tlist = threeList;
    for ( var i = 0; i < tlist.length; i++ ) {
        var threeDict = tlist[i];
        threeDict["renderer"].render( threeDict["scene"], threeDict["camera"] );
    }
}
...