多平台(Chrome,IE,Firefox)

时间:2012-06-28 13:32:56

标签: javascript internet-explorer activex html5-canvas three.js

我不明白为什么这个脚本在IE中不起作用,而它适用于Firefox和Chrome。当我尝试在IE中使用此脚本时,我收到此消息“ACTIVEX stop script”。

请帮帮我。

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

2 个答案:

答案 0 :(得分:2)

Three.js WebGLRenderer在IE中不起作用(没有WebGL支持)

var renderer = new THREE.CanvasRenderer()

代替

答案 1 :(得分:2)

作为上述非常简单的解决方案的替代方案,您可以使用 Detector.js script 中包含的changedq和mrdoob的 examples for three.js 。如果使用如下代码,则可以使用WebGLRenderer作为默认值,仅在WebGL不可用时才使用canvas。您也可以使用webglEnabled之类的标志,以便稍后在代码中根据渲染器设置其他选项。

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