three.js如何渲染3D楼层一层一层叠加出现？

Question

var container, controls, raycaster, mouse;
var camera, scene, renderer, raycaster, INTERSECTED,ball;
var containerjf, controlsjf, raycasterjf, mousejf;
var camerajf, scenejf, rendererjf, raycasterjf, INTERSECTEDjf;
var cengs=[];
var spheres = [];
var streets=[];
var wxtxs=[];
var motors=[]; 
var allData=parent.window.allData;

var moonVideo="rtmp://rtmp.open.ys7.com/openlive/9dc206f434e64ee1b75aabd07a86bbe9.hd"
init();
animate();
initjf();
animatejf();
$(".contain_video .closeVideo").click(function(){
    if($("#inside").length>0){
        $("#inside").remove();
    }
    $(".contain_video").hide();
})
$(".contain_list li").click(function(){
    $(".contain_list li").removeClass("active");
    $(this).addClass("active");
    $(".floor_contain>div").removeClass("active");
    if($(this).attr("list")=="floor"){
        $(".switch_list li").removeClass("active");
        $(".contain_cabinet").hide();
        $(".switch_list").hide();
        $(".contain_plane").hide();
        $("#contain_switch").hide();
        $("#contain_three").show();
        $(".switch_list").removeClass("display");
        $(".floor_list1").removeClass("active");
        $(".floor_list1").removeClass("activee");
        $(".floor_contain>div").removeClass("active");
        $(".cabinets>div").removeClass("active");
        $(".cabinets").removeClass("display");
        $(".switch").removeClass("active").removeClass("activee");
        $(".switch_list").removeClass("display");
        $(".floor_contain").removeClass("display");
        $(".floor_contain>div").removeClass("active").removeClass("activee");
        $(".floor_header").removeClass("active");
        camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100000);
        camera.position.z = 11;
        camera.position.x = 5;
        camera.position.y = 5;
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        controls = new THREE.OrbitControls( camera, renderer.domElement );
    }
})
function conitclick(event){
    event.stopPropagation();
    $(".contain_plane").hide();
    $(".contain_cabinet").hide();
    $("#contain_three").hide();
    $("#contain_switch").show();
    $(".switch").addClass("activee");
    $(".cabinets li").removeClass("active");
    $(".switch_list").addClass("display");
}
$(".floor_header").click(function(){
    $(".floor_header").toggleClass("active");
    $(".floor_contain").toggleClass("display");
    $(".switch_list li").removeClass("active");
    $(".switch_list li").removeClass("activee");
    $(".switch_list").hide();
    $(".switch_list").removeClass("display");
    $(".floor_list1").removeClass("active");
    $(".floor_list1").removeClass("activee");
    $(".floor_contain>div").removeClass("active");
})
function cabinet(j){
    $(".cabinets li").removeClass("active");
    $(".cabinet"+j+"").addClass("active");
    $(".contain_plane").hide();
    $("#contain_switch").hide();
    $("#contain_three").hide();
    $(".contain_cabinet").show();
    if(parseInt(j)>12){
        $(".cabinet").css("background-image","url(img/B"+(parseInt(j)-12)+".png)")
    }
    else{
        $(".cabinet").css("background-image","url(img/A"+(parseInt(j)+1)+".png)")
    }
    $(".jgs").html(jixiangs[parseInt(j)]);
}
$(".switch_list li").click(function(){
    $(this).toggleClass("active");
    $(this).addClass("activee");
    $(".cabinets").toggleClass("display");
    $(".contain_plane").hide();
    $("#contain_switch").show();
    $(".contain_cabinet").hide();
    $("#contain_three").hide();
    $(".cabinets li").removeClass("active");
})
function isInArray(arr,value){
    for(var i = 0; i < arr.length; i++){
        if(value === arr[i]){
            return true;
        }
    }
    return false;
}
function videoPlay(){
    $(".videoContain").remove();
    $(".contain_video").append('<div class="videoContain"><video id="inside" poster="" controls playsInline webkit-playsinline autoplay>'
            + '<source src="'+moonVideo+'" type=""/>'
    + '</video></div>'
    )
    var playerInside = new EZUIPlayer('inside');
    playerInside.on('error', function () {
    });
    playerInside.on('play', function () {
    });
    playerInside.on('pause', function () {
    });
    $(".contain_video").show();
}
function mousedown(e) {
    if($("#contain_three").css("display")=="block"){
    //将html坐标系转化为webgl坐标系，并确定鼠标点击位置
    mouse.x = e.clientX / renderer.domElement.clientWidth * 2 - 1;
    mouse.y = -((e.clientY) / renderer.domElement.clientHeight * 2) + 1;
    //以camera为z坐标，确定所点击物体的3D空间位置
    raycaster.setFromCamera(mouse, camera);

    //确定所点击位置上的物体数量
    var intersects = raycaster.intersectObjects(spheres);
    var streetserts=raycaster.intersectObjects(streets);
    var wxtxSects=raycaster.intersectObjects(wxtxs);
    //选中后进行的操作
    if(wxtxSects.length){
        videoPlay();
    }
    if (intersects.length&&wxtxSects.length<=0) {
        $(".contain_jhj").html("");
        $(".switch").removeClass("active");
        if($(".weixingPoint").length>0){
            $(".weixingPoint").remove();
        }
        if(intersects[0].object.name.split("sphere")[1]=="1"){
            $(".contain_jhj").append('<div class="contain_motor" onclick="conitclick(event)"></div>');
            $(".contain_jhj").css("background-image","url(./img/F2.png)");
            $(".floor_list2").toggleClass("activee");
            $(".switch_list").toggleClass("display");
        }
        else if((parseInt(intersects[0].object.name.split("sphere")[1])>=5&&parseInt(intersects[0].object.name.split("sphere")[1])<12)||(parseInt(intersects[0].object.name.split("sphere")[1])>15&&parseInt(intersects[0].object.name.split("sphere")[1])<=17)){
            $(".contain_jhj").css("background-image","url(./img/F6-18.png)");
            $(".floor_list2").removeClass("activee");
            $(".switch_list").removeClass("display");
            $(".cabinets").removeClass("display");
        }
        else{
            $(".contain_jhj").css("background-image","url(./img/F"+(parseInt(intersects[0].object.name.split("sphere")[1])+1)+".png)");
            $(".floor_list2").removeClass("activee");
            $(".switch_list").removeClass("display");
            $(".cabinets").removeClass("display");
        }
        if(intersects[0].object.name.split("sphere")[1]=="22"){
            $(".contain_jhj").append("<div class='weixingPoint'></div>");
            $(".weixingPoint").click(function(){
                $(".contain_video").append('<div><video id="inside" poster="" controls playsInline webkit-playsinline autoplay>'
                        + '<source src="'+moonVideo+'" type=""/>'
                + '</video></div>'
                )
                var playerInside = new EZUIPlayer('inside');
                playerInside.on('error', function () {
                });
                playerInside.on('play', function () {
                });
                playerInside.on('pause', function () {
                });
                $(".contain_video").show();
            })
    }
        $(".contain_titlel").html("北海分局"+(parseInt(intersects[0].object.name.split("sphere")[1]) + 1)+"楼结构图");
        $(".floor_header").addClass("active");
        $(".floor_contain").addClass("display");
        $(".floor_list"+intersects[0].object.name.split("sphere")[1]+"").addClass("active");
        if(intersects[0].object.name.split("sphere")[1]==1){
            $(".switch_list").addClass("display");
        }
        $(".floor_contain>div").removeClass("active");
        $(".floor_list"+parseInt(intersects[0].object.name.split("sphere")[1])+"").addClass("active");
        $("#contain_switch").hide();
        $(".contain_cabinet").hide();
        $("#contain_three").hide();
        $(".contain_plane").show();
        $(".cabinets li").removeClass("active");
    }
    if(streetserts.length&&intersects.length<=0&&wxtxSects.length<=0){
        $(".contain_jhj").html("");
        $(".switch").removeClass("active");
        if(streetserts[0].object.parent.name.split("street")[1]=="1"){
            $(".contain_jhj").append('<div class="contain_motor" onclick="conitclick(event)"></div>');
            $(".contain_jhj").css("background-image","url(./img/F2.png)");
            $(".floor_list2").toggleClass("activee");
            $(".switch_list").toggleClass("display");
        }
        else if((parseInt(streetserts[0].object.parent.name.split("street")[1])>=5&&parseInt(streetserts[0].object.parent.name.split("street")[1])<12)||(parseInt(streetserts[0].object.parent.name.split("street")[1])>15&&parseInt(streetserts[0].object.parent.name.split("street")[1])<=17)){
            $(".contain_jhj").css("background-image","url(./img/F6-18.png)");
            $(".floor_list2").removeClass("activee");
            $(".switch_list").removeClass("display");
            $(".cabinets").removeClass("display");
        }
        else{
            $(".contain_jhj").css("background-image","url(./img/F"+(parseInt(streetserts[0].object.parent.name.split("street")[1])+1)+".png)");
            $(".floor_list2").removeClass("activee");
            $(".switch_list").removeClass("display");
            $(".cabinets").removeClass("display");
        }
        $(".contain_titlel").html("北海分局"+(parseInt(streetserts[0].object.parent.name.split("street")[1]) + 1)+"楼结构图");
        $(".floor_header").addClass("active");
        $(".floor_contain").addClass("display");
        $(".floor_list"+streetserts[0].object.parent.name.split("street")[1]+"").addClass("active");
        if(streetserts[0].object.parent.name.split("street")[1]==1){
            $(".switch_list").addClass("display");
        }
        $(".floor_contain>div").removeClass("active");
        $(".floor_list"+parseInt(streetserts[0].object.parent.name.split("street")[1])+"").addClass("active");
        $("#contain_switch").hide();
        $(".contain_cabinet").hide();
        $("#contain_three").hide();
        $(".contain_plane").show();
        $(".cabinets li").removeClass("active");
    }
    }
}
function mousedownjf(e) { 
    if($("#contain_switch").css("display")=="block"){
    //将html坐标系转化为webgl坐标系，并确定鼠标点击位置
    mousejf.x = e.clientX / rendererjf.domElement.clientWidth * 2 - 1;
    mousejf.y = -((e.clientY) / rendererjf.domElement.clientHeight * 2) + 1;
    //以camera为z坐标，确定所点击物体的3D空间位置
    raycasterjf.setFromCamera(mousejf, camerajf);

    //确定所点击位置上的物体数量
    var intersects = raycasterjf.intersectObjects(motors);
    //选中后进行的操作
    if (intersects.length) {
        
        //alert("这是第"+(parseInt(intersects[0].object.name.split("motor")[1])+1)+"个");
        $("#contain_switch").hide();
        $("#contain_three").hide();
        $(".contain_plane").hide();
        $(".contain_cabinet").show();
        $(".floor_header").addClass("active");
        $(".floor_contain").addClass("display");
        $(".floor_list2").addClass("active").addClass("activee");
        $(".switch_list").addClass("display");
        $(".switch").addClass("active");
        $(".switch").addClass("activee");
        $(".cabinets").addClass("display");
        $(".cabinets li").removeClass("active");
        $(".cabinet"+parseInt(intersects[0].object.name.split("motor")[1])+"").addClass("active");
        if(parseInt(intersects[0].object.name.split("motor")[1])>12){
            $(".cabinet").css("background-image","url(img/B"+(parseInt(intersects[0].object.name.split("motor")[1])-12)+".png)")
        }
        else{
            $(".cabinet").css("background-image","url(img/A"+(parseInt(intersects[0].object.name.split("motor")[1])+1)+".png)")
        }
        $(".jgs").html(jixiangs[parseInt(intersects[0].object.name.split("motor")[1])]);
    }
    }
}
function floorList(i){
    $(".floor_contain>div").removeClass("active");
    $(".floor_list"+i+"").addClass("active");
    $(".switch_list li").removeClass("active");
    $(".switch_list li").removeClass("activee");
    $(".cabinets").removeClass("display");
    $(".switch_list").hide();
    $(".contain_jhj").html("");
    $(".switch").removeClass("active");
    if($(".weixingPoint").length>0){
        $(".weixingPoint").remove();
    }
    if(i=="1"){
        $(".contain_jhj").append('<div class="contain_motor" onclick="conitclick(event)"></div>');
        $(".contain_jhj").css("background-image","url(./img/F2.png)");
        $(".floor_list1").toggleClass("activee");
        $(".switch_list").toggleClass("display");
    }
    else if((i>=5&&i<12)||(i>15&&i<=17)){
        $(".contain_jhj").css("background-image","url(./img/F6-18.png)");
        $(".floor_list1").removeClass("activee");
        $(".switch_list").removeClass("display");
        $(".cabinets").removeClass("display");
    }
    else{
        $(".contain_jhj").css("background-image","url(./img/F"+(i+1)+".png)");
        $(".floor_list1").removeClass("activee");
        $(".switch_list").removeClass("display");
        $(".cabinets").removeClass("display");
    }
    if(i==22){
        $(".contain_jhj").append("<div class='weixingPoint'></div>");
            $(".weixingPoint").click(function(){
                videoPlay();
            })
    }
    $(".contain_titlel").html("北海分局"+(i+1)+"楼结构图")
    $("#contain_switch").hide();
    $(".contain_cabinet").hide();
    $("#contain_three").hide();
    $(".contain_plane").show();
    $(".cabinets li").removeClass("active");
}
//加载楼
function init() {
    raycaster = new THREE.Raycaster();
    mouse = new THREE.Vector2();
    width = document.getElementById('contain_three').clientWidth; //获取画布的宽
    height = document.getElementById("contain_three").clientHeight; //获取画布的高
    camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100000);
    camera.position.z = 11;
    camera.position.x = 5;
    camera.position.y = 5;
