2

我做了一个简单的 html 来使用 three.js 和他们的 gltfloader.js 加载一个 gltf 模型，它在 Mozilla 上完美运行，但它没有出现在 ie11 上，即使它没有错误。我尝试过使用 es6-promise pollyfill，但它似乎不起作用。我需要它在 Internet Explorer 上工作。我将代码留在这里，它主要是示例代码的复制粘贴。

    <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;

                scene.background = new THREE.Color( 0xefe3a7 );
                camera.position.z = 5;
                controls.update();

                var geometry = new THREE.BoxGeometry( 1, 1, 1 );
                var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
                var cube = new THREE.Mesh( geometry, material );
                scene.add( cube );

                var animate = function () {
                    requestAnimationFrame( animate );

                    renderer.render( scene, camera );
                };

                    light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 );
                    light.position.set( 0, 1, 0 );
                    scene.add( light );

                // Instantiate a loader
                var loader = new THREE.GLTFLoader();


                // Load a glTF resource
                loader.load(
                    // resource URL
                    'DUCK/Duck.gltf',
                    // called when the resource is loaded
                    function ( gltf ) {

                        scene.add( gltf.scene );

                        gltf.animations; // Array<THREE.AnimationClip>
                        gltf.scene; // THREE.Scene
                        gltf.scenes; // Array<THREE.Scene>
                        gltf.cameras; // Array<THREE.Camera>
                        gltf.asset; // Object

                    },
                    // called while loading is progressing
                    function ( xhr ) {

                        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

                    },
                    // called when loading has errors
                    function ( error ) {

                        console.log( 'An error happened' );

                    }

                );
                animate();
            </script>
        </body>
    </html>

编辑：该框只是一个参考，表明只有 gltf 模型不起作用，该框在 ie11 上正常显示。

编辑 2：threejs 站点的gltf 加载器示例在 ie11 上也不起作用。这是否意味着loader不兼容ie11？

4

1 回答 1

1

这是我的解决方案：

  1. 在 html 中导入 ES6 支持 polyfill

    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

  2. 如果您的页面仍然没有显示 gltf 模型，您可能需要这样做：更改GLTFLoader.js 中的函数解析

    var json = JSON.parse(content)

    至

    var json = JSON.parse(content.trim())

    我的浏览器：IE 11.0.9600.17843IS

于 2019-04-12T03:00:26.667 回答