# Screen aligned quad module

**URL:** <https://discourse.threejs.org/t/screen-aligned-quad-module/144>\
**Category:** Resources\
**Tags:** screen-space\
**Created:** [April 2, 2017, 8:27pm UTC](https://discourse.threejs.org/t/screen-aligned-quad-module/144 "2017-04-02T20:27:05Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [April 2, 2017, 8:27pm UTC](https://discourse.threejs.org/t/screen-aligned-quad-module/144/1 "2017-04-02T20:27:06Z")

</div>

I made a module to abstract the drawing of screen space quads. I tried to control it like a div, so the size can be set in pixels and percentages, and can be anchored from both top/left and bottom/right.

[https://www.npmjs.com/package/three-screen-quad](https://www.npmjs.com/package/three-screen-quad)

Live:  
[http://dusanbosnjak.com/test/webGL/three-screen-quad/](http://dusanbosnjak.com/test/webGL/three-screen-quad/)

Hope someone may find this useful, and would appreciate feedback. It works the way i wanted, but the code is a bit messy.

---

<div class="post-metadata">

**Author:** ![TheCodeCrafter](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thecodecrafter/32/50_2.png) [@TheCodeCrafter](https://discourse.threejs.org/u/TheCodeCrafter)\
**Post date:** [April 3, 2017, 2:36pm UTC](https://discourse.threejs.org/t/screen-aligned-quad-module/144/2 "2017-04-03T14:36:56Z")

</div>

This is pretty cool, keep on working on this!