//    controls = new THREE.TrackballControls(camera);
//    /*设置距离,实现不能缩放*/
//     controls.minDistance = 100;  
// controls.maxDistance = 100;
//    //旋转速度
//    controls.rotateSpeed = 1.0;
//    //变焦速度
//    controls.zoomSpeed = 1.2;
//    //平移速度
//    controls.panSpeed = 0.8;
//    //是否不变焦
//    controls.noZoom = false;
//    //是否不平移
//    controls.noPan = true;
//    //可能是惯性 true没有惯性
//    controls.staticMoving = false;
//    //动态阻尼系数 就是灵敏度
//    controls.dynamicDampingFactor = 0.3;
    scene = new THREE.Scene();
    //scene.fog = new THREE.Fog(0xffffff, 0.015, 100);
    var directionalLight = new THREE.DirectionalLight(0xffffff); 
    directionalLight.position.set(50, 30, 50);
    directionalLight.castShadow = true;
    
    scene.add(directionalLight);
    var directionalLight2 = new THREE.DirectionalLight(0xffffff);
    directionalLight2.position.set(50, -30, -50);
    directionalLight2.castShadow = true;
    scene.add(directionalLight2);
    var directionalLight3 = new THREE.DirectionalLight(0xffffff);
    directionalLight3.position.set(-50, -30, -50);
    directionalLight3.castShadow = true;
    scene.add(directionalLight3);
    var directionalLight4 = new THREE.DirectionalLight(0xffffff);
    directionalLight4.position.set(-50, 30, -50);
    directionalLight4.castShadow = true;
    scene.add(directionalLight4);
    var loader = new THREE.TextureLoader();

    var mtlLoader = new THREE.MTLLoader();
    var manager = new THREE.LoadingManager();

    //模型需要纹理Texture
    var texture = new THREE.Texture();
    var loader = new THREE.ImageLoader(manager);
    var onProgress = function(xhr) {
//        if (xhr.lengthComputable) {
//            var percentComplete = xhr.loaded / xhr.total * 100;
//            console.log(Math.round(percentComplete, 2) + '% downloaded');
//        }
    };
     
    var onError = function(xhr) {
    };
    THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
    for(var i=0;i<23;i++){
        (function(i){
            if([5,6,7,8,9,10,11,12,17,18].indexOf((i+1))>-1){
                var mtlname='./model/street/center.mtl'
                var objname='./model/street/center.obj'
            }
            else{
                var mtlname='./model/street/'+(i+1)+'.mtl'
                var objname='./model/street/'+(i+1)+'.obj'
            }
            mtlLoader.load(mtlname, function(materials) {
                materials.preload();
                var objLoader = new THREE.OBJLoader();
                objLoader.setMaterials(materials);
                objLoader.load(objname, function(object) {
                    if(i>3){
                        object.position.x=1.2;
                        object.position.z=0.4;
                    }
                    else{
                        object.position.x=2;
                        object.position.z=0;
                    }
                    object.rotation.z=Math.PI;
                    object.position.y = -3.12+(i*0.3);        
                    object.scale.set(0.02, 0.02,0.02);
                    object.rotation.x=-0.5*Math.PI;
                    object.name="street"+i+"";
                    scene.add(object);
                    streets=streets.concat(object.children);
                },onProgress,onError);
            });
        })(i)
    }
    var mtlname='./model/street/WXTX.mtl'
    var objname='./model/street/WXTX.obj'
    mtlLoader.load(mtlname, function(materials) {
        materials.preload();
        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.load(objname, function(object) {
            object.position.x=0.25;
            object.position.z=1.0;
            
            object.rotation.z=Math.PI;
            object.position.y = 3.5;        
            object.scale.set(0.02, 0.02,0.02);
            object.rotation.x=-0.5*Math.PI;
            object.name="wxtx";
            scene.add(object);
            wxtxs=wxtxs.concat(object.children);
        },onProgress,onError);
    });
    for (var i = 0; i < 23; i++) {
        //生成多少楼层
        $(".floor_contain").append("<div class='floor_list" + i + "' onclick='floorList("+i+")'>" + (i + 1) + "楼</div>");
        if(i==1){
            $(".floor_contain").append("<ul class='switch_list'></ul>");

                $(".switch_list").append("<li class='switch'>机房</li>");
                $(".floor_contain").append("<ul class='cabinets'></ul>")
                for(var j=0;j<26;j++){
                    if(j<13){
                    $(".cabinets").append("<li class='cabinet"+j+"' onclick='cabinet("+j+")'>A"+(j+1)+"</li>");}else{
                        $(".cabinets").append("<li class='cabinet"+j+"' onclick='cabinet("+j+")'>B"+(j-12)+"</li>");
                    }
                }
        }
    }
    for(var j=0;j<allData.floors.length;j++){
        if(allData.floors[j].status=="1"){
            var imagew='./img/ic_jhj_green.png';
        }
        else{
            var imagew='./img/ic_jhj_red.png';
        }
        var ceng=parseInt(allData.floors[j].num);
        cengs.push(ceng-1);
        //长方形
        sphere = new THREE.Mesh(
            new THREE.PlaneGeometry(0.16, 0.16, 0.16), //(半径，细分数，细分数)               //width,height,depth
            new THREE.MeshLambertMaterial({
                map:THREE.ImageUtils.loadTexture(imagew)
            }) //材质设定
        );
        sphere.position.z = 1.9;
        sphere.position.x = 0.7;
        sphere.position.y = -3.1 + (ceng-1) / 3.35;
        sphere.name = "sphere" + (ceng-1) + "";
        scene.add(sphere);
        spheres.push(sphere);
    }
    for(var i=0;i<23;i++){
        if(isInArray(cengs,i)){}
        else{
            var imagew='./img/ic_jhj_gray.png';
        
        sphere = new THREE.Mesh(
                new THREE.PlaneGeometry(0.16, 0.16, 0.16), //(半径，细分数，细分数)               //width,height,depth
                new THREE.MeshLambertMaterial({
                    map:THREE.ImageUtils.loadTexture(imagew)
                }) //材质设定
            );
            sphere.position.z = 1.9;
            sphere.position.x = 0.7;
            sphere.position.y = -3.1 + i / 3.35;
            sphere.name = "sphere" + i + "";
            scene.add(sphere);
            spheres.push(sphere);
        }
    }
    var materialLine = new THREE.LineBasicMaterial({
        color:0xffffff
    });
    // 空几何体，里面没有点的信息
    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3(-1.2,3.5,1.8));
    geometry.vertices.push(new THREE.Vector3(-1.2,-2.2,1.8));
    //线
    var line=new THREE.Line(geometry,materialLine);

    // 空几何体，里面没有点的信息
    var geometry2 = new THREE.Geometry();
    geometry2.vertices.push(new THREE.Vector3(1.2,3.5,1.8));
    geometry2.vertices.push(new THREE.Vector3(1.2,-2.2,1.8));
    //线
    var line2=new THREE.Line(geometry2,materialLine);

    // 空几何体，里面没有点的信息
    var geometry3 = new THREE.Geometry();
    geometry3.vertices.push(new THREE.Vector3(1.2,3.5,0.4));
    geometry3.vertices.push(new THREE.Vector3(1.2,-2.2,0.4));
    //线
    var line3=new THREE.Line(geometry3,materialLine);

    // 空几何体，里面没有点的信息
    var geometry4 = new THREE.Geometry();
    geometry4.vertices.push(new THREE.Vector3(-1.2,3.5,0.4));
    geometry4.vertices.push(new THREE.Vector3(-1.2,-2.2,0.4));
    //线
    var line4=new THREE.Line(geometry4,materialLine);

    // 空几何体，里面没有点的信息
    var geometry5 = new THREE.Geometry();
    geometry5.vertices.push(new THREE.Vector3(-2,-2.2,2.0));
    geometry5.vertices.push(new THREE.Vector3(-2,-3.1,2.0));
    //线
    var line5=new THREE.Line(geometry5,materialLine);

    // 空几何体，里面没有点的信息
    var geometry6 = new THREE.Geometry();
    geometry6.vertices.push(new THREE.Vector3(2,-2.2,2.0));
    geometry6.vertices.push(new THREE.Vector3(2,-3.1,2.0));
    //线
    var line6=new THREE.Line(geometry6,materialLine);

    // 空几何体，里面没有点的信息
    var geometry7 = new THREE.Geometry();
    geometry7.vertices.push(new THREE.Vector3(-2,-2.2,0));
    geometry7.vertices.push(new THREE.Vector3(-2,-3.1,0));
    //线
    var line7=new THREE.Line(geometry7,materialLine);

    // 空几何体，里面没有点的信息
    var geometry8 = new THREE.Geometry();
    geometry8.vertices.push(new THREE.Vector3(2,-2.2,0));
    geometry8.vertices.push(new THREE.Vector3(2,-3.1,0));
    //线
    var line8=new THREE.Line(geometry8,materialLine);
    // 加入到场景中
    scene.add(line);
    scene.add(line2);
    scene.add(line3);
    scene.add(line4);
    scene.add(line5);
    scene.add(line6);
    scene.add(line7);
    scene.add(line8);
    renderer = new THREE.WebGLRenderer({
        alpha: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);
    renderer.setClearColor(0xffffff, 0);
        controls = new THREE.OrbitControls( camera, renderer.domElement );
        // controls.minPolarAngle = 0.5*Math.PI; // radians
      // controls.maxPolarAngle = 0.5*Math.PI; // radians
    document.getElementById("contain_three").appendChild(renderer.domElement);

}

