Does the gltf loader in three.js have compatibility issues with Internet Explorer 11?

Despite the claims on the official website that gltf files should load in three.js scenes using IE11, I have been experiencing issues with the loader. Even the examples provided by three.js fail to work on Internet Explorer when it comes to loading gltf files. Can anyone confirm if this is a known issue and possibly update the information regarding the browser compatibility of the loader?

EDIT: I have attempted to use an ES6 Promises polyfill, similar to the example I shared in a question on Stack Overflow a month ago, but the problem persists.

javascriptinternet-explorerthree.jsinternet-explorer-11gltf

Answer №1

GLTFLoader works with IE11, however, it needs certain features that are not present in IE11 to be "polyfilled." This essentially means including a script to enable the Promise feature, which is not supported natively by IE11.

If this solution doesn't resolve the issue, you might want to consider reporting it on the three.js github page as it could potentially be a bug.

Answer №2

As per the documentation in the three.js website, GLTFLoader has browser compatibility limitations:

The GLTFLoader feature depends on ES6 Promises, which unfortunately are not compatible with IE11.
In order to use this loader with IE11, it is necessary to include a polyfill that can replace the missing Promise functionality.

While gltf loader does not work well with IE11 initially, there is a workaround available by using polyfills for ES6 promises.

Answer №3

If your website isn't displaying the glTF models after importing ES6 polyfill, you may need to make the following adjustment:

Modify the parse function in GLTFLoader.js

var json = JSON.parse(content)

to

var json = eval('('+content+')')

This solution resolved the issue for me.

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

Two interdependent select fields

I am currently working on creating two select fields where, upon selecting an option in the first field, some options in the second field should be hidden. I have almost achieved this, but my script is unable to locate certain options in the first select f ...

javascriptjqueryhtmlcssselect

Styling the scrollbar for the PDF element on an HTML page

I have a div that contains an object "linked" to a .pdf file. Is it possible to customize the scrollbar style using CSS or JavaScript/jQuery? <div id="container"> <object data="document.pdf" type="application/pdf" ...

javascriptjqueryhtmlcsspdf

Is your jquery keydown event detector failing to recognize key inputs?

Lately, I've been working on a new project and encountered an issue with a piece of code that used to work perfectly fine in a previous project. The code in question is $(document).keydown(function(keypressed){});, which I used to detect specific key ...

javascriptjquery

What is the functioning process of the angular method decorator?

The tutorial on creating custom decorators in Angular introduces a throttle decorator that utilizes the lodash throttle function. The implementation of this decorator can be seen below: import t from 'lodash.throttle'; export function throttle( ...

javascriptangularangular-decorator

Passing the outcomes of several queries to a single route in my application, and displaying them on my

Currently, I am facing an issue with fetching 2 sets of data from my database using simple MongoDB queries. I need to pass both results to the view, but I am encountering an internal server error. My goal is to display a complete list of guardians along wi ...

javascriptnode.jsmongodb

Retrieving an Angular Application directly from the Server

In order to ensure user authentication from the backend before any other code loads in my Angular app, I need the initial request sent to the backend to check if the user is authenticated. Only once the user has been verified as authenticated can the app b ...

javascriptangularjsnode.jsexpress

Creating a WasmModuleBuilder in V8 that enables functions to return multiple values

I'm currently working on creating a wasm function using WasmModuleBuilder from V8: var builder = new WasmModuleBuilder(); builder.addMemory(5, 5, false); builder.addFunction("func", {params: [125,125], results: [125,125]}); builder.functions[0].addBo ...

javascriptv8was

The system couldn't locate the module: Issue: Unable to find module 'fs' within the directory

I am currently working on integrating the ADAL JS sample code from this link into a SharePoint framework client web part. My code is fairly straightforward, as I have already installed packages like adal, fs, and node-fs using NPM. However, when running t ...

javascriptnode.jstypescriptadaladal.js

The Typescript compiler is unable to locate the module './lib'

I'm currently integrating the winston-aws-cloudwatch library into my TypeScript server-side application. If you want to replicate the issue, I have provided a SSCCE setup on GitHub. Here are the details: index.ts import logger from './logger& ...

javascripttypescripttsc

Switching the input type from file to text

My request is to have a file input type that is initially set as read-only, yet still allows the user to manually enter the file name in a text box. Is there a way to achieve this? I want to be able to write the file name similarly to how I would input t ...

javascriptjqueryhtml

Unlocking the power of variables in Next.js inline sass styles

Is there a way to utilize SASS variables in inline styles? export default function (): JSX.Element { return ( <MainLayout title={title} robots={false}> <nav> <a href="href">Title</a> ...

javascriptreactjstypescriptsassnext.js

Issue with Vuex: currentUser state not persisting after page refresh

I'm currently working on a Vue.js SPA that utilizes Rails 6 API as the backend and Vue-cli (legacy webpack template). After signing in a user, everything seems to be functioning correctly. I can view the user details, it updates my setCurrentUser mut ...

javascriptvue.jsvuejs2

HTML Menu with Ajax functionality designed to work seamlessly without relying on JavaScript

I'm working on making my navigation system compatible with both clients who have JavaScript disabled and those who can use Ajax. Currently, I have dynamic links generated inside the navigation like "index.php?page=/cat/page.php". <li id="sidebarit ...

phpjavascriptajaxseonavigation

Right now, I am sending out 3 GET requests for JSON files using Axios. I wonder if they are being loaded simultaneously or one after the other

In the process of developing my application, I am loading 3 JSON files to gather information about a game's characters, spells, and more. As of now, I have implemented 3 functions that utilize axios to make GET requests and store the responses. Howeve ...

javascriptvue.jsvuejs2axios

Resolve issues with vue js checkbox filtering

As I embark on my Vue journey, I came across some insightful queries like this one regarding filtering with the help of computed(). While I believe I'm moving in the right direction to tackle my issue, the solution has been elusive so far. On my web ...

javascripthtmlvue.js

Show the Vue.js template in a Laravel Blade view

I have been struggling to integrate a Vue.js component into a Laravel blade file. Despite researching tutorials and Stack Overflow solutions, I have not been able to resolve the issue. Below is the template that I want to display: <template> < ...

javascriptphplaravelvue.js

choose among various options in Javascript

I'm currently using PHP and AJAX to create a basic CRUD system. I want to display a form with three buttons: Grabar, Modificar, and Eliminar. The issue I'm facing is determining the action to take based on which button is clicked. For instance, c ...

javascriptajax

A guide on mapping an array and removing the associated element

I have an array called responseData, which is used to display the available card options on the screen. public responseData = [ { id: 1399, pessoa_id: 75898, created_at: '2022-11-08T16:59:59.000000Z', holder: 'LEONARDO ', validade: ...

javascripthtmlarraysangular

Converting HTML to JSON using jQuery

Currently, I am utilizing the jQuery template plugin to dynamically create HTML based on JSON data that user can then modify (and even change). My goal is to find a way to convert this HTML back into JSON format so that it can be saved back to my server. ...

javascriptjqueryhtmljson

Using Reactjs to set state with a dynamically generated key-value pair

I have a dynamic object in props that I need to transfer to state @setState key: val values: another_key: value @props.data.option: @props.data.value Unfortunately, the above method does not work as expected. I have come up with an alternativ ...

javascriptreactjsjavascript-objects