Pixel-specific positioning while using three.js as a static 2D canvas

Questions
1

I’d like to use three scene as a 2D canvas. My use case is to create a WebGL layer on the top of a map where I need pixel-specific control over where geometries appear. (Specifically, I need to render a large number of data points at geographic locations, and keep it snappy.)

I am new to three and cannot figure out how to set up the camera to be able to control the size and the position (e.g. the radius of a circle) in order to place it exactly where I’d place an absolutely positioned element in plain html. I hope this analogy works.

I will fix the camera at zoom 0, never change it or the angle etc. I may be using the wrong tool for drawing 2D shapes but I couldn’t find a better-supported WebGL library :person_shrugging:

2
  1. Why not render the entire thing in WebGL though? Technically speaking, images rendered by browsers don’t differ much from 2D / 3D canvas elements - canvas is just updating dynamically but still is just an image.
  1. Doing pixel-perfect calculations with three may be unnecessarily complicated. Consider taking a look at pixi.js (in three you position things in world space using world units, which you’d need to convert to pixels by dividing by canvas resolution etc. Pixi.js uses pixels instead of world units - but keep in mind pixi is a 2D / 2.5D focused library.)
  1. No need to do that. If your goal is to render stuff in 2D - and you decide to use three to do that - consider using OrthographicCamera instead of PerspectiveCamera.
2 Likes