How to load MTL files from local storage using Three.js in Chrome

I'm encountering an issue when attempting to load MTL files using Three.js on Chrome. While everything runs smoothly on Safari, I keep running into a cross-origin request error in Chrome when working with local files. I'm at a loss on how to resolve this problem for local files, but interestingly, it works without a hitch when published on an HTTP website in Chrome.

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('assets/');
mtlLoader.setBaseUrl('assets/');
mtlLoader.load('file.mtl', function(materials) {
     ...
});

three.js:18280 XMLHttpRequest cannot load file:///.../assets/file.mtl. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

javascriptgoogle-chromethree.js

Answer №1

While this may not be directly related to THREEjs, I feel compelled to address it here:

Allowing a website to request files from the local file system is a major security risk and not recommended.

Imagine a scenario where a website could request an index of file:///C:/Users/Installation/Pictures/ on a Windows system and then potentially start transferring all the contents to their server without your knowledge.

This vulnerability could be exploited by malicious individuals to access files on your computer simply by visiting a website. For this reason, websites are restricted from accessing files within the local file system.

To avoid such risks, it is advisable to use tools like Mamp or leverage the built-in server emulation feature in Brackets. Personally, I prefer using Mamp as it offers quick mobile testing and is more efficient compared to traditional FTP setups.

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

What is the best way to retrieve JSON key/value pairs instead of an array?

I am working on retrieving data from a Google Spreadsheet using App Script and have set up a DoGet function. Currently, I am getting an array of data but I need it in JSON key-value pairs format. The table in my Google Sheets is structured as follows: Th ...

javascriptarraysjsongoogle-apps-scriptgoogle-sheets-api

Implementing a node.js application deployment with pm2 to ensure zero downtime

While there are countless tutorials on developing chat applications using socket.io and node.js, the event-driven advantage of Node is undeniable for building chat apps. However, a recent thought crossed my mind - how can I ensure the sustainability of my ...

javascriptnode.jsexpresssocket.iopm2

How can I load several GLTF models and then trigger a personalized start() function?

Loading all models first and then setting their relationships (child/parent), scale, etc. inside a Start function before initiating the animation. const loader = new GLTFLoader(); loader.load(path,function(gltf){ obj = gltf.scene; obj.name = name; ...

three.js

Tips for fully accessing a website with javascript enabled through an android service

I've been attempting to extract data from a website node that includes JavaScript. In VB .NET, the code I typically use is as follows: Dim listSpan As IHTMLElementCollection = bodyel.getElementsByTagName("span") For Each spanItem As IHTMLElement In ...

javascriptandroidjsonvb.netjsoup

Save pictures in MongoDB using GridFS or BSON format

As a newcomer to MongoDB, I am seeking advice on the best way to store images in the database. Gridfs and BSON seem to be the most common options, but I'm unsure about their respective pros and cons. The main difference I'm aware of is the 16MB s ...

javascriptnode.jsmongodbexpressmongoose

Gather data from various HTML elements with JavaScript when submitting a form

How can I extract values from HTML elements and send them for processing through a form? I'm attempting to compile a menu item list with the individual items' structure in place, but I'm struggling to figure out how to fetch the values upon ...

javascripthtmlcss

The ValidationPipe in NestJS seems to be facing issues specifically with @Query() parameters

I've been attempting to convert certain query parameters from string to integer using the built-in NestJS ValidationPipe, but unfortunately, it doesn't appear to be functioning correctly. Below is my controller : import { ..., ValidationPipe } f ...

javascriptnode.jsnestjsdto

The installed NPM package does not contain the necessary TypeScript compiled JS files and declaration files

I have recently released a TypeScript library on NPM. The GitHub repository's dist (Link to Repository Folder) directory includes all compiled JavaScript and d.ts files. However, after running npm i <my_package>, the resulting module contains on ...

javascriptnode.jstypescriptnpmnpm-install

modify the color of a box within a grid upon clicking it

I am curious if it is possible to change the color of a box when it is clicked. I am working on coding a "calculator layout" and would like to start with this part 1 2 3 4 5 6 7 8 9 0 This is what I have been working on and struggling with. $(docume ...

javascripthtmljquerycss

Creating stunning 3D animations using Canvas

I am knowledgeable about Canvas 2D context, but I would like to create a 3D animation similar to this example. Would using the Three.js library be the most suitable option for this type of animation? Any recommendations for tutorials or documentation tha ...

javascriptcanvashtml5-canvasthree.js

Using JavaScript to trigger actions via links or buttons inside a table will only function properly in the first row

After multiple consecutive Ajax requests to refill an HTML table, there seems to be a strange issue. The links in the first row of the table are functioning properly and call JavaScript functions, but for any subsequent rows, the links or buttons stop work ...

javascriptphpmysqlhtml-table

Tips for showing user data following form submission to a SQL database using React JS

Hey everyone, I'm currently working on a project that involves user registration and login. Once the users complete these steps, they are required to fill out an additional form which is displayed below. After submitting this form, the data is stored ...

javascriptmysqlnode.jsreactjsexpress

How to stop a component template in Angular from displaying both conditional statements simultaneously?

I want to prevent my component template from briefly displaying both conditional statements when the condition changes after the component has been initialized. My application receives a token, and depending on its validity, it shows the appropriate conte ...

javascriptangularangular-ng-ifangular8rxjs-subscriptions

Utilizing jQuery.post to generate a dynamic dropdown menu

I recently designed a dropdown list that functions well on a standalone page. However, I encountered an issue when attempting to display it in a table on another page using jQuery.post(). The contents appear to overflow from the dropdown list. The jQuery ...

phpjavascriptjquery

Displaying a blank column in a table using JavaScript

I am trying to write a JavaScript function that will add a new column to a table. I want this new column to be displayed at the index where it is added, and then hidden once the addition is complete. Here is the code for my method: function addColumnToTa ...

javascriptjquery

Choose the text by clicking on a button

I currently have: <span class="description">Description 1</span> <button class="select">Select!</button> <span class="description">Description 2</span> <button class="select">Select!</button> <span clas ...

javascriptjqueryselect

Using the outer ng-repeat's object property to filter nested ng-repeat items

I'm currently working on nesting two ng-repeats with two separate JSON files. The goal is to filter the second ng-repeat based on parameters from the first ng-repeat. The first JSON file, $scope.matches, includes information about each match in the W ...

javascriptangularjsmean-stack

Using Javascript to Assign Value to Variables

I have been working on this code snippet: http://jsfiddle.net/9B84H/26/ function autosuggest() { var input = document.getElementById('location'); var options = {types: [],}; var autocomplete = new google.maps.places.Autocomplete(input, o ...

javascriptjquery

Mobile website scroll assistant

Seeking a solution to aid mobile users in scrolling through a lengthy article page. Typically in mobile apps, an alphabetical index assists users in navigating long lists. How can I incorporate a similar feature into a webapp? For context, my tech stack i ...

javascriptangularjscordovaweb-applicationsscroll

How can I pass an array from HTML to Node.js and subsequently store it in MongoDB?

Looking to combine the values of longitude and latitude into one array for input, then store it in the database. While there are plenty of examples on handling arrays, most of them are based on PHP. Check out the following code snippet: HTML <html> ...

javascriptjqueryhtmlnode.jsmongodb