3

How do I set the object scale value(width and height) based on the pixel value using three.js?

object.scale.set(0.05,0.05,0.05);

I need to set 0.05 value pixel size

TylerH
  • 20,799
  • 66
  • 75
  • 101
Shanmuga kumar
  • 165
  • 1
  • 4
  • 12
  • It would be great if you could maybe write *why* you want to do that? There probably is a way to achieve that, it's maybe just not what you were thinking of. – Martin Schuhfuß Oct 01 '16 at 10:18
  • @Martin Schuhfuß Not the OP, but a world space UI created out of a 510px by 107px plane and it's sub elements for a world space UI are easier defined in pixels at a specific dpi, than in fractions of a meter. Especially when you're talking about vec3.fromValues(0.00125, 0.326547, 1) – Reahreic May 17 '21 at 19:15
  • yeah, for something like a UI that has to be done in webgl (as opposed to just html on top of the canvas), I would probably create an orthographic camera that uses the exact viewport-size for x/y dimensions. Then you can just use pixel-values in your geometries an meshes as if it was `position:absolute`. – Martin Schuhfuß May 20 '21 at 09:03

1 Answers1

0

Rephrasing your question, please correct me if I got you wrong:

You want to use pixel values instead of the relative values to set the size of your object as it appears on screen.

Now, the problem here is, that three.js (or even webgl) don't really use a concept of pixels internally.

How large (in pixels) an object appears on the screen depends on a lot of factors:

  • the css-size of the canvas element and the devicePixelRatio
  • the width and height of the canvas element
  • obviously the size of the object
  • the camera-position and other properties (aspect-ratio, field-of-view, relative orientation and position to object)

So pixels will simply lose any meaning when it comes to 3D-graphics. There's nothing keeping you from using any unit you want for sizes and positions, but that doesn't make it have any relation to pixels on screen.

You will also want to check out this answer: THREE.JS: Get object size with respect to camera and object position on screen

Community
  • 1
  • 1
Martin Schuhfuß
  • 6,814
  • 1
  • 36
  • 44