1

I am trying to learn WebGL and want to use the library three.js.

Here are the examples that are using three.js.

The example geometry/ text/shapes -which opens when you use the link above, shows the text three.js simple text. and you can download the source code for all the examples in the bottom right corner.

I did that and opened the same example (webgl_geometry_text_shapes.html) on my PC and it shows the same page, but without the Text. When I inspect the page it says

three.js:32090 Failed to load file:///C:/grubera/Web-Programmierung/three.js-master/examples/fonts/helvetiker_regular.typeface.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

U can see that in the image below, too!

Inspect Window

Does anyone know how can I fix this issue? I am completely new to HTML, JavaScript, and the whole web Programming stuff!

I hope someone here can help me.

Dacre Denny
  • 29,664
  • 5
  • 45
  • 65
lxg95
  • 553
  • 2
  • 8
  • 28
  • [this article might be helpful](https://threejsfundamentals.org/threejs/lessons/threejs-setup.html) – gman Sep 06 '18 at 10:40

2 Answers2

0

It looks like you're trying to run your webpage/threejs app directly from your hard drive. Typically, you'll want to run a server (usually a local server for development) to serve your app/webpage, and assets like images, fonts, scripts, etc, order to avoid these issues.

There are a number of ways to do this - I tend to use http-server when serving static content for simple apps that I'm developing locally.

You can set http-server up for your project by following these steps:

  1. Install node and npm
  2. Install http-server
  3. Run http-server from terminal/console, from the root directory of your project

Once you've done all of this, you'll be able to access your project in the browser (from http://localhost:8080 by default). You should find this fixes the error you're seeing -

hope this helps!

Dacre Denny
  • 29,664
  • 5
  • 45
  • 65
-2

Your using absolute path for what looks like a font file. Instead of overcoming cross origin limitations. Try to include the file using a relative url.

Sven van de Scheur
  • 1,809
  • 2
  • 15
  • 31
  • "Your using absolute path for what looks like a font file" — The source code which shows the path is not included in the question. It doesn't matter anyway, the problem is the use of a `file:` scheme URL, not if it is a relative or absolute path that resolves as one. – Quentin Sep 06 '18 at 08:39