Error encountered while trying to run a three.js example with iewebgl

Question

Error encountered while trying to run a three.js example with iewebgl

I'm attempting to utilize the iewebgl and encountering difficulties while trying to run an example from three.js, specifically the webgl_loader_obj. Upon execution, I am facing the following error:

SCRIPT445: Object doesn't support this action
iewebgl.html, line 134 character 5

This error is pointing to the following line:

// texture
var manager = new THREE.LoadingManager();  <!-- here  -->
manager.onProgress = function ( item, loaded, total ) {

    console.log( item, loaded, total );
};

I also attempted to comment out the texture and model sections and loading the object without the manager, but encountered a different error:

SCRIPT445: Object doesn't support this action
OBJLoader.js, line 19 character 3

This error points to the following line:

THREE.OBJLoader.prototype = {

constructor: THREE.OBJLoader,

load: function ( url, onLoad, onProgress, onError ) {

    var scope = this;

    var loader = new THREE.XHRLoader( scope.manager );  <!-- here-- >
    loader.setCrossOrigin( this.crossOrigin );

I attempted both creating canvas and acquiring WebGL context using JavaScript, as well as creating WebGL context with helper.

I'm utilizing ie 10 with r.46 of three.js. A switch to r.61 of three.js triggers the following exception:

SCRIPT5007: Unable to get property 'getExtension' of undefined or null reference 
three.min.js, line 8322 character 2

This corresponds to:

} catch (Zb) {
    console.error(Zb)
}
Na = j.getExtension("OES_texture_float");  <!-- here -- >
j.getExtension("OES_texture_float_linear");
va = j.getExtension("OES_standard_derivatives");

Any insights into what might be causing this issue?

javascript internet-explorer three.js webgl compatibility

Answer 1

Answer №1

By following the example of Creating canvas and getting WebGL context from JavaScript, I successfully resolved my issue.

<div id="container"> 
    <script id="WebGLCanvasCreationScript" type="text/javascript">WebGLHelper.CreateGLCanvasInline('renderCanvas', onLoad)</script>
</div>

In order to fix the problem, I placed both the init() and animate() calls within a specific block while excluding global variables like var container, stats.

var camera, cameraTarget, scene, renderer;
function onLoad() {
    <!-- require(["js/Three.js"], function () { -->
    init();
    animate();
    <!-- }); -->
}

Although I did not use the require code myself, I included it for anyone who may encounter a similar issue and find it necessary.

Lastly, I made changes to the render code as shown below (original code is left commented out):

var externalCanvas = document.getElementById('renderCanvas');
renderer = new THREE.WebGLRenderer({ 'canvas': externalCanvas, 'clearColor': 0xffffff });
<!-- renderer = new THREE.WebGLRenderer(); -->
<!-- renderer = new THREE.WebGLRenderer( { antialias: true, alpha: false } ); -->

Answer 2

By following the example of Creating canvas and getting WebGL context from JavaScript, I successfully resolved my issue.

<div id="container"> 
    <script id="WebGLCanvasCreationScript" type="text/javascript">WebGLHelper.CreateGLCanvasInline('renderCanvas', onLoad)</script>
</div>

In order to fix the problem, I placed both the init() and animate() calls within a specific block while excluding global variables like var container, stats.

var camera, cameraTarget, scene, renderer;
function onLoad() {
    <!-- require(["js/Three.js"], function () { -->
    init();
    animate();
    <!-- }); -->
}

Although I did not use the require code myself, I included it for anyone who may encounter a similar issue and find it necessary.

Lastly, I made changes to the render code as shown below (original code is left commented out):

var externalCanvas = document.getElementById('renderCanvas');
renderer = new THREE.WebGLRenderer({ 'canvas': externalCanvas, 'clearColor': 0xffffff });
<!-- renderer = new THREE.WebGLRenderer(); -->
<!-- renderer = new THREE.WebGLRenderer( { antialias: true, alpha: false } ); -->

Answer 3

Answer №2

If you opt for the unminified version of three.js, the issue might become apparent when the _gl object (j in the minified version) turns out to be null. It seems like three.js will throw an exception, log the "Error creating WebGL context" message, and then attempt to utilize the _gl object. :)

