如何使用ie11在threejs中加载gltf场景 [英] How to load gltf scene in threejs using ie11
问题描述
我已经完成了一个简单的html来使用three.js及其gltfloader.js加载gltf模型，它在Mozilla上完美运行，但是即使没有错误也没有在ie11上显示.我尝试使用es6-promise pollyfill，但似乎无法正常工作.我需要它才能在Internet Explorer上工作.我将代码放在这里，主要是示例代码中的复制粘贴.
I have done a simple html to load a gltf model using three.js and their gltfloader.js and it works perfectly on Mozilla, but it doesn't show up on ie11 even though it through no errors. I have tried using es6-promise pollyfill but it doesn't seem to work. I need it to work on internet explorer. I leave the code down here, it's mostly a copy-paste from an example code.
<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上显示正常.
EDIT: The box is just a reference to show that only the gltf model is the one not working, the box shows normaly on ie11.
编辑2 : gltf加载器示例从threejs网站上获得的结果在ie11上均不起作用.这是否意味着加载程序与ie11不兼容?
EDIT 2: The gltf loader example from the threejs site doesn't work either on ie11. Does this mean that the loader is not compatible with ie11?
推荐答案
这是我的解决方案:
-
在html中导入ES6支持polyfill
import ES6 support polyfill in html
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
如果您的页面仍未显示gltf模型，则可能需要执行以下操作: 更改GLTFLoader.js中的功能 parse
if your page still doesn't show the gltf model,you may need to do this: change the function parse in GLTFLoader.js
var json = JSON.parse(content)
到
var json = JSON.parse(content.trim())
myBrowser:IE 11.0.9600.17843IS
这篇关于如何使用ie11在threejs中加载gltf场景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
