Question

我正在尝试在同一html页面上显示渲染器/场景/相机“组”的列表。尝试使用requestAnimationFrame在所有它们上实现渲染循环时遇到问题。但是，我无法通过遍历列表来成功渲染单个帧。

在我实例化它们的同一函数中，在每个“组”上调用renderer.render都可以正常工作。我对代码进行了重构，以允许在上述函数之外的每个渲染器上调用render，而我的蓝色球消失了；

我有一些要点...

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

我要添加一些三Js

$(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内部调用render时，但我没有。而是，画布都是空白的。画布在网页上的正确位置，检查控制台中的threeList显示所有对象确实存在。没有错误消息。

Answer 1

renderList函数中for循环的结束条件不正确。

您缺少.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"] );
    }
}

渲染ThreeJs渲染器列表时出现问题

1 个答案: