框架文本导致奇怪的外观
aframe text causing weird looks
A-Frame 版本:0.8.0
平台/设备:台式机
我在 a-box 元素中有一个 a-entity 文本,文本看起来很模糊。 a-box 有点半透明,似乎在毁容文字。
这些是框所在的行
<a-box id="box1" material="src: img/info.svg; transparent:true;" position="0 2 -1.8" rotation="0 0 0" depth="0" width="1" height="1" scale="0.001 0.001 0">
<a-entity id="info" width="1" position="0 0 0.6" text="value: This is the Mac desktop computer IXD has purchased to supply their students with adequate equipment so that they are capable of accomplishing projects even if they do not have their own Mac OS based system; color:#000;">
</a-entity>
<a-circle id="box1-close" radius="0.06" class="clickable" material="src: img/close.svg; transparent:true;" remove-yellow position="0.4 0.4 0.6" rotation="0 0 0" scale="1 1 0">
</a-circle>
</a-box>
我怀疑问题可能与抗锯齿有关,但我已经在我的 a 场景中手动打开了它。仔细一看可能跟边界有关?
对于盒子,也许可以尝试将 z 比例设置为略大于 0。
快速测试:
https://glitch.com/edit/#!/a-frame-text-box
<a-box id="box1" material="transparent:true;" position="0 2 -1.8" rotation="0 0 0" depth="0" width="1" height="1" scale="1 1 .1">
<a-entity id="info" width="1" position="0 0 .5" text="value: This is the Mac desktop computer IXD has purchased to supply their students with adequate equipment so that they are capable of accomplishing projects even if they do not have their own Mac OS based system; color:#000;">
</a-entity>
<a-circle id="box1-close" radius="0.06" class="clickable" material="src: img/close.svg; transparent:true;" remove-yellow position="0.4 0.4 0.6" rotation="0 0 0" scale="1 1 0">
</a-circle>
</a-box>
我明白你所说的可能存在的抗锯齿问题。我不知道为什么会发生这种情况,但我之前在尝试在黑色背景上呈现白色文本时遇到过类似的问题。在这种情况下,它似乎与将文本放入 a-box
元素有关。以下代码块将解决此问题:
<a-box id="box1" material="color:black; transparent:true; opacity: 1" position="0 2 -1.8" rotation="0 0 0" depth="10" width="1" height="1" scale="1 1 0.05">
<a-circle id="box1-close" radius="0.06" class="clickable" material="src: img/close.svg; transparent:true;" remove-yellow position="0.4 0.4 0.6" rotation="0 0 0" scale="1 1 0">
</a-circle>
</a-box>
<a-entity id="info" width="1" position="0 2 -1.55" text="value: This is the Mac desktop computer IXD has purchased to supply their students with adequate equipment so that they are capable of accomplishing projects even if they do not have their own Mac OS based system; color:white;">
</a-entity>
将文本放在 a-box
之外可以消除文本模糊。
A-Frame 版本:0.8.0
平台/设备:台式机
我在 a-box 元素中有一个 a-entity 文本,文本看起来很模糊。 a-box 有点半透明,似乎在毁容文字。
这些是框所在的行
<a-box id="box1" material="src: img/info.svg; transparent:true;" position="0 2 -1.8" rotation="0 0 0" depth="0" width="1" height="1" scale="0.001 0.001 0">
<a-entity id="info" width="1" position="0 0 0.6" text="value: This is the Mac desktop computer IXD has purchased to supply their students with adequate equipment so that they are capable of accomplishing projects even if they do not have their own Mac OS based system; color:#000;">
</a-entity>
<a-circle id="box1-close" radius="0.06" class="clickable" material="src: img/close.svg; transparent:true;" remove-yellow position="0.4 0.4 0.6" rotation="0 0 0" scale="1 1 0">
</a-circle>
</a-box>
我怀疑问题可能与抗锯齿有关,但我已经在我的 a 场景中手动打开了它。仔细一看可能跟边界有关?
对于盒子,也许可以尝试将 z 比例设置为略大于 0。
快速测试: https://glitch.com/edit/#!/a-frame-text-box
<a-box id="box1" material="transparent:true;" position="0 2 -1.8" rotation="0 0 0" depth="0" width="1" height="1" scale="1 1 .1">
<a-entity id="info" width="1" position="0 0 .5" text="value: This is the Mac desktop computer IXD has purchased to supply their students with adequate equipment so that they are capable of accomplishing projects even if they do not have their own Mac OS based system; color:#000;">
</a-entity>
<a-circle id="box1-close" radius="0.06" class="clickable" material="src: img/close.svg; transparent:true;" remove-yellow position="0.4 0.4 0.6" rotation="0 0 0" scale="1 1 0">
</a-circle>
</a-box>
我明白你所说的可能存在的抗锯齿问题。我不知道为什么会发生这种情况,但我之前在尝试在黑色背景上呈现白色文本时遇到过类似的问题。在这种情况下,它似乎与将文本放入 a-box
元素有关。以下代码块将解决此问题:
<a-box id="box1" material="color:black; transparent:true; opacity: 1" position="0 2 -1.8" rotation="0 0 0" depth="10" width="1" height="1" scale="1 1 0.05">
<a-circle id="box1-close" radius="0.06" class="clickable" material="src: img/close.svg; transparent:true;" remove-yellow position="0.4 0.4 0.6" rotation="0 0 0" scale="1 1 0">
</a-circle>
</a-box>
<a-entity id="info" width="1" position="0 2 -1.55" text="value: This is the Mac desktop computer IXD has purchased to supply their students with adequate equipment so that they are capable of accomplishing projects even if they do not have their own Mac OS based system; color:white;">
</a-entity>
将文本放在 a-box
之外可以消除文本模糊。