//加载机房
function initjf(){
    raycasterjf = new THREE.Raycaster();
    mousejf = new THREE.Vector2();
    widthjf = document.getElementById('contain_switch').clientWidth; //获取画布的宽
    heightjf = document.getElementById("contain_switch").clientHeight; //获取画布的高
    camerajf = new THREE.PerspectiveCamera(7, width / height, 0.1, 100000);
    camerajf.position.z = 50;
    camerajf.position.y= 70;
    camerajf.position.x=30;
    //controls = new THREE.TrackballControls(camera);
    ///*设置距离,实现不能缩放*/
    // controls.minDistance = 100;  
    //controls.maxDistance = 100;
    ////旋转速度
    //controls.rotateSpeed = 1.0;
    ////变焦速度
    //controls.zoomSpeed = 1.2;
    ////平移速度
    //controls.panSpeed = 0.8;
    ////是否不变焦
    //controls.noZoom = false;
    ////是否不平移
    //controls.noPan = true;
    ////可能是惯性 true没有惯性
    //controls.staticMoving = false;
    ////动态阻尼系数 就是灵敏度
    //controls.dynamicDampingFactor = 0.3;
    scenejf = new THREE.Scene();

    //scene.fog = new THREE.Fog(0xffffff, 0.015, 100);
    var directionalLight = new THREE.AmbientLight(0xE7EAEC);
    directionalLight.position.set(0, 0, 0);
    directionalLight.castShadow = true;
    scenejf.add(directionalLight);
    var loader = new THREE.TextureLoader();

    var mtlLoader = new THREE.MTLLoader();
    var manager = new THREE.LoadingManager();

    //模型需要纹理Texture
    var texture = new THREE.Texture();
    var loader = new THREE.ImageLoader(manager);
    var onProgress = function(xhr) {
        // if (xhr.lengthComputable) {
        //     var percentComplete = xhr.loaded / xhr.total * 100;
        //     console.log(Math.round(percentComplete, 2) + '% downloaded');
        // }
    };
     
    var onError = function(xhr) {};
    THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
    mtlLoader.load('./model/jfk.mtl', function(materials) {
        materials.preload();
        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);

        objLoader.load('./model/jfk.obj', function(object) {
            object.position.y = 0;
            object.position.x = -15;
            object.position.z = 7.5;
            object.scale.set(0.00005, 0.00005, 0.00005);
            scenejf.add(object);

        },onProgress,onError);
    });
    mtlLoader.load('./model/jz.mtl', function(materials) {

        materials.preload();
        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.load('./model/jz.obj', function(object) {

            object.position.y = 0.5;
            object.position.x = -4.8;
            object.position.z = -1.0;
            object.rotation.y = Math.PI;
            object.scale.set(0.00005, 0.00005, 0.00005);
            object.children[0].geometry.computeBoundingBox();            
            object.children[0].geometry.center();
            object.traverse(function(child) {

                if (child instanceof THREE.Mesh) {

                    
                }

            });
                object.children[0].name="motor0";
            motors.push(object.children[0]);
            scenejf.add(object);

        
            //上行
            for (var i = 0; i < 12; i++) {
                var box = object.clone();
                box.position.x = -4.8+ 0.5 * (i + 1);
                box.children[0].name="motor"+(i+1)+"";
                //var mesh=new THREE.Mesh(box,materials);
                scenejf.add(box);
            motors.push(box.children[0]);
            }
            //下行
            for (var i = 0; i < 13; i++) {
                var box = object.clone();
                box.position.x = -5.2+0.5 * (i + 1);
                box.position.z = 0.5;
                box.rotation.y = Math.PI;
                box.children[0].name="motor"+(i+13)+"";
                //var mesh=new THREE.Mesh(box,materials);
                scenejf.add(box);
                motors.push(box.children[0]);
            }
        }, onProgress, onError);

    });
    rendererjf = new THREE.WebGLRenderer({
        alpha: true
    });
    rendererjf.setPixelRatio(window.devicePixelRatio);
    rendererjf.setSize(width, height);
    rendererjf.setClearColor(0xffffff, 0);
    document.getElementById("contain_switch").appendChild(rendererjf.domElement);
    var controlsjf = new THREE.OrbitControls( camerajf, rendererjf.domElement );
    controlsjf.maxPolarAngle = Math.PI * 0.5;
}
function animate() {
    controls.update();
    renderer.render(scene, camera);
    document.addEventListener('dblclick', mousedown);
    requestAnimationFrame(animate);

}
function animatejf() {

    //controls.update();

    rendererjf.render(scenejf, camerajf);
    document.addEventListener('dblclick', mousedownjf);
    requestAnimationFrame(animatejf);

}

接手别人的代码 ，JQ写的 一共23层楼 要求一层一层叠加出现 请问要如何实现

Answer 1

写个递归串行加载吧，加载一个add一个