Using images stored locally in Three.js leads to undefined mapping and attributes

Currently, I am developing a WebGL application using Three.js that involves textures. To enhance my understanding, I have been referring to the tutorials available at . However, when attempting to run the application locally, I encountered several errors.

Uncaught TypeError: Cannot read property 'map' of undefined Three.js:2728
Cross-origin image load denied by Cross-Origin Resource Sharing policy. index.html:1
Uncaught TypeError: Cannot read property 'attributes' of undefined Three.js:3600
Cross-origin image load denied by Cross-Origin Resource Sharing policy. index.html:1
Uncaught TypeError: Cannot read property 'attributes' of undefined Three.js:3600
Uncaught TypeError: Cannot read property 'attributes' of undefined Three.js:3600

I understand that the Cross-Origin Resource Sharing Policy issue is related to utilizing images from local sources. Even after launching Chrome with the switch:

C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

The problem persists. Could it be due to an outdated browser parameter? My current process involves opening Chrome through a shortcut and browsing through the address history to locate my index.html file.

Below is a snippet of the code causing these problems:

var materialArray = [];
materialArray.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/skybox-xpos.png" ) } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/skybox-xneg.png" ) } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/skybox-ypos.png" ) } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/skybox-yneg.png" ) } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/skybox-zpos.png" ) } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/skybox-zneg.png" ) } ) );
for ( var i = 0; i < 6; i++ )
{
    materialArray[ i ].side = THREE.BackSide;
}
var skyboxMaterial = new THREE.MeshFaceMaterial( materialArray );
var skyboxGeom = new THREE.CubeGeometry( 5000, 5000, 5000, 1, 1, 1 );
ShapeShifter.skybox = new THREE.Mesh( skyboxGeom, skyboxMaterial );
ShapeShifter.scene.add( ShapeShifter.skybox );

There is a possibility that a similar query titled: Problems with MeshFaceMaterial since revision 54 (Update 2) provides insights into this issue. However, implementing the suggested solution regarding calls to THREE.GeometryUtils.setMaterialIndex remains unclear. How should I proceed?

Your assistance is much appreciated.

Answer №1

An effective solution to avoid using the --allow-file-access-from-files flag or setting up a local webserver is by utilizing Dropbox's Public folder.

This method eliminates the security risks associated with the flag and saves you from the inconvenience of launching a local webserver every time you want to preview your page.

You can make changes to your page offline, and once it is synced, simply access the public link that Dropbox automatically generates for the file to view your page.

Answer №2

XAMPP is the perfect solution for all your needs. I have relied on this product for over 5 years and it has proven to be incredibly user-friendly.

Answer №3

--allow-file-access-from-files (and other flags) may only be effective if no other tabs or windows are open when launching it. To ensure security while running things locally, the ideal solution is to use a local web server to serve the files. You can find numerous examples on three.js wiki and in the three.js sources.

Upon examining the THREE.CubeGeometry source code, it appears that different material indices are already assigned to each face. For an alternative method, you can check out my cubemap-based skybox code here.

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

Safari Displaying Error Message "Unhandled Promise Rejection: [object DOMError]" While Playing MP4 Video

I am facing an issue with playing a group of MP4 videos on hover in a container. You can view a demonstration by clicking the link below: While this functionality works smoothly in Chrome, it seems to be causing problems in Safari. Upon hovering, the vide ...

Best practices for updating nested properties in Angular objects

