After successfully implementing a simple html code to load a gltf model using three.js and their gltfloader.js, I encountered an issue where it works flawlessly on Mozilla but fails to display on ie11 without any errors being thrown. Despite trying the es6-promise polyfill, the problem persists. My goal is to make it work on internet explorer. Here is the code snippet below, mostly derived from an example code.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/GLTFLoader.js"></script>
<script src="js/OrbitControl.js"></script>
<script src="js/es6-promise.min.js"></script>
<script src="js/es6-promise.js"></script>
<script src="js/es6-promise.auto.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var controls = new THREE.OrbitControls( camera );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
controls.screenSpacePanning = true;
// Other code snippets...
animate();
</script>
</body>
</html>
EDIT: Note that the box displayed correctly, indicating that the issue lies specifically with loading the gltf model in ie11.
EDIT 2: I also noticed that the gltf loader example provided by three.js does not function on ie11 as well. This prompts the question of whether the loader itself is incompatible with ie11.