# Backward stacked rectangles with text

**URL:** <https://discourse.threejs.org/t/backward-stacked-rectangles-with-text/28784>\
**Category:** Questions\
**Tags:** text\
**Created:** [August 9, 2021, 9:57pm UTC](https://discourse.threejs.org/t/backward-stacked-rectangles-with-text/28784 "2021-08-09T21:57:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nervouselk](https://avatars.discourse-cdn.com/v4/letter/n/edb3f5/32.png) [@Nervouselk](https://discourse.threejs.org/u/Nervouselk)\
**Post date:** [August 9, 2021, 9:57pm UTC](https://discourse.threejs.org/t/backward-stacked-rectangles-with-text/28784/1 "2021-08-09T21:57:17Z")

</div>

![pic](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/9/492ab6f1a2b9062d8dba2b571004e9cc135bc030.png)  
May I upfront state I know nothing about threejs. However I know javascript and I’m looking to create a 3D interface for an already written application. My question is: can threejs produce something similar to the pic with the ability to step (mouse) through the rectangles (ie bring selected to the front)? The rectangles have to contain text but it only the nearest needs to be readable. Some links to similar examples would be appreciated.  
Many Thanks.

---

<div class="post-metadata">

**Author:** ![gorskidev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gorskidev/32/18197_2.png) [@gorskidev](https://discourse.threejs.org/u/gorskidev)\
**Post date:** [August 9, 2021, 10:17pm UTC](https://discourse.threejs.org/t/backward-stacked-rectangles-with-text/28784/2 "2021-08-09T22:17:13Z")

</div>

Hey @Nervouselk,

Three.js allows you to use [OrtographicCamera](https://threejs.org/docs/#api/en/cameras/OrthographicCamera) - in which perspective does not exist, thus allowing you to project 2D view.

You can either create a vertical plane, which will have a x angle of 90 degrees, or set the camera position on top of the scene and update the camera `lookAt` property to look at the (0, 0, 0) cords.

To style your HTML elements you will you have to use [CSS3DRenderer](https://threejs.org/docs/index.html?q=3drender#examples/en/renderers/CSS3DRenderer), here is a good example that you are exactly looking for: [css3drenderer example](https://threejs.org/examples/#css3d_sprites)  
Click on the button that is at the bottom right to inspect the code behind the solution.

Here is another good example: [discourse.threejs question](https://discourse.threejs.org/t/using-webglrenderer-and-css3drenderer-together-hardly-works/2213/6)

Problems I’d have face is the responsiveness of the elements.

---

<div class="post-metadata">

**Author:** ![Nervouselk](https://avatars.discourse-cdn.com/v4/letter/n/edb3f5/32.png) [@Nervouselk](https://discourse.threejs.org/u/Nervouselk)\
**Post date:** [August 10, 2021, 7:30am UTC](https://discourse.threejs.org/t/backward-stacked-rectangles-with-text/28784/3 "2021-08-10T07:30:09Z")

</div>

Gorskidev, Thank you, this information will be helpful.

Elk.