THREE.js:几何/文本/形状示例在我的本地计算机上不起作用

时间:2018-09-06 08:13:03

标签: javascript three.js

我正在尝试学习WebGL,并想使用库three.js

Here是使用three.js的示例。

示例 geometry / text / shapes -使用上面的链接时将打开,显示文本 three.js简单文本。,您可以下载源代码右下角的所有示例。

我这样做了,并在PC上打开了相同的示例(webgl_geometry_text_shapes.html),它显示了相同的页面,但没有文本。 当我检查页面时,显示

  

three.js:32090无法加载   文件:/// C:/grubera/Web-Programmierung/three.js-master/examples/fonts/helvetiker_regular.typeface.json:   跨源请求仅支持以下协议方案:http,   数据,chrome,chrome扩展名,https。

您也可以在下图中看到它!

Inspect Window

有人知道我该如何解决此问题?我是HTMLJavaScript和整个网络编程人员的新手!

我希望这里有人可以帮助我。

2 个答案:

答案 0 :(得分:0)

您似乎正在尝试直接从硬盘上运行网页/ threejs应用程序。通常,您将需要运行一台服务器(通常是用于开发的本地服务器)来服务您的应用程序/网页以及诸如图像,字体,脚本等资产,以避免这些问题。

有很多方法可以做到这一点-在为我在本地开发的简单应用程序提供静态内容时,我倾向于使用http-server

您可以按照以下步骤为项目设置http-server

  1. Install node and npm
  2. Install http-server
  3. 从终端/控制台在项目的根目录中运行http-server

完成所有这些操作后,就可以在浏览器中访问您的项目(默认为http://localhost:8080)。您应该找到此方法来修复所看到的错误-

希望这会有所帮助!

答案 1 :(得分:-2)

您使用看起来像字体文件的绝对路径。而不是克服跨源限制。尝试使用相对网址包含文件。