Cross-browser compatible (Chrome, Internet Explorer, Firefox)

I'm having trouble understanding why this script is not functioning correctly in Internet Explorer, although it works fine in Firefox and Chrome. Whenever I attempt to run the script in IE, I receive an error message stating "ACTIVEX stop script".

Any assistance would be greatly appreciated.

<!DOCTYPE html>
<html>
<head>
  <title>Getting Started with Three.js</title>

  <script type="text/javascript" src="http://www.html5canvastutorials.com/libraries/Three.js"></script>
  <script type="text/javascript">
  window.onload = function() {
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( 800, 600 );
    document.body.appendChild( renderer.domElement );
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(
      35,       // Field of view
      800 / 600,    // Aspect ratio
      0.1,      // Near plane
      10000       // Far plane
    );
    camera.position.set( 15, 10, 10 );
    camera.lookAt( scene.position );
    scene.add( camera );
    var cube = new THREE.Mesh(
      new THREE.CubeGeometry( 5, 5, 5 ),
      new THREE.MeshLambertMaterial( { color: 0xFF0000 } )
    );
    scene.add( cube );
    var light = new THREE.PointLight( 0xFFFF00 );
    light.position.set( 10, 0, 10 );
    scene.add( light );
    renderer.render( scene, camera );
  };
  </script>
</head>
<body></body>

Answer №1

Unfortunately, the Three.js WebGLRenderer is not compatible with Internet Explorer due to a lack of WebGL support.

For a solution,

var renderer = new THREE.CanvasRenderer()

can be used as an alternative.

Answer №2

If you're looking for a more sophisticated solution than the one mentioned above, consider leveraging alteredq and mrdoob's impressive Detector.js script included in the three.js examples. By incorporating code similar to the following, you can default to using WebGLRenderer while falling back to canvas rendering if WebGL is not supported. Additionally, you can use webglEnabled flag to adjust other settings for your renderer later in the code.

var webglEnabled = false;
var webglReq = false;

if (Detector.webgl) {
    renderer = new THREE.WebGLRenderer(
            {
                antialias: true,
                preserveDrawingBuffer: true
            });  // allow screenshot 

    webglEnabled = true; // set flag 
}
else if (webglReq) { Detector.addGetWebGLMessage(); return false; } 
else {
    renderer = new THREE.CanvasRenderer();
}
renderer.setClearColorHex(0x000000, 1);
renderer.setSize(window.innerWidth, window.innerHeight);

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

Looking to locate the child div elements within a parent div

I am having trouble determining the individual lengths of child divs within parent classes that share the same name. For example: <div class="main-div"> <div class="parent"> <div class="child"></div> <div class= ...

Modifying ID styling using JavaScript on Internet Explorer

I need to change the CSS display property from none to block using JavaScript, but only for Internet Explorer. My current code is not working for the ID #backfill-image. <script> function checkForIE() { var userAgent = navigator.userAgent; ...

Using JavaScript to Implement a Scrolling List

Currently, I am diving into the world of coding with HTML, JavaScript, and CSS for a college project. Unfortunately, my instructors aren't providing any assistance, so I'm turning to you for help. I have managed to put together some code to crea ...

Is there a way to customize the outlined color of an input adornment in MUI?

Looking to customize the default blue color in a Form Control outlined variant, but can't figure out how. I was able to do it with a regular TextField, but this one is a bit trickier. <FormControl variant="outlined"> < ...

Using React with TypeScript to ensure that at least one key of a type is not null, even if all keys are optional

Within my Typescript code, I have defined an event type that includes various time parameters: export type EventRecord = { name: string; eta: string | null; assumed_time: string | null; indicated_time: string | null; }; I also have a func ...

AngularJS: $watch event was not fired

Attempting a simple task here. Inside my controller: $scope.testObject = { name : 'john' }; $scope.$watch('$scope.testObject.name', function (e, n, v) { console.log('reached'); }); In my view: <input type ...

guide on utilizing nested loops and arrays in Vue.js

The results returned by the controller query are as follows: date: {2020-09-24: {work_hours: 7}, 2020-09-30: {work_hours: 8}} 2020-09-24: {work_hours: 7} 2020-09-30: {work_hours: 8} Within my Vue component, I am attempting to use ne ...

React.js: Endless rendering occurs when using setState as a callback function, even after props have been destructured

Issue I am facing a problem with my child component that receives button id-name configurations as props. It renders selectable HTML buttons based on these configurations and then returns the selected button's value (id) to the callback function with ...

Attempting to send PHP array to JavaScript

I have spent hours scouring the internet trying to fix my JavaScript code. My goal is to pass an array from PHP to JavaScript using JSON and then make it accessible globally for other functions. However, despite my efforts, I haven't been able to make ...

Tips for incorporating a Forgot/Reset password option into your #Firebase platform

In the project I'm working on, I am utilizing #AngularFire2. My goal is to incorporate a Reset / Forgot password link into the login page. Does anyone have suggestions on how to accomplish this task? I'm looking to get some insights from #AskFi ...

Currently experimenting with jQuery in conjunction with the reddit API to generate individual divs for every post

Issue with displaying post titles, URLs, and permalinks separately. Need them to display together for each post. See the code below: $(document).ready(function() { $.getJSON( "http://www.reddit.com/r/pics.json?jsonp=?", function foo(data) { ...

Should URL parameters be avoided as a method for retrieving data with React Router in a React application?

Within my application, there exists a main page labeled Home that contains a subpage named Posts. The routing structure is as follows: <Route path='/' element={<Home />} /> <Route path='/posts/popular' element={<Post ...

Discovering the value of an object through its prototypes

Is it possible to create a function that can locate the value "5" within an object's prototype? What is the proper algorithm to achieve this? var rex = { "Name": "rex", "Age": 16, } te = { "to": 5, } rex.te = Object.create(te); function findValu ...

Customize specific styles for individual divs one at a time (without the use of jQuery)

Can you assist me with this issue? I am trying to display the <span class="badge badge-light"><i class="fa fa-check-circle"></i></span> tag (initially set to "visibility: hidden") when clicking on a div with the class "role-box". He ...

Using Client-side JavaScript with ASP.NET Postbacks

My client-side JavaScript is set up to populate form fields, but every time the page posts back, the fields get reset. It's frustrating! I thought the field values were stored in the ViewState during the postback. What's going on here? EDIT: I ...

Preventing dynamically generated components from reinitializing upon adding a new object

Within my application, there is a unique feature where components are dynamically generated through a *ngFor loop. Here is an example of how it is implemented: <div *ngFor="let actionCategory of actionCategories | keyvalue"> <h2>{ ...

Protractor: Decrease the magnification

Currently, I am working with protractor and facing the challenge of zooming out to 50%. Despite trying numerous solutions found on StackOverflow, none have successfully resolved the issue. Some attempted solutions include: browser.actions().keyDown(protra ...

Update the content of the document element by assigning it a lengthy string

I'm utilizing JQuery to dynamically assign content to a div element. The content has numerous lines with specific spacing, so this is the approach I am taking: document.getElementById('body').innerHTML = "Front-End Developer: A <br/> ...

When attempting to execute a promise within a test, encountering a 400 error in a NodeJS environment

I recently started using Contentful, a new JavaScript library for creating static websites. My goal is to incorporate it into my Node.js project. To achieve this, I developed an app file called getContent.js: 'use strict'; var contentful = req ...

Where am I going wrong in my attempts to use a callback function?

I am currently attempting to implement a callback function for this particular JavaScript function. function Filtering_GetSite(siteElement) { $.ajax({ type: "POST", url: "samle.asmx/f1", data: "", contentType: "application/json; charset= ...