修复了 A-Frame 中的文本位置

Question

我正在尝试在框架中添加固定文本。我可以像这样添加 a-text 标签：

<a-camera wasd-controls-enabled="true" position="0 1 0" look-controls>
  <a-text position="0 0 -1" value="Test" color="#fff"></a-text>
</a-camera>

但是这种方法不会让文字固定在屏幕的一侧，所以当我改变屏幕大小时文字会溢出。这可能吗？

Answer 1

将文本添加到场景而不是相机通常是最佳做法。这使用户可以选择向任一方向查看，以便他们可以看到所有内容。

https://aframe.io/docs/0.8.0/components/camera.html#fixing-entities-to-the-camera

如果您仍然决定将文本固定在相机上，简单的解决方案是确保文本距离足够远，以便可以舒适地看到所有文本在最小的屏幕尺寸（垂直 phone 方向等）。

一个更复杂的解决方案是在 window.resize 事件上更改 <a-text> 基元（或包含使用 text 组件的实体）的大小，并调整文本容器因此。这可以通过创建自定义组件来完成。

这是一个基本的例子：

AFRAME.registerComponent('resize-text', {

  init: function() {

    var self = this;

    window.addEventListener('resize', function(e) {

      var height = window.innerHeight;
      var width = window.innerWidth;

      // console.log('resized!', height, width);

      self.el.setAttribute('width', ( width / 100 ));

    });

  }

});

下面是该代码的演示： https://codepen.io/dansinni/pen/pVJmQg

调整 window 大小或拖动中心分隔线，您会看到文本大小发生变化。

希望对您有所帮助。

修复了 A-Frame 中的文本位置

Fixed text position in A-Frame

webvr

aframe