A-Frame 在资产中加载自定义字体不起作用

Question

我正在使用这个构建的框架： https://rawgit.com/aframevr/aframe/c9817f2/dist/aframe-master.min.js

我已经在框架中设置了一个场景并将其加载到我的网络服务器上。 通过“a-asset-item”我可以加载和显示 .objs .mp3 和 images(.png) 用#id就好了。

似乎唯一不起作用的是使用 hiero 制作的自定义字体。 我将字体转换为 .fnt 和 .png(fontimage) 并将其加载到代码中：

<a-assets>

        <a-asset-item id="akzidenz" src="assets/akzidenz.fnt"></a-asset-item>
        <a-asset-item id="akzidenzimage" src="assets/akzidenz.png"></a-asset-item>
        
<a-assets>

然后我在这样的元素中调用字体。

<a-text id="title" position="0 2 -2" side="double"
        font="#akzidenz"
        fontimage="#akzidenzimage"
        value="This is a Title">
      </a-text>

当我在我的网站上打开页面时，javascript 控制台中会显示此错误：

components:text:error Error loading font  #akzidenz

3browser.js:111 components:text:error Error: error parsing font malformed file -- no <pages> element
    at Object.callback (https://rawgit.com/aframevr/aframe/c9817f2/dist/aframe-master.min.js:58:1408)
    at a (https://rawgit.com/aframevr/aframe/c9817f2/dist/aframe-master.min.js:183:1112)
    at o (https://rawgit.com/aframevr/aframe/c9817f2/dist/aframe-master.min.js:183:980)
    at XMLHttpRequest.t (https://rawgit.com/aframevr/aframe/c9817f2/dist/aframe-master.min.js:183:401) 
3(index):1 Uncaught (in promise) Error: error parsing font malformed file -- no <pages> element
    at Object.callback (browser.js:71)
    at a (index.js:62)
    at o (index.js:129)
    at XMLHttpRequest.t (index.js:68)

文本不显示。 资产中的所有其他类型的文件都有效。 在我做这个之前，我开始在故障中编写示例，然后我将 cdn-link 直接粘贴到其中。这成功了。

<a-text id="title" position="0 2 -2" side="double"
        font="https://cdn.glitch.com/1eed6da6-c9da-46d7-bb30-b441a645ff43%2Fakzidenz.fnt?1512042049508"
        fontimage="https://cdn.glitch.com/1eed6da6-c9da-46d7-bb30-b441a645ff43%2Fakzidenz.png?1512042052757"
        value="This is a Title">
      </a-text>

我还尝试嵌入直接链接，例如http://www.example.com/.../assets/akzidenz.fnt 然后我得到一个权限错误。

谁能帮我解决这个问题？ 提前致谢。

Answer 1

如果您还没有这样做，请为您的项目运行本地服务器。即使您一切正常，如果没有正在运行的服务器，它也将无法工作，因为资产可能无法正确提供。关注this instructions 启动您的开发服务器并查看您的项目。

我做了一些研究，似乎（我不是 100% 确定）目前您无法在 a-assets 中预加载字体。 A-Frame 期望从 XML 格式（或要解析的字符串）加载您的字体 - 通过向其提供您的资源的 ID，它似乎无法获得所需的数据。这是引发错误的行：

data = data.toString()
var xmlRoot = parseFromString(data)
var pageRoot = xmlRoot.getElementsByTagName('pages')[0]
if (!pageRoot)
  throw new Error('malformed file -- no <pages> element') 

如果你向它传递一个目录（记住本地服务器），它会正常工作，因为它会接收一个字符串，然后将其解析为 XML。

您当然可以预加载img，如here 所述。

我的最终工作代码：

<a-assets>
  <img id="akzidenzimg" src="/assets/akzidenz.png">
</a-assets>
<a-sky color="#CCC"></a-sky>
<a-text id="title" position="0 2 -2" side="double"
    font="/assets/akzidenz.fnt"
    fontimage="#akzidenzimg"
    value="This is a Title">
</a-text>

我的文件夹结构：

.
+-- index.html
+-- assets
|   +--akzidenz.fnt
|   +--akzidenz.png

Answer 2

所以这个问题的解决方法很简单。
当你在网络服务器上运行aframe时，直接像这样嵌入字体和图像：

<a-text id="title" position="0 2 -2" side="double"
    font="assets/akzidenz.fnt"
    fontimage="assets/akzidenz.png"
    value="This is a Title">
</a-text>

字体和 fontimage 似乎无法在资产系统中正常工作。

Answer 3

所以对我来说，预加载 <a-assets> 没有帮助，但我尝试和工作的是：

1. 我已经在使用 aws s3 运行节点服务，所以我在那里托管了我的 .json 和 .png 字体，并创建了一个 GET 调用，例如 /get-fonts/custom-msdf.json
2. 您的客户端 FE 只是这样调用字体

<a-text
 position="0 0 0"
 font="http://localhost:8080/get-font/fonts/custom-msdf.json"
 negate="false"
 value="this is a sample text"
 color="black"
></a-text>

如果您深入了解.json 文件，您会发现它已经通过这一行指向了.png 文件：

"pages": [
    "custom.png"
  ],

所以我们不需要在<a-text> 中调用font-image