Having trouble running the THREE.js geometry, text, and shapes example on my personal computer

Currently, I am in the process of learning WebGL and I am looking to incorporate three.js into my work.

If you visit this site, you will find a variety of examples that showcase the capabilities of three.js.

One specific example titled geometry/ text/shapes can be accessed through the mentioned link above. This particular example demonstrates the creation of the text "three.js simple text." You can also download the source code for all the examples provided on the page from the bottom right corner.

After downloading the source code, I attempted to run the same example (webgl_geometry_text_shapes.html) on my PC but encountered an issue where the text was not displayed. Upon inspecting the page, I received the following error message:

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.

An image depicting this issue is also available for viewing here.

I am seeking assistance in resolving this particular problem. As someone who is brand new to HTML, JavaScript, and web programming as a whole, any guidance would be greatly appreciated!

I am hopeful that someone within this community can offer me some valuable advice and help navigate through this challenge. Thank you in advance.

javascriptthree.js

Answer №1

It seems like you are attempting to run your webpage or Three.js app directly from your local hard drive. It is recommended to use a server (such as a local server for development) to serve your application and necessary assets like images, fonts, scripts, etc., in order to avoid encountering any issues.

There are several methods to accomplish this - personally, I prefer using http-server when serving static content for simple apps that I am working on locally.

To set up http-server for your project, follow these steps:

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

After completing these steps, you will be able to view your project in the browser (accessible from http://localhost:8080 by default). This should resolve the error you are currently facing -

I hope this information proves helpful!

Answer №2

Don't use absolute paths for font files as it can create cross origin issues. Opt for a relative URL when including the file instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for me to move props object deconstruction into a separate module?

Here is my scenario: I have two React components that share 90% of the same props data, but display different HTML structures. I would like to avoid duplicating variable declarations in both component files. Is there a way to extract the common props des ...

javascriptreactjsecmascript-6

Problem with a for loop: retrieve only the final item

Using the fileReader to read the content of selected files and appending it to the DOM creates a paragraph element for each file. However, when attempting to store each file's content in local storage, only the last item is being saved. What could be ...

javascriptjquery

"Troubleshooting: Why is the onError event not triggering

Has anyone else experienced issues with using a third-party API to fetch YouTube thumbnails with higher resolution, sometimes resulting in a code 404 error? I've been trying to replace the image source with a default YouTube thumbnail retrieved from i ...

javascriptreactjsimage

The event handler on line 72 triggered an error that was not handled, resulting in an error message indicating a permission issue on OpenShift: "Error: cannot listen for connections

I have been working on creating a basic chat app. Initially, it was running smoothly on localhost:3000/chat.html. However, upon deployment on OpenShift, I encountered a crash accompanied by the following error message (as seen after running rhc tail): UPD ...

javascriptnode.jsexpressdeploymentopenshift

Troubleshooting a touchend event problem with jQuery in a Cordova environment

Initially, I utilized a listener for mousedown and mouseup events to handle interactions from one canvas to another on the website. However, when transitioning to mobile compatibility, I switched to using touchstart and touchend events. Unfortunately, the ...

javascriptandroidjquerycordovatouch

Determine the precise x and y coordinates of a centered element using JQuery

How can I determine the exact left and top positions of an element? The parent container has text-align: center, causing potential confusion when there are multiple elements on the bottom row. For instance, the first one may have a position of 0px instea ...

javascriptjquerycsspositiontext-align

What could be causing this program to continuously add values to the message table whenever the page is refreshed?

Looking for a simple chatting system using php, mysql, html, css and javascript? Check out this code snippet. However, there seems to be an issue with the message sending functionality. Every time a user sends a message and refreshes the page, the same m ...

javascriptphphtmlcssmysql

Toggle the hamburger menu using JavaScript

How can I close my hamburger menu when clicking a link for one page navigation? The menu is functioning properly, but I need a way to close it. Unfortunately, I have limited knowledge of JS. I only have the HTML and CSS for this: HTML in index.html file ...

javascriptjqueryhtmlcss

Activate the jQuery UI datepicker with a trigger

Within my code, I have a span element that displays a date in the format mm/dd/yyyy. <span class="editableDateTxt">06/10/2014</span> My goal is to have an inline editable date popup or utilize jQuery UI's datepicker when this span elemen ...

javascriptjqueryjquery-uidatepicker

Step-by-step guide on programmatically closing the Material-UI DropDownMenu

http://www.material-ui.com/#/components/dropdown-menu Having encountered a styling issue, I was compelled to rearrange the order of components within my material-ui DropdownMenu. Nevertheless, some buttons (renderNavLink) are now failing to close the Dro ...

javascriptreactjscomponentsmaterial-ui

Issues have been identified with the capabilities of Vue's Mutations and Actions

My Index.js from the Store Folder import Vue from "vue"; import Vuex from "vuex"; import state from "../store/state"; import mutations from "../store/mutations"; import actions from "../store/actions"; Vu ...

javascriptvue.jsvuejs2vuex

Invalid WebResource with broken links

Within our internal network, the website functions smoothly without any issues. However, when trying to access the same site from an external location, we encounter a specific error message at the end of the WebResource.axd return: /* START */ /* Skipped ...

javascriptasp.netasp.net-ajaxwebresource.axdwebresource

Guide to efficiently populating a self-referential Mongoose model

My goal is to populate data across multiple levels using the fields from an Article model: comments: [ { type: Schema.Types.ObjectId, ref: "Comment" } ] and also from ...

javascriptnode.jsmongodbexpressmongoose

What is the correct method for completely eliminating a mesh from the three.js scene?

I am looking for a way to fully remove meshes from a three.js scene without causing any memory leaks. I have noticed that reloading the same models multiple times can lead to browser crashes, indicating that memory is not being properly deallocated. ...

javascriptthree.js

Getting access to the parent's ref from child components in Vue/Nuxt can be achieved by using

Incorporating a global confirm modal component into my default layout file has been a challenge. Attempting to access this component from my pages/index.vue has proven to be unsuccessful, as calling this.$refs returns an empty object. While placing the mod ...

javascriptvue.jsvuetify.jsnuxt.js

Toggling javascript functionality based on media queries

On one of my slides, I want to display images that are specific to different devices like iPhone, iPad, and desktop. I am looking for a way to filter these images based on the device. Using display:none won't work as it's JavaScript, but here is ...

javascripthtmlcss

Server Receiving Missing Post Parameters

I've developed a straightforward $resource factory. .factory('Order', order) order.$inject = ['$resource', "ApiEndpoint", "UserRecord"]; function order($resource, ApiEndpoint, UserRecord) { return $resource(ApiEndpoint.url + & ...

javascriptangularjshttp-headersurl-parametersngresource

Instructions for using Selenium to access the "stats for nerds" option on a YouTube video by right-clicking

I am currently working on a program that has the ability to block YouTube ads and keep track of the blocked Ad Video IDs. To achieve this, our selenium program needs to simulate a right click on the video to open the video menu and then select "stats for ...

javascriptselenium-webdriverright-click

Despite being installed, the message 'concurrently: command not found' pops up

I'm attempting to run two scripts simultaneously, and I came across the concurrently package that is supposed to assist with this. After executing npm install concurrently --save and verifying it in my package.json, I faced an issue when trying to run ...

javascriptnpmcreate-react-app

What is the best way to make my text stand out against a faded background?

After mastering the basics of web development on Codecademy, I was eager to start my own blog and create a unique website. One challenge I encountered was figuring out how to fade the background without affecting the text. Despite researching various solut ...

javascriptjqueryhtmlcss