# Rendering 2D objects with 3D co-ordinates

**URL:** <https://discourse.threejs.org/t/rendering-2d-objects-with-3d-co-ordinates/32035>\
**Category:** Questions\
**Created:** [November 24, 2021, 6:32am UTC](https://discourse.threejs.org/t/rendering-2d-objects-with-3d-co-ordinates/32035 "2021-11-24T06:32:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![karthick.raja](https://avatars.discourse-cdn.com/v4/letter/k/f9ae1b/32.png) [@karthick.raja](https://discourse.threejs.org/u/karthick.raja)\
**Post date:** [November 24, 2021, 6:32am UTC](https://discourse.threejs.org/t/rendering-2d-objects-with-3d-co-ordinates/32035/1 "2021-11-24T06:32:38Z")

</div>

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;
    }
```

---

<div class="post-metadata">

**Author:** ![jacopocolo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jacopocolo/32/10521_2.png) [@jacopocolo](https://discourse.threejs.org/u/jacopocolo)\
**Post date:** [November 24, 2021, 8:13am UTC](https://discourse.threejs.org/t/rendering-2d-objects-with-3d-co-ordinates/32035/2 "2021-11-24T08:13:03Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![karthick.raja](https://avatars.discourse-cdn.com/v4/letter/k/f9ae1b/32.png) [@karthick.raja](https://discourse.threejs.org/u/karthick.raja)\
**Post date:** [November 24, 2021, 8:41am UTC](https://discourse.threejs.org/t/rendering-2d-objects-with-3d-co-ordinates/32035/3 "2021-11-24T08:41:01Z")

</div>

![3d Row](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/4/64e2bc2a672eb87064ba14f00bfec31dba5bce87.png)

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)

---

<div class="post-metadata">

**Author:** ![jacopocolo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jacopocolo/32/10521_2.png) [@jacopocolo](https://discourse.threejs.org/u/jacopocolo)\
**Post date:** [November 24, 2021, 9:14am UTC](https://discourse.threejs.org/t/rendering-2d-objects-with-3d-co-ordinates/32035/4 "2021-11-24T09:14:22Z")

</div>

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?