首页 > 解决方案 > Three.js 等距房间 - 墙壁和地板

问题描述

我希望墙壁直接在地板后面,没有任何空间,而不是在里面的地板上。

目前,它对我显示正确,但我认为我编写它的方式不正确。

这是我生成房间(地板和墙壁)的功能,我希望它更短更好。

    function generateRoom(w, d) {
    var room = new THREE.Object3D();
    
    // Floor
    var material1 = new THREE.MeshPhongMaterial({
        color: 'rgb(255, 255, 255)',
    });
    
    var material2 = new THREE.MeshPhongMaterial({
        color: 'rgb(242, 242, 242)',
    });

    var material;

    for(let iX = 0; iX < w; iX++) {
        for(let iZ = 0; iZ < d; iZ++) {
            if((iX + iZ) % 2 === 0) {
                material = material1;
            } else {
                material = material2;
            }
            
            var box = generateBox(1, 0.1, 1, material);

            box.name = `box-${iX}-${iZ}`;

            box.position.set(iX, box.geometry.parameters.height / 2, iZ);

            room.add(box);
        }
    }

    // Walls
    for(let iX = 0; iX < w; iX++) {
        var wall = generateBox(1, 3, 0.1);

        wall.name = `wall-${iX}`;

        wall.position.set(iX, wall.geometry.parameters.height / 2, -0.45);

        room.add(wall);
    }
    
    for(let iZ = 0; iZ < d; iZ++) {
        var wall = generateBox(0.1, 3, 1);

        wall.name = `wall-${iZ}`;

        // Example here.. What I should use the instance of -0.45? I don't know why 0.45 shows me correct. 
        wall.position.set(-0.45, wall.geometry.parameters.height / 2, iZ);

        room.add(wall);
    }

    return room;
}

标签: javascriptthree.jsisometric

解决方案


推荐阅读