Question

<!DOCTYPE html>
<html>

<head>
  <title>three.js css3d - youtube</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <style>
    body {
      background-color: #ffffff;
      margin: 0;
      overflow: hidden;
    }
    
    #blocker {
      /* background-color: rgba(255, 0, 0, 0.5); */
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
  <script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>
  <script src="https://rawgit.com/mrdoob/three.js/master/examples/js/renderers/CSS3DRenderer.js"></script>

  <div id="container"></div>
  <div id="blocker"></div>

  <script>
    var camera, scene, renderer, glrenderer, glscene;

    function createGlRenderer() {
      var container = document.getElementById('container');
      glrenderer = new THREE.WebGLRenderer({
        antialias: false
      });
      glrenderer.setClearColor(0xffffff);
      glrenderer.setPixelRatio(window.devicePixelRatio);
      glrenderer.setSize(window.innerWidth, window.innerHeight);
      glrenderer.domElement.style.position = 'absolute';
      glrenderer.domElement.style.top = 0;
      container.appendChild(glrenderer.domElement);
      return glrenderer;
    }

    function createCssrenderer() {
      var container = document.getElementById('container');
      var renderer = new THREE.CSS3DRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.domElement.style.position = 'absolute';
      // renderer.domElement.style.zIndex = 1;
      renderer.domElement.style.top = 0;
      container.appendChild(renderer.domElement);
      return renderer;
    }

    function createPlane(w, h, position, rotation) {
      var material = new THREE.MeshBasicMaterial({
        color: 0x000000,
        opacity: 0.0,
        side: THREE.DoubleSide
      });
      var geometry = new THREE.PlaneGeometry(w, h);
      var mesh = new THREE.Mesh(geometry, material);
      mesh.position.x = position.x;
      mesh.position.y = position.y;
      mesh.position.z = position.z;
      mesh.rotation.x = rotation.x;
      mesh.rotation.y = rotation.y;
      mesh.rotation.z = rotation.z;
      return mesh;
    }


    var Element = function(id, w, h, position, rotation, myfunc) {
      var html = [
        '<div id="blocker" style="width:' + w + 'px; height:' + h + 'px;">',
        '<iframe src="' + id + '" width="' + w + '" height="' + h + '" onclick="' + myfunc + '">',
        '</iframe>',
        '</div>'
      ].join('\n');
      var div = document.createElement('div');
      $(div).html(html);
      div.style.width = w;
      div.style.height = h;
      //div.style.backgroundColor = '#000';
      var object = new THREE.CSS3DObject(div);
      object.position.x = position.x;
      object.position.y = position.y;
      object.position.z = position.z;
      object.rotation.x = rotation.x;
      object.rotation.y = rotation.y;
      object.rotation.z = rotation.z;
      return object;
      var plane = createPlane(
        w, h,
        position,
        rotation);
      glscene.add(plane);
    }

    function myfunctiona() {
      alert("I am an alert box!");
    }


    init();
    animate();

    function init() {

      glscene = new THREE.Scene();
      glrenderer = createGlRenderer();
      scene = new THREE.Scene();
      renderer = createCssrenderer();
      camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
      camera.position.set(0, 100, 3000);
      var ambientLight = new THREE.AmbientLight(0xffffff, 1);
      glscene.add(ambientLight);
      var directionalLight = new THREE.DirectionalLight(0xffffff);
      directionalLight.position.set(-.5, .5, -1.5).normalize();
      glscene.add(directionalLight);

      var group = new THREE.Group();
      group.add(new Element('http://adndevblog.typepad.com/cloud_and_mobile', 1000, 1000, new THREE.Vector3(-1000, 0, 100), new THREE.Vector3(0, -50 * Math.PI / 180, 0), myfunctiona()));
      group.add(new Element('http://adndevblog.typepad.com/cloud_and_mobile', 900, 1000, new THREE.Vector3(0, 0, 500), new THREE.Vector3(0, 0, 0)));
      group.add(new Element('http://adndevblog.typepad.com/cloud_and_mobile', 1000, 1000, new THREE.Vector3(1000, 0, 100), new THREE.Vector3(0, 50 * Math.PI / 180, 0)));
      scene.add(group);
      controls = new THREE.TrackballControls(camera);
      controls.rotateSpeed = 4;
      window.addEventListener('resize', onWindowResize, false);
      // Block iframe events when dragging camera
      var blocker = document.getElementById('blocker');
      blocker.style.display = 'none';
      document.addEventListener('mousedown', function() {
        blocker.style.display = '';
      });
      document.addEventListener('mouseup', function() {
        blocker.style.display = 'none';
      });
    }



    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      glrenderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {
      requestAnimationFrame(animate);
      controls.update();
      renderer.render(scene, camera);
      glrenderer.render(glscene, camera);
    }

    $(document).ready(function() {
      initialize();

    });
  </script>
</body>

</html>

每当点击iframe时，我都会触发一个javascript函数。但是，javascript警报正在加载页面本身，而不是在单击iframe时。 iframe嵌入在three.js场景中。谁能告诉我我的代码有什么问题。

在每个iframe点击上获取不同的提醒框

0 个答案: