0

この小さなテスト スクリプトを以下に含めます。Chrome では正常に動作しますが、IE10 では動作しません。IE10 ではきれいな白い画面が表示されます。IE10 がヒントを得られるように meta-equiv を入れてみましたが、(どちらのブラウザーでも) 何も変わりませんでした。助けてください。 

<!-- language: lang-js -->
<!DOCTYPE HTML>
<html> 
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="three.min.js"></script>
    <script defer="defer">
      // http://www.aerotwist.com/tutorials/getting-started-with-three-js/
      var cubes = [];
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // camera
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000);
      camera.position.z = 800;

      // scene
      var scene = new THREE.Scene();

      // material
      var phongMaterial = new THREE.MeshPhongMaterial({ambient: 0x555555, 
                                                        color: 0x555555, 
                                                        specular: 0xffffff,
                                                        shininess: 50,
                                                        side: THREE.FrontSide,
                                                        shading: THREE.SmoothShading});
      var phongBack = new THREE.MeshPhongMaterial({ambient: 0x555555, 
                                                        color: 0x995555, 
                                                        specular: 0xffffff,
                                                        shininess: 50,
                                                        side: THREE.BackSide,
                                                        shading: THREE.SmoothShading});

      var materials = [phongMaterial, phongBack];
      // cube
      //var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), material);
      var geom = new THREE.Geometry();
      var a = 100;
      var b = 100;
      var c = 300;
      var geom = new THREE.Geometry();
      var halfPi = (Math.PI / 2.0);
      var u = -halfPi;
      var uInc = Math.PI / 200.0;
      var v = - Math.PI;
      var vInc = uInc * 2.0;

      var vertexNdx = 0;
      var vs = [];
            var on = true;
      while (u < halfPi) {
        var oneLine = [];
        vs.push(oneLine);
        while (v < Math.PI) {
          var x = a * Math.cos(u) * Math.cos(v);
          var y = b * Math.cos(u) * Math.sin(v);
          var z = c * Math.sin(v) * Math.sin(u);

          x += Math.random();
          y += Math.random();
          z += Math.random();

          var v1 = new THREE.Vector3(x, y, z);
          geom.vertices.push(v1);
          oneLine.push(vertexNdx++);

                    if (on)
                    {
                        if (vs.length > 1 && oneLine.length > 1)
                        {
                            var uNdx = vs.length - 1;
                            var vNdx = oneLine.length - 1;
                            geom.faces.push(new THREE.Face3(vs[uNdx - 1][vNdx - 1],
                                                                                            vs[uNdx - 1][vNdx],
                                                                                            vs[uNdx][vNdx - 1]));
                            geom.faces.push(new THREE.Face3(vs[uNdx][vNdx - 1],
                                                                                            vs[uNdx - 1][vNdx],
                                                                                            vs[uNdx][vNdx]));
                        }
                        //on = false;
                    }
                    else
                    {
                      on = true;
                    }
          v += vInc;
        }
        v = -Math.PI;
        u += uInc;
      }
            var oneLine = vs[0];
            var uNdx = vs.length - 1;
            for (var vNdx = 1; vNdx < oneLine.length; vNdx++)
            {
                geom.faces.push(new THREE.Face3(vs[0][vNdx - 1],
                                                                                vs[0][vNdx],
                                                                                vs[uNdx][vNdx - 1]));
                geom.faces.push(new THREE.Face3(vs[uNdx][vNdx - 1],
                                                                                vs[0][vNdx],
                                                                                vs[uNdx][vNdx]));
            }
      geom.computeFaceNormals();
      var cube = new THREE.SceneUtils.createMultiMaterialObject(geom, materials);
      cube.overdraw = true;
      cube.rotation.x = Math.PI * 0.1;
      scene.add(cube);

      cubes.push(cube);

            var geom = new THREE.Geometry();
      var a = 100;
      var b = 100;
      var c = 300;
      var geom = new THREE.Geometry();
      var halfPi = (Math.PI / 2.0);
      var u = -halfPi;
      var uInc = Math.PI / 200.0;
      var v = - Math.PI;
      var vInc = uInc * 2.0;

      var vertexNdx = 0;
      var vs = [];
            var on = true;
      while (u < halfPi) {
        var oneLine = [];
        vs.push(oneLine);
        var xRand = Math.random();
        while (v < Math.PI) {
          var x = a * Math.cos(u) * Math.cos(v);
          var y = b * Math.cos(u) * Math.sin(v);
          var z = c * Math.sin(v) * Math.sin(u);

          x += xRand;
          y += Math.random();
          z += Math.random();

          var v1 = new THREE.Vector3(x, y, z);
          geom.vertices.push(v1);
          oneLine.push(vertexNdx++);

                    if (on)
                    {
                        if (vs.length > 1 && oneLine.length > 1)
                        {
                            var uNdx = vs.length - 1;
                            var vNdx = oneLine.length - 1;
                            geom.faces.push(new THREE.Face3(vs[uNdx - 1][vNdx - 1],
                                                                                            vs[uNdx - 1][vNdx],
                                                                                            vs[uNdx][vNdx - 1]));
                            geom.faces.push(new THREE.Face3(vs[uNdx][vNdx - 1],
                                                                                            vs[uNdx - 1][vNdx],
                                                                                            vs[uNdx][vNdx]));
                        }
                        //on = false;
                    }
                    else
                    {
                      on = true;
                    }
          v += vInc;
        }
        v = -Math.PI;
        u += uInc;
      }
            var oneLine = vs[0];
            var uNdx = vs.length - 1;
            for (var vNdx = 1; vNdx < oneLine.length; vNdx++)
            {
                geom.faces.push(new THREE.Face3(vs[0][vNdx - 1],
                                                                                vs[0][vNdx],
                                                                                vs[uNdx][vNdx - 1]));
                geom.faces.push(new THREE.Face3(vs[uNdx][vNdx - 1],
                                                                                vs[0][vNdx],
                                                                                vs[uNdx][vNdx]));
            }
      geom.applyMatrix(new THREE.Matrix4().translate(new THREE.Vector3(200, 0, 0)));
      geom.computeFaceNormals();
      var cube = new THREE.SceneUtils.createMultiMaterialObject(geom, materials);
      cube.overdraw = true;
      cube.rotation.x = Math.PI * 0.1;
      scene.add(cube);

      cubes.push(cube);

      var geom = new THREE.Geometry();
      var a = 100;
      var b = 100;
      var c = 300;
      var geom = new THREE.Geometry();
      var halfPi = (Math.PI / 2.0);
      var u = -halfPi;
      var uInc = Math.PI / 200.0;
      var v = - Math.PI;
      var vInc = uInc * 2.0;

      var vertexNdx = 0;
      var vs = [];
            var on = true;
      while (u < halfPi) {
        var oneLine = [];
        vs.push(oneLine);
        var yRand = Math.random();
        while (v < Math.PI) {
          var x = a * Math.cos(u) * Math.cos(v);
          var y = b * Math.cos(u) * Math.sin(v);
          var z = c * Math.sin(v) * Math.sin(u);

          x += Math.random();
          y += yRand;
          z += Math.random();

          var v1 = new THREE.Vector3(x, y, z);
          geom.vertices.push(v1);
          oneLine.push(vertexNdx++);

                    if (on)
                    {
                        if (vs.length > 1 && oneLine.length > 1)
                        {
                            var uNdx = vs.length - 1;
                            var vNdx = oneLine.length - 1;
                            geom.faces.push(new THREE.Face3(vs[uNdx - 1][vNdx - 1],
                                                                                            vs[uNdx - 1][vNdx],
                                                                                            vs[uNdx][vNdx - 1]));
                            geom.faces.push(new THREE.Face3(vs[uNdx][vNdx - 1],
                                                                                            vs[uNdx - 1][vNdx],
                                                                                            vs[uNdx][vNdx]));
                        }
                        //on = false;
                    }
                    else
                    {
                      on = true;
                    }
          v += vInc;
        }
        v = -Math.PI;
        u += uInc;
      }
            var oneLine = vs[0];
            var uNdx = vs.length - 1;
            for (var vNdx = 1; vNdx < oneLine.length; vNdx++)
            {
                geom.faces.push(new THREE.Face3(vs[0][vNdx - 1],
                                                                                vs[0][vNdx],
                                                                                vs[uNdx][vNdx - 1]));
                geom.faces.push(new THREE.Face3(vs[uNdx][vNdx - 1],
                                                                                vs[0][vNdx],
                                                                                vs[uNdx][vNdx]));
            }
      geom.applyMatrix(new THREE.Matrix4().translate(new THREE.Vector3(-200, 0, 0)));
      geom.computeFaceNormals();
      var cube = new THREE.SceneUtils.createMultiMaterialObject(geom, materials);
      cube.overdraw = true;
      cube.rotation.x = Math.PI * 0.1;
      scene.add(cube);

      cubes.push(cube);

      // add subtle ambient lighting
      var ambientLight = new THREE.AmbientLight(0xdddddd);
      scene.add(ambientLight);

      // directional lighting
      var directionalLight = new THREE.DirectionalLight(0xffffff);
      directionalLight.position.set(1, 1, 1).normalize();
      scene.add(directionalLight);

      var screenW = window.innerWidth;
      var screenH = window.innerHeight;
      var spdx = 0, spdy = 0, mouseX = 0, mouseY = 0, mouseDown = false;
      document.addEventListener('mousemove', function(event) {
        mouseX = event.clientX;
        mouseY = event.clientY;
      }, false);
      document.body.addEventListener('mousedown', function(event) {
        mouseDown = true;
      }, false);
      document.body.addEventListener('mouseup', function(event) {
        mouseDown = false;
      }, false);
      function animate() {
        spdy = (screenH / 2 - mouseY) / 40;
        spdx = (screenW / 2 - mouseX) / 40;
        if (mouseDown) {
          for (var loop = 0; loop < cubes.length; loop++) {
            var cube = cubes[loop];
            cube.rotation.x = spdy;
            cube.rotation.y = spdx;
          }
        }
        renderer.render(scene, camera);
        requestAnimationFrame(function(){
            animate();
        });
      };
      // start animation
      animate();
    </script>
  </body>
</html>

もしよろしければ、私の小さなプレイ テスト コードを自由に盗んでください。カッコいいの作ったら見せてね！数学的に作られた有機的な形を探しています。

4

1 に答える 1

2

IE10 は WebGL をサポートしていません。WebGLRendererからに切り替えるだけでコードが機能すると思いますCanvasRendererが、照明はそれほど正確ではありません。

于 2013-09-14T22:37:22.323 に答える