<html> distanceFactor 400 #545
-
|
I have a question concerning the html component: I was wondering why the distance factor is divided by 400 in the transform mode? (from Html.tsx) |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
@giusepperaso Where did you come up with this magic number? I believe this came from one of your commits? |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, 400 is totally an arbitrary magic number Let' assume those values: distanceFactor=10 (the default) In this case a 3D-transformed div placed at 0,0,0 will have approximately the same size of a normal html div, like in this example https://codesandbox.io/s/drei-html-magic-number-6mzt6m Maybe the value 196 would have been a better magic number because it would have the same effect, but at a cameraZ of 5 which is the default instead of the arbitrary 2.45 If we completely removed the magic number instead, we would need a fov of 205 or a cameraZ of 98 to achieve the same effect, or the div would appear very big |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for clarifying this! I think it would be really nice to have short example of how to do the proper sizing of a Html content inside a 3D scene. I think the current examples in Drei docs gloss over this important detail about HTML vs. 3D space and how to fit something. |
Beta Was this translation helpful? Give feedback.
Yeah, 400 is totally an arbitrary magic number
Let' assume those values:
distanceFactor=10 (the default)
FOV=75 (the default)
cameraZ=2.45 (arbitrary)
In this case a 3D-transformed div placed at 0,0,0 will have approximately the same size of a normal html div, like in this example https://codesandbox.io/s/drei-html-magic-number-6mzt6m
Maybe the value 196 would have been a better magic number because it would have the same effect, but at a cameraZ of 5 which is the default instead of the arbitrary 2.45
If we completely removed the magic number instead, we would need a fov of 205 or a cameraZ of 98 to achieve the same effect, or the div would appear very big