Rendering 2D objects with 3D co-ordinates

Questions
1

Hi,
I have input file Json with contains List of Cube locations with positions(x,y,z) and which displaying as expected in 3D.
I need to convert and display in 2D, is there any approach available in Three.js

e.g.

Input Data

“locations”: [
{
“Id”: “1”,
“Name”: “1”,
“Status”: null,
“Velzon”: null,
“LocTypeCat”: null,
“LoadLevel”: null,
“Trvseq”: null,
“Pos”: {
“x”: 20.447,
“y”: 7.946,
“z”: -134.056
},
“Size”: {
“x”: 2.438,
“y”: 1.524,
“z”: 1.016
},
“CurQvl”: null,
“MaxQvl”: null,
“Loccod”: null,
“Contains”: [],
“Level”: null
},
{
“Id”: “2”,
“Name”: “2”,
“Status”: null,
“Velzon”: null,
“LocTypeCat”: null,
“LoadLevel”: null,
“Trvseq”: null,
“Pos”: {
“x”: 20.447,
“y”: 7.946,
“z”: -135.274
},
“Size”: {
“x”: 2.438,
“y”: 1.524,
“z”: 1.016
},
“CurQvl”: null,
“MaxQvl”: null,
“Loccod”: null,
“Contains”: [],
“Level”: null
}

                        ]

Code :
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
scene.fog = new THREE.Fog(0xffffff, 0, 6000);

    //Camera
    //const camera = new THREE.OrthographicCamera(canvas.clientWidth / - 2, canvas.clientWidth / 2, canvas.clientHeight / 2, canvas.clientHeight / - 2, 1, 1000);
    const fov = 100;
    const aspect = 2;  // the canvas default
    const near = 1;
    const far = 20000;
    camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far);
    camera.position.set(0, 100, 0);
    camera.zoom = 1;

    //Renderer
    if (Detector.webgl) {
        renderer = new THREE.WebGLRenderer({
            antialias: true,
            alpha: true,
            preserveDrawingBuffer: true
        });
    } else {
        renderer = new THREE.CanvasRenderer();
    }
    //Canvas
    const canvas = document.getElementById('canvas');
    canvas.appendChild(renderer.domElement);

    controls = new OrbitControls(camera, renderer.domElement);
    // to disable rotation
    controls.enableRotate = false;

function drawLocations(locations) {

        var positionX;
        var positionY;
        var positionZ;
        var boxColor = "#ad8762";

        locations.forEach(function (location) {

            positionX = location?.pos?.x;
            positionY = location?.pos?.y;
            positionZ = location?.pos?.z;

            if (location != null && location != undefined) {
                var boxWidth = location?.size?.x;
                var boxDepth = location?.size?.y;
                var boxHeight = location?.size?.z;
                createCube(boxColor, boxWidth, boxDepth, boxHeight, positionX, positionY, positionZ, location);
            }
        })

        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        controls.update();
        window.addEventListener("resize", onWindowResize, false);
    }

function createCube(colorCube, width, depth, height, x, y, z, location) {

        const cubeSize = 1;
        const cubeGeo = new THREE.PlaneGeometry(cubeSize, cubeSize, cubeSize);
        var material = new THREE.MeshBasicMaterial({ color: colorCube, side: THREE.DoubleSide  });
        var cubeLocation = new THREE.Mesh(cubeGeo, material);
        cubeLocation.position.set(x, y, z)
        cubeLocation.rotation.x = THREE.Math.degToRad(-90);
        scene.add(cubeLocation);
        camera.position.y = 100;
    }
2

I think you need to clarify what you mean by “displaying in 2d” here? What is your expected output? Is it about the visual effect of the rendering (you want a flat-shaded effect, in example) or about the nature of the output?

3

3d Row

Consider i have row which contains many levels which is rendered as 3D based x y z co-ordinates.
I need to convert entire row(which contain many level) into 2D view mean i need to bind levels in adjacent position(Not one top of another)

4

I’m not sure I understand from your description, sorry. Do you want each one of your boxes to move and essentially become a line? Or you want all of them to have the same z-position and “flatten” out on a 2d plane? Maybe draw it out?