The texture loaded by TextureLoader.load() has no defined image in IE11

Question

The texture loaded by TextureLoader.load() has no defined image in IE11

I recently used Three.js to create a stunning 3D globe for my website. To display textures on this globe, I implemented the following code snippet:

var loader = new THREE.TextureLoader();

loader.load(imageString, function (texture) {

    var sphere = new THREE.SphereGeometry( RADIUS, SEGMENTS, RINGS );

    var material = new THREE.MeshBasicMaterial( {
        map: texture,
        overdraw: 0.5
    });

    globeMesh = new THREE.Mesh(sphere, material);

    globe.add(globeMesh);

});

In this code, "imageString" refers to the path of an image stored on the server. While this functionality works smoothly on most browsers, there seems to be an issue with IE11. When debugging, I noticed that the texture object retrieved in the load() function lacks the image property in IE11, unlike other browsers where it retains the string value from "imageString".

Does anyone have insights into why this might be happening? Could this possibly be a known bug specific to IE11? I even tried including a Promise polyfill just to troubleshoot, but unfortunately, that didn't resolve the issue.

javascript three.js

Answer 1

Answer №1

Have you tried using the <script type="module"> in your code? If yes, then it's important to note that IE 11 does not support this feature. I tested the same geometry_cube example mentioned by Mugen87 and observed that IE does not work with the import method for Three.js as shown below:

<script type="module>
    import * as THREE from '../build/three.module.js';
    var camera, scene, renderer;

This resulted in compatibility issue as seen in the screenshot provided.

Resolution:

To make sure that importing Three.js works on IE, you must utilize the older method like so:

<script src="../build/three.min.js"></script>
<script>
    var camera, scene, renderer;
    // ...

Using this older approach solves the problem! As Three.js gradually transitions to the module technique, you'll notice that the entire threejs examples section won't be compatible with IE 11:

Answer 2

Have you tried using the <script type="module"> in your code? If yes, then it's important to note that IE 11 does not support this feature. I tested the same geometry_cube example mentioned by Mugen87 and observed that IE does not work with the import method for Three.js as shown below:

<script type="module>
    import * as THREE from '../build/three.module.js';
    var camera, scene, renderer;

This resulted in compatibility issue as seen in the screenshot provided.

Resolution:

To make sure that importing Three.js works on IE, you must utilize the older method like so:

<script src="../build/three.min.js"></script>
<script>
    var camera, scene, renderer;
    // ...

Using this older approach solves the problem! As Three.js gradually transitions to the module technique, you'll notice that the entire threejs examples section won't be compatible with IE 11:

The texture loaded by TextureLoader.load() has no defined image in IE11

Answer №1

Resolution:

Similar questions

A more efficient method for passing a function as an argument using the keyword "this"

Creating a unique chrome extension that swaps out HTML and JavaScript components

Updating the value of a Redux-Form Checkbox Field using programming methods

How can you use jQuery to display an image when hovering over text?

Using Javascript to iterate over an array

Can you include both a routerLink and a click event on the same anchor tag?

There appears to be an issue with displaying the graph

Modify a JavaScript object in JSON format using another object as reference

AngularJS and Handlebars (npm)

Tips for saving the status of an accordion controlled by an angular directive

When the button is clicked, the ng-click event will trigger the addClass function, but only on the second click

Ways to retrieve PHP variables using JavaScript from an external file

Setting up a React Package by reinstalling a git repository

Struggling with Rendering Dynamic Components in Vue.js? Let us lend you a helping

Guide to implementing 'active' state in Bootstrap 4 using JavaScript on a basic PHP website

JavaScript library designed for efficient asynchronous communication with servers

Guide to separating the bytes of a number and placing them into an Uint8Array

Error: Attempting to access property 'mouseX' of an undefined object was unsuccessful

What is the process of generating a popup panel without relying on libraries, using JavaScript and CSS?

Generate a mesh representing an airplane, with vertices specifying various hues