The JSONLoader object successfully links to a URL but encounters issues with relative paths

Currently facing a minor but persistent issue with THREE.js and seeking assistance.

Upon observation, I've discovered that linking a three.js 3D object using an URL functions properly. However, when a relative path is used, only a black window appears. See the functional code snippet below:

        var jsLoader = new THREE.JSONLoader();
        jsLoader.load('http://codepen.io/nickpettit/pen/nqyaK.js', function(geometry) {
            var material = new THREE.MeshPhongMaterial();
            var mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);
            mesh.scale.set(10,10,10);
        });

On the other hand, attempting to use 'models/model.js' (simply a replica of the object from the aforementioned URL) does not yield the desired result.

I am certain that the path provided is accurate, as I have successfully linked the three.js build file in a similar manner (located in 'js/three.js'). What could be causing this discrepancy?

PS: Operating on Arch Linux.

Answer №1

To resolve the issue of facing the same origin policy restriction when loading from a file system, be sure to read this helpful page. An alternative solution mentioned on the page is setting up an AMP local server and accessing your pages through localhost on your browser.

Andreas Anyuru, in his book Professional WebGL Programming (page 214), explains the rationale behind the same origin policy for textures and models:

Security expert Steve Baker highlighted the potential risk of exposing the content of textures through a malicious site that utilizes a specially crafted fragment shader uploaded to the GPU. By measuring the time it takes to test the color of a texel, this shader could determine the brightness of the texel, posing a security threat. A proof of concept implementation further demonstrated the feasibility of this attack.

Answer №2

Simply speculating...

The pathway is determined by the location of the javascript file.

Assuming the js file resides in /lib/app.js, the pathway to the model would be ../models/model.js.

The most convenient method is to consistently utilize local absolute paths, such as /models/model.js.

It functions properly when linking the three.js build file since your html file is typically located at the root, making lib/three.js equivalent to /lib/three.js

If you had utilized the network debugger, you would have observed that it is not a three.js issue, but instead a pathway complication :)

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

Simple way to retrieve the first and last date of the current month using Node.js

I need help with retrieving the first and last date of the current month using the code below:- let currentDate = new Date(); let month = currentDate.getMonth() + 1; console.log(month); let firstDate = new Date(currentDate.getFullYear(), currentDate.getMon ...

What is the best way to ensure that the Next.js app listener is attached before the 'load' event of the window is triggered?

Recently, I started working with next.js, incorporating TypeScript in version 13.5.5. One crucial requirement for the application is that it must be placed within an iframe and communicate with the parent/host through the window.postMessage event. To achie ...

Unable to construct React/Next project - identified page lacking a React Component as default export (context api file)

When attempting to compile my Next.js project, I encountered an error message in the terminal: Error: Build optimization failed: found page without a React Component as default export in pages/components/context/Context The file in question is utilizing ...

Ways to safeguard your API endpoint

Just starting out with Node.js/Express, I'm looking to have my front end retrieve data from an endpoint ('/1') without displaying the JSON data to users when they access that specific endpoint. Any guidance on how to accomplish this would be ...

Unable to utilize routes in Express.JS when integrated with nginx

After setting up nginx in front of Express.JS, everything seemed to be running smoothly. However, I encountered an issue when trying to access website.com/users, which resulted in a 404 Not Found error. It appears that accessing website.com works fine, but ...

Transform the appearance of several elements using querySelectorAll

When targeting class names in an HTML page with a checkbox using querySelectorAll, keep in mind that getElementByID only works with the first element. QuerySelectorAll displays a nodeList which might require some corrections - how can this be achieved? le ...

Troubleshooting ReactJs in Chrome during page load: encountering issues with undefined properties when utilizing the console

When debugging React on initial page load, I encounter a problem. Upon hovering over this, I can see the content, but using the console shows that this is undefined. Interestingly, this issue only arises when I refresh the page; clicking around does not tr ...

Selecting Objects with a Mouse in Three.js

Thanks to the wonderful support from the stackoverflow community, I was able to successfully implement a basic object picking example. You can view the functional code here. However, it's important to note that this example specifically works when t ...

Information gathered from checkboxes and dropdown menus

When gathering information from my form fields, I know how to capture data from input fields using this code: 'formData' : { 'timestamp' : '<?php echo $timestamp;?>', 'token' : '<?php echo md5(&a ...

Tips for saving images in an S3 bucket

Within my express application, I currently save images to a directory in my repository. However, I am beginning to think that this approach may not be ideal and I am considering using AWS S3 as an alternative storage solution. Since I have never worked w ...

Use Jquery to select the checkbox inside the td element and mark it as

I've created an HTML table with checkboxes in the td elements, like so: <table id="my_table"> <tr> <td><input type="checkbox" name="td1"></td> <td><input type="checkbox" name="td2"></td> </ ...

Stop an item from being included based on a boolean value

I need to iterate through an array of IDs called "world". The idea is that if the ID value in world exists in myArray[n].id, then I want to remove the entire element from myArray. If it doesn't exist, then I want to add it to myArray. world = ["124241 ...

The absence of HTML and CSS is preventing the inclusion of an Ajax image viewer, back button, and

Currently, I am experimenting with jQuery and JavaScript to create an ajax overlay image viewer for a PHP website. After adding this code snippet at the end of the 'gallery page', I can successfully open the viewer and navigate using the next and ...

Vue JS i18next: Handling Single Translation String Fallbacks

Recently, I've been utilizing i18next, and I decided to set a fallback value for some translated strings in case they are not available in the selected language. Here's an example: en: base.json "yes": "yes" "no": "no" fr: base.json ...

Implementing icon display upon click in a Meteor application

Currently, I am in the process of developing an application using meteor and within one of the templates, I have the following code snippet. <h3> <b> <a class="viewed" href="/jobdetails/{{_id}}">{{title}}</a> </b> ...

Error: Cannot read property 'X' of undefined in JavaScript when using Django framework

Using p5.js, I am creating drawings with data from a JSON provided by my Django backend. The draw function is defined at the base level of my HTML document within the script element: function draw(json) { if (json["leaf_text"]) { stroke(100) el ...

Having trouble loading my app.js in Angular - Seeking help on Coursera!

I've followed the instructions provided thus far and inserted the HTML code accordingly. However, upon attempting to load the page, all I see is: The tabs: The Menu Appetizers Mains Desserts The description: image: dish.name , dish.name , dish.labe ...

Combining Google app endpoints with a phonegap app: Step-by-step guide

I've been working on a Phonegap client application and have developed all the necessary web services using Google Endpoints. However, I am facing an issue with using the API. In my index.html file, there is this script: <head><script> ...

What is preventing me from "importing" react-dom.js?

Implementing ReactDOM into my Jest tests has been a bit of a challenge. Let's take a look at the code snippet below. const React = require('../src/js/vendor/react/build/react.js'); const ReactDOM = require('../src/js/vendor/react/build ...

A JavaScript async function that can be activated either by clicking the search button or by hitting the "enter" key in the input field

Recently, I've been working on an async function in Vanilla Javascript that is triggered by a click event on the search button. However, I would like to modify it so that the function can also be initiated when the "enter" key on the keyboard is press ...