I have a dataset that includes information about fruit prices for different years: { "fruits": [ { "name": "apple", "prices": [ { "2015": 2, "2014": 3, ...

What is the process of encoding JSON in PHP using jQuery Ajax to send post data?

I created an HTML form to submit data to a PHP file upon hitting the submit button. $.ajax({ url: "text.php", type: "POST", data: { amount: amount, firstName: firstName, lastName: lastName, email: email }, ...

Error message "Undefined error encountered when attempting to display an array of objects using jQuery and PHP through AJAX on the console"

While trying to parse a JSON using jQuery and AJAX, I encountered an issue where some objects in the Array, like the SUM(amountbet) object, are showing up as "undefined" in the console. https://i.sstatic.net/pMUqc.png The image above depicts th ...

Is it possible to use an ngClick function in one directive to toggle data in another?

Currently, I am in the process of developing a weather application using Angular 1.5.8 where users should have the option to switch between imperial and metric units for temperature and wind speed. The toggle feature along with all the weather data fetche ...

Why aren't the kittens loading in Next Js?

Following the guidance in the Next Js documentation, I created a next.config.js file to inform Next Js that I want to incorporate kittens into my app. The resource for the kittens can be found at: This is how the next.config.js file appears: module.expor ...

Interact with React Three Fiber by moving your mouse and utilizing the responsive controls

Is there a way to make an object follow the mouse even after changing the camera position with controls? Check out this example for reference: https://codesandbox.io/s/r3f-mouse-forked-to146p?file=/src/index.js When you drag the screen, the object no lon ...

Performance issues with Datatables server side processing

Utilizing Datatables server-side processing with PHP, JQuery, Ajax, and SQL Server database, I encountered slow performance in features such as pagination and search. Despite working with moderate data, there is a delay of over 40 seconds when using the se ...

Node.Js error: "The requested resource does not have the 'Access-Control-Allow-Origin' header present."

This particular query shares similarities with others, however there is a perplexing difference that is causing it to malfunction. Previously, my JavaScript was able to fetch 6 json files without any issues. In Node.JS, I have configured cors and headers ...

Issues with jQuery not detecting click events

Here is an example of HTML: <div class="sortable-buttons"> <ul> <li><a>Recent</a></li> <li><a>Popular</a></li> <li><a>Being Discussed</a></li> </ul> </div ...

Creating XML files using Node.js

What are some effective methods for generating XML files? Are there tools similar to the Builder in Rails, or any other recommended approaches? Appreciate any insights! ...

Avoid production build warnings in Vue.js without the need to build the code

Experimenting with vuejs, I decided to use it for a simple page even though I could have achieved the same without any framework. Now, my project is nearly production ready. The only issue is that it's just a single js and html file, but it shows thi ...

Converting CSS code into JavaScript

I am currently working with the following code: .mr15 > * margin-right: 15px &:last-child margin-right: 0 I need help translating this code to Javascript. Should I use JQuery or pure Javascript for this scenario? Thank you. ...

Verify the functionality of a specific method invoked within another method through unit testing

I currently have a method in my Angular application that is triggered upon clicking. Inside this method, I pass a value to another private method. .ts file public onViewItem(item: Results): void { const ids = [item.data['id']]; this.anot ...

AngularJS module is experiencing issues with loading properly

Can someone please help me understand what the issue is? I am new to AngularJS and may have overlooked something. Below is my simple HTML code: <!DOCTYPE html> <html> <script type="text/javascript" src="angular.js"></script> ...

The step-by-step guide on implementing secure authentication using cookies in Next.js

I am encountering a minor issue. I am still very new to Nextjs and I am attempting to learn by creating an app. I have successfully implemented a Login system using Next, but I am facing some challenges in securing routes. After a successful login, I have ...

The background failed to display (potentially due to a hovering function)

I encountered an issue with a div that has a background image. Upon loading the page, the background image fails to display initially. However, when I hover over the div and then move my mouse elsewhere (due to a specific function described below), the bac ...

Troubleshooting Event Tracking Problems with Brave Browser on PostHog

After successfully implementing Posthog with React and testing it on Chrome and Firefox, we encountered issues when trying to test it on Brave/Microsoft Edge Browsers. It appears that the default ad blocker feature in these browsers is causing the problem. ...

Using JavaScript to bring in npm packages

My understanding of javascript modules is still lacking. I recently embarked on a new project that required a library from npm. https://www.npmjs.com/package/random-color-pair After running npm i random-color-pair This created a "node modules" folder wh ...

The animation feature on the slideshow is dysfunctional

For this Vue component, I attempted to create a slideshow. The process is as follows: 1) Creating an array of all image sources to be included (array: pictures) 2) Initializing a variable(Count) to 0, starting from the beginning. 3) Adding v-bind:src=" ...