IE 11无法打开本地three.js文件及示例的解决方法咨询

Hey there, let's work through this IE11 + three.js local server issue—IE11 is definitely the troublemaker here, given everything works fine in modern browsers and online. Here are the most actionable fixes to get your examples running:

1. Fix IE11's Lack of ES6+ Support #

three.js (and its official examples) rely heavily on modern JavaScript features that IE11 doesn't natively support—think arrow functions, let/const, template literals, and more. Even with a local server, IE11 will choke on these syntaxes, leading to a blank screen.

• Use three.js's Legacy Build: Grab the three.legacy.min.js file from three.js's build directory (it's specifically compiled for IE11 compatibility) and replace the <script> reference in your HTML files with this version.
• Add Polyfills & Transpile Code: If you're using custom JS alongside three.js, include polyfills like core-js and regenerator-runtime to add missing APIs. Use Babel to transpile your ES6+ code down to ES5 that IE11 can understand.

2. Correct Local Server MIME Types #

IE11 is extremely strict about MIME types for assets like 3D models (.gltf/.glb) and textures. If your server sends the wrong MIME type for these files, IE11 will silently refuse to load them, resulting in a black screen.

• Python Server Fix: Instead of using the default SimpleHTTPServer, use a custom script to map correct MIME types:

import http.server
import socketserver

PORT = 8000

class CustomHTTPHandler(http.server.SimpleHTTPRequestHandler):
    def end_headers(self):
        # Add critical cross-origin headers
        self.send_header('Cross-Origin-Embedder-Policy', 'require-corp')
        self.send_header('Cross-Origin-Opener-Policy', 'same-origin')
        # Map 3D asset MIME types
        self.extensions_map.update({
            '.gltf': 'model/gltf+json',
            '.glb': 'model/gltf-binary',
            '.bin': 'application/octet-stream'
        })
        super().end_headers()

with socketserver.TCPServer(("", PORT), CustomHTTPHandler) as httpd:
    print(f"Serving at http://localhost:{PORT}")
    httpd.serve_forever()

• Node.js Server Fix: If using http-server, pass MIME type mappings via the command line:

http-server -m "gltf=model/gltf+json,glb=model/gltf-binary,bin=application/octet-stream"

For Express servers, configure the express.static middleware with custom MIME types using the mime-types package.

3. Force IE11 to Use Edge Mode #

IE11 often defaults to "Compatibility View" for local sites, which disables modern web features. You can override this:

• Add this meta tag to the <head> of your HTML files to force IE11 to use its latest rendering engine:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

• Manually verify in IE11's Dev Tools (F12): Go to the Emulation tab, set "Document mode" to Edge (IE11) and "User agent string" to Internet Explorer 11.

4. Check IE11's Console for Specific Errors #

Don't skip this step! IE11's Dev Tools Console (F12 > Console) will tell you exactly what's breaking—whether it's a syntax error, a failed asset load, or a missing API. For example:

• Unexpected token =>: Means you're using arrow functions IE11 doesn't understand (fix with transpilation).
• SEC7117: Network request for 'model.gltf' did not succeed: Points to a MIME type issue (fix with server config above).

5. Ensure Cross-Origin Headers Are Set #

IE11 has strict cross-origin rules for local assets. The custom server script above includes Cross-Origin-Embedder-Policy and Cross-Origin-Opener-Policy headers, which help IE11 load assets correctly without blocking them. Make sure your server sends these headers alongside Access-Control-Allow-Origin: * if needed.

内容的提问来源于stack exchange，提问作者user5515