Question

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

我在aframe中设置了一个场景并将其加载到我的网络服务器上。通过“a-asset-item”我可以加载并显示.objs .mp3和图像（.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时，直接嵌入字体和图像就像这样：

＆＃13;

<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>

＆＃13;

字体和fontimage似乎无法正常使用资产系统。

Answer 3

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

我已经在使用 aws s3 运行节点服务，所以我在那里托管了我的 .json 和 .png 字体，并创建了一个 GET 调用，如 /get-fonts/custom-msdf.json
您的客户端 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"
  ],

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

A-Frame加载资产无效的自定义字体

3 个答案: