【问题标题】:How to set the scale value in pixel size?如何以像素大小设置比例值?
【发布时间】:2021-09-23 22:03:24
【问题描述】:

如何使用three.js根据像素值设置对象缩放值(宽高)?

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

我需要设置 0.05 值像素大小

【问题讨论】:

  • 如果你能写出为什么你想这样做就太好了?可能有一种方法可以实现这一点,但可能不是你想的那样。
  • @Martin Schuhfuß 不是 OP,而是由 510 像素 x 107 像素平面创建的世界空间 UI,它是世界空间 UI 的子元素,在特定 dpi 下以像素为单位比在分数中更容易定义一米。特别是当你谈论 vec3.fromValues(0.00125, 0.326547, 1)
  • 是的,对于必须在 webgl 中完成的 UI(而不仅仅是画布顶部的 html)之类的东西,我可能会创建一个使用精确视口大小的正交相机x/y 尺寸。然后你可以在你的几何图形中使用像素值和网格,就好像它是position:absolute

标签: javascript three.js


【解决方案1】:

改写你的问题,如果我错了,请纠正我:

您想使用像素值而不是相对值来设置对象在屏幕上显示的大小。

现在,这里的问题是,three.js(甚至 webgl)在内部并没有真正使用像素的概念。

对象在屏幕上显示的大小(以像素为单位)取决于很多因素:

  • 画布元素的 css-size 和 devicePixelRatio
  • 画布元素的宽度和高度
  • 显然是对象的大小
  • 相机位置和其他属性(纵横比、视野、相对方向和对象位置)

因此,当涉及到 3D 图形时,像素将失去任何意义。没有什么可以阻止您使用任何您想要的尺寸和位置单位,但这并不意味着它与屏幕上的像素有任何关系。

你还想看看这个答案:THREE.JS: Get object size with respect to camera and object position on screen

【讨论】:

    猜你喜欢
    • 2012-01-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-05-12
    • 1970-01-01
    • 2019-04-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多