Is it possible to load textures in Three.js and Cordova without relying on a server or HTTP?

I am currently working on developing a Cordova game using Three.js with the goal of making it playable offline. However, I have encountered an issue where Three.js requires texture files to be served via HTTP, making it challenging to achieve offline functionality. Is there a workaround for this limitation? I am trying to avoid setting up a Node.js server for my game, if possible.

Before dismissing the possibility, consider the existence of numerous 3D games on platforms like Google Play and the App Store that are fully functional offline, such as Temple Run and Match 3D. How do these games manage to work offline?

My attempts to load GLB/GLTF models have led me to use the "import {GLTF}" method in my index.js file. However, declaring index.js as a module in my index.html file triggers a CORS issue.

I have also experimented with converting my .glb files to .json and utilizing Three.js's built-in "ObjectLoader". Unfortunately, this approach resulted in an error message stating "THREE.ObjectLoader: Can't load resources/models/test.json".

index.html

 <!--HTML code excluded for brevity-->

index.js

 // JavaScript code excluded for brevity

config.xml

 <!--XML code excluded for brevity-->

Plugin List

 <!--Plugin list excluded for brevity-->

Folders & Files Structure (Omitted most irrelevant files)

 <!--File structure excluded for brevity-->

Android Studio Logcat (Debug)

 <!--Logcat details excluded for brevity-->

Answer №1

When making an XHR request through a XMLHttpRequest, loading local files should not be an issue. The success of this method depends on how you have set it up. If you are using cordova-android 10, you can experiment with adding the following to your config.xml:

 <preference name="AndroidInsecureFileModeEnabled" value="true" />

For iOS, consider utilizing cordova-plugin-ios-xhr and adjusting your preferences accordingly:

 <preference name="allowFileAccessFromFileURLs" value="true" />
 <preference name="allowUniversalAccessFromFileURLs" value="true" />

 

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

Guide on incorporating database-sourced audio playback using buttons in PHP and HTML

Building my website with an audio player inside has been a bit challenging. I encountered an issue when trying to combine songs loaded from the database with a play button. My goal is to have the play button change when clicked and load the song from the d ...

Assessing the validity of a boolean condition as either true or false while iterating through a for loop

I am facing an issue that involves converting a boolean value to true or false if a string contains the word "unlimited". Additionally, I am adding a subscription to a set of values and need to use *NgIf to control page rendering based on this boolean. &l ...

No need to conceal content when switching to another tab if the tab is set to stay in place

My current setup involves using material UI and react-sticky, which has been functioning well. However, I have encountered an issue that I am seeking help with. Here is a link to what I have tried so far. Below are the steps to reproduce this issue: S ...

Error: The context does not have a definition for React

import './App.css'; import ComponentC from './components/ComponentC'; export const UserContext = React.createContext() function App() { return ( <div className="App"> <UserContext.Provider value={& ...

Trouble triggering hidden radio button in Angular 9 when clicked

I have implemented radio buttons within a div with the following CSS styles (to enable selection by clicking on the div): .plans-list { display: flex; justify-content: center; margin: 2rem 0; .plan { display: flex; margin: 0 0.5rem; p ...

How can I simulate mouse position in a UIWebView?

Can the mouse position (x,y) for HTML-5 elements on a UIWebView be programmatically set using stringByExecutingJavascript in order to trigger hover, mouse over, and other interactions? ...

Creating a map in Typescript initialized with a JSON object

In my Typescript class, there is a map that I'm trying to initialize: public map:Map<string,string>; constructor() { let jsonString = { "peureo" : "dsdlsdksd" }; this.map = jsonString; } The issue I'm encounte ...

Trouble with defining variables in EJS

Recently delving into the world of node development, I encountered an issue with my EJS template not rendering basic data. I have two controllers - one for general pages like home/about/contact and another specifically for posts. When navigating to /posts ...

Choosing options from two separate dropdown menus with the same CSS class name using JavaScript or jQuery: A guide

I am looking to update the values of two dropdowns using the same CSS properties, similar to the design shown in the attached image. Here is the HTML code snippet for reference: <div class="container-fluid" role="main" style="margin-top: 100px;"> ...

Retrieve the Checkbox id of a material-ui checkbox by accessing the object

I'm currently working on extracting the id of a Checkbox object in my JSX code. Here's how I've set it up: <div style={{display: 'inline-block', }}><Checkbox id='q1' onclick={toggleField(this)}/></div> ...

Troubleshooting the Width Problem in Bootstrap 5 Dropdowns

I am currently working on a new project and encountering an issue with the width of a Bootstrap 5 dropdown. The problem lies in the discrepancy between the button width and the menu width. Although it may seem simple, I am having trouble resolving it as I ...

Access Azure-Active Directory through cypress tests

Currently, I'm faced with the task of creating automated tests for an application that requires login to Azure Active Directory. These tests are being written using Cypress and TypeScript. In search of a solution, I am seeking advice on how to execute ...

Having trouble with the pagination feature while filtering the list on the vue-paginate node

In my current project, I have integrated pagination using the vue-paginate node. Additionally, I have also implemented filtering functionality using vue-pagination, which is working seamlessly. Everything works as expected when I enter a search term that d ...

What is the best way to ensure that all website users receive the same update at the same time using AngularJS and Firebase?

Imagine a scenario where I and my 3 friends are accessing the same website from different computers simultaneously. Each of us has a profile stored in an array like this: $scope.profilesRanking = [ {name:"Bob", score: 3000}, {name:"John", score: 2 ...

Develop a custom JavaScript code block in Selenium WebDriver using Java

Recently, I came across a JavaScript code snippet that I executed in the Chrome console to calculate the sum of values in a specific column of a web table: var iRow = document.getElementById("DataTable").rows.length var sum = 0 var column = 5 for (i=1; i& ...

AngularJS personalized date selector directive

Looking to create a unique datepicker directive with a personalized template. Feeling lost on where to begin constructing it... Any suggestions on incorporating date data into my directive? Your guidance or tips on how to approach this project more effe ...

When a new component is loaded, React Martial UI component may face issues due to overwriting or

Currently, we are working on a vast web application that utilizes jquery and bootstrap. Our current task involves transitioning this extensive app to React with Material UI, piece by piece. As we progress towards transforming it into a React app, everythin ...

Should I refrain from storing user files on my server?

Greetings! I am currently working on an Express js + React js application and using MySQL for database management. I have successfully stored user information like email, hashed passwords, and user IDs in the database. However, now I want to create ...

Display a spinner in React to indicate that child components are still loading

I am working with a modal window component that has the ability to process various types of HTML content, such as inline elements, image tags, iframes, and more. My question is, can the component be programmed to detect when the children elements have fin ...

The POST function isn't functioning correctly within the temp.js file

My issue with the post method: var newUser = { "user5" : { "name" : "john", "password" : "qwerty123", "profession" : "developer", "id": 5 } } app.post('/createUser', function (req, res) { // Reading existing use ...