Have you noticed this message in your console? Below is the unminified source where I suspect the error arises.

function initGL() {

    try {

        var attributes = {
            alpha: _alpha,
            premultipliedAlpha: _premultipliedAlpha,
            antialias: _antialias,
            stencil: _stencil,
            preserveDrawingBuffer: _preserveDrawingBuffer
        };

        _gl = _canvas.getContext('webgl', attributes) || _canvas.getContext('experimental-webgl', attributes);

        if (_gl === null) {

            throw 'Error creating WebGL context.';

        }

    } catch (error) {

        console.error(error);

    }

    _glExtensionTextureFloat = _gl.getExtension('OES_texture_float');
    _glExtensionTextureFloatLinear = _gl.getExtension('OES_texture_float_linear');
    _glExtensionStandardDerivatives = _gl.getExtension('OES_standard_derivatives');

Does your Internet Explorer support WebGL? Have other WebGL tests been successful? I don't have IE Win8.1 preview, but I am interested to know whether three.js functions with it.

Answer 4

If you opt for the unminified version of three.js, the issue might become apparent when the _gl object (j in the minified version) turns out to be null. It seems like three.js will throw an exception, log the "Error creating WebGL context" message, and then attempt to utilize the _gl object. :)

Have you noticed this message in your console? Below is the unminified source where I suspect the error arises.

function initGL() {

    try {

        var attributes = {
            alpha: _alpha,
            premultipliedAlpha: _premultipliedAlpha,
            antialias: _antialias,
            stencil: _stencil,
            preserveDrawingBuffer: _preserveDrawingBuffer
        };

        _gl = _canvas.getContext('webgl', attributes) || _canvas.getContext('experimental-webgl', attributes);

        if (_gl === null) {

            throw 'Error creating WebGL context.';

        }

    } catch (error) {

        console.error(error);

    }

    _glExtensionTextureFloat = _gl.getExtension('OES_texture_float');
    _glExtensionTextureFloatLinear = _gl.getExtension('OES_texture_float_linear');
    _glExtensionStandardDerivatives = _gl.getExtension('OES_standard_derivatives');

Does your Internet Explorer support WebGL? Have other WebGL tests been successful? I don't have IE Win8.1 preview, but I am interested to know whether three.js functions with it.

Error encountered while trying to run a three.js example with iewebgl

Answer №1

Answer №2

Similar questions

Change the appearance of the page when it is being displayed within an iframe using CSS

In JavaScript, an HTTP request file includes a JavaScript variable

Refresh the information displayed in the open Google Maps Infowindow

What approach does JavaScript take when encountering a value that is undefined?

React encountered an error: Unable to destructure the property 'id' of '_ref' as it has been defined

Three.js globe experiencing issues with splines arc functionality

Error: The 'length' property cannot be searched for using the 'in' operator

Scale.set not only affects the size of the node it is applied to, but also changes the size of its children

I seem to be having an issue with the decimal point on my calculator - I only want to see one dot

Triggering transitionend event once with an added if condition

Safari on iOS9 is inaccurately calculating the total sum

What is the best way to create a clickable table from a nested array of objects?

Which is better: specifying a name in window.open() or using replace?

Learn the process of transmitting JSON data from a server-side (nodejs) to the client-side using Ajax

The directive attribute in AngularJS fails to connect to the directive scope

A bug encountered with AngularJS and dojox.charting: Error message 'nodeType' of null

Using HTML and CSS to stack a DIV on top of another using z-index

AngularJS: enhancing $http with custom functionality

Navigating through JSON arrays can be achieved by utilizing iteration techniques

The error "TypeError: ollama.chat is not a function" has occurred when trying to use the ollama module in