我正在尝试使用CSS3DRenderer将网页嵌入到我的threeJS场景中。对于同样的我,我遵循了几个教程,但到目前为止没有运气

时间:2017-08-18 08:04:26

标签: three.js

以下是我的代码,ThreeJS场景,我已经检查并重新检查了几个,并且没有语法错误。但到目前为止没有运气。有时它在导入的脚本中确实提供了很少的运行时错误,即#34;无法获得属性' center'未定义或空引用"

请帮助我帮助我,因为我将在下周准备这个项目。

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

  <script>

      var controls, camera, scene, cssScene, glRenderer, cssRenderer;

      function createGLRenderer()
      {
        var glRenderer = new THREE.WebGLRenderer({ alpha:true, antialias:true });

        glRenderer.setClearColor("rgb(255, 255, 230)");
        glRenderer.setPixelRatio(window.devicePixelRatio);
        glRenderer.setSize(window.innerWidth, window.innerHeight);

        glRenderer.domElement.style.position = 'absolute';
        glRenderer.domElement.style.zIndex = 1;
        glRenderer.domElement.style.top = 0;

        return glRenderer;
      }


      function createCSSRenderer()
      {
        var cssRenderer = new THREE.CSS3DRenderer();

        cssRenderer.setSize(window.innerWidth, window.innerHeight);

        cssRenderer.domElement.style.position = 'absolute';
        glRenderer.domElement.style.zIndex = 0;
        cssRenderer.domElement.style.top = 0;

        return cssRenderer;
      }


      function createPlane(w, h, position, rotation)
      {
        var material1 = new THREE.MeshBasicMaterial({ color: "rgb(255, 0, 0)", opacity: 0.0, side: THREE.DoubleSide });

        var geometry1 = new THREE.PlaneGeometry(w, h);

        var mesh1 = new THREE.Mesh(material1, geometry1);

        mesh1.position.x = position.x;
        mesh1.position.y = position.y;
        mesh1.position.z = position.z;

        mesh1.rotation.x = rotation.x;
        mesh1.rotation.y = rotation.y;
        mesh1.rotation.z = rotation.z;

        return mesh1;
      }


      function createCssObject(w, h, position, rotation, url)
      {
        var html = [

          '<div style = "width:' + w + 'px; height:' + h + 'px;">',

          '<iframe src = "' + url + '" width = "' + w + '" height = "' + h + '">',

          '</iframe>',

          '</div>'

        ].join('\n');


        var div = document.createElement('div');

        $(div).html(html);

        var CssObject = new THREE.CSS3DObject(div);

        CssObject.position.x = position.x;
        CssObject.position.y = position.y;
        CssObject.position.z = position.z;

        CssObject.rotation.x = rotation.x;
        CssObject.rotation.y = rotation.y;
        CssObject.rotation.z = rotation.z;

        return CssObject;
      }


      function create3Dpage(w, h, position, rotation, url)
      {
        var plane = createPlane(w, h, position, rotation);

        scene.add(plane);


        var cssObject = createCssObject(w, h, position, rotation, url);

        cssScene.add(cssObject);
      }


      function initialize()
      {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);

              camera.position.set(0, 100, 3000);

        //controls = new THREE.TrackballControls(camera);

        glRenderer = createGLRenderer();
        cssRenderer = createCSSRenderer();

        document.body.appendChild(cssRenderer.domElement);
        cssRenderer.domElement.appendChild(glRenderer.domElement);

        scene = new THREE.Scene();
        cssScene = new THREE.Scene();

        var alight = new THREE.AmbientLight("rgb(255, 255, 255)",0.5);
              scene.add(alight);

        create3Dpage(1000, 1000, new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 0), 'http://adndevblog.typepad.com/cloud_and_mobile');

        Render();
      }


      function Render()
            {
        //controls.update();

                  glRenderer.render(scene, camera);

        cssRenderer.render(cssScene, camera);

                  requestAnimationFrame(Render);
            }

      $(document ).ready(function() {

        initialize();

      });

  </script>

0 个答案:

没有答案