在 Three.js 中的 CSS3DObject 中创建跨源 HTML iframe 会出错答案

【问题标题】：Creating cross origin HTML iframe inside CSS3DObject in Three.js gives error在 Three.js 中的 CSS3DObject 中创建跨源 HTML iframe 会出错
【发布时间】：2014-03-11 15:03:39
【问题描述】：

index.html：

<!doctype html>
<html lang="en">
<body>

<script src="js/Three.js"></script>
<script src="js/CSS3DRenderer2.js"></script>
<script src="js/THREEx.WindowResize.js"></script>


<div id="ThreeJS" style="position: absolute; left: 0px; top: 0px"></div>
<script>
    var container, scene, camera, renderer, controls, stats;
    var rendererCSS;

    init();
    animate();

    function init() {
        scene = new THREE.Scene();
        var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
        var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
        camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
        scene.add(camera);
        camera.position.set(0, 150, 400);
        camera.lookAt(scene.position);

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
        container = document.getElementById('ThreeJS');
        container.appendChild(renderer.domElement);

        var planeMaterial = new THREE.MeshBasicMaterial({
            color : 0xFFFFFF,
            side : THREE.DoubleSide
        });

        var planeWidth = 360;
        var planeHeight = 120;
        var planeGeometry = new THREE.PlaneGeometry(planeWidth, planeHeight);
        var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
        planeMesh.position.y += 50;
        scene.add(planeMesh);


        cssScene = new THREE.Scene();
        var element = document.createElement('iframe')
        element.src = "moo.html";
        var elementWidth = 1024;
        // force iframe to have same relative dimensions as planeGeometry
        var aspectRatio = planeHeight / planeWidth;
        var elementHeight = elementWidth * aspectRatio;
        element.style.width  = elementWidth + "px";
        element.style.height = elementHeight + "px";

        var cssObject = new THREE.CSS3DObject(element);
        cssObject.position  = planeMesh.position;
        cssObject.rotation  = planeMesh.rotation;
        var percentBorder = 0.05;
        cssObject.scale.x /= (1 + percentBorder) * (elementWidth / planeWidth);
        cssObject.scale.y /= (1 + percentBorder) * (elementWidth / planeWidth);
        cssScene.add(cssObject);

        rendererCSS = new THREE.CSS3DRenderer();
        rendererCSS.setSize(window.innerWidth, window.innerHeight );
        document.body.appendChild(rendererCSS.domElement);

    }

    function animate() {
        requestAnimationFrame(animate);
        render();
    }

    function render() {
        rendererCSS.render(cssScene, camera);
        renderer.render(scene, camera);
    }
</script>

</body>
</html>

moo.html:

<!DOCTYPE html>
<html>
<body>
<h1>hello world!</h1>
</body>
</html>

这段代码给了我：http://i.imgur.com/nP2UYAL.jpg

但如果我改变：

 element.src = "moo.html";

到

 element.src = "http://www.google.com";

我得到：http://i.imgur.com/gr9GENn.jpg

受此示例启发：http://stemkoski.github.io/Three.js/CSS3D.html

是否有可能以某种方式解决这个问题以创建跨域 iframe？

【问题讨论】：

标签： javascript html css three.js cross-domain

【解决方案1】：

是的，iFrame 解决方案是可能的。但是，您应该考虑尝试一种替代方法，它比在 THREEJS 中绕过 iFrame 更快、更有效。

您需要在本地主机（或实际的开发服务器）上设置服务器才能看到成功的结果。话虽如此，我用服务器上的工作代码制作了一个 JSFIDDLE。

链接： http://jsfiddle.net/vnjn6mnL/19/

这个想法很简单。从有效的 JSON 对象中提取。甚至不用费心用 jQuery 从远程文件解析（当然你可以）。

然后运行一个 for 循环，遍历 JSON 对象：

for (var i = 0; i < json.projectData.length; i ++)

上面的代码在小提琴的第 125 行。循环下面的部分展示了如何从 JSON 对象中拉取：

    // Individual Element Creation
    var element = document.createElement( 'div' );
        element.className = 'element';

    // Individual Element Picture Creation
    var logo = document.createElement( 'div' );
        logo.className = 'logo';
        logo.innerHTML = "<img src='" +json.projectData[i].projectLogo + "'>";                  

            element.appendChild( logo );

使用 JSON 对象可以让您更灵活地呈现任何数据。图片之类的东西相当简单，因为您实际上是在直接使用 CSS。

如果 JSON 对象看起来令人生畏，您可能会觉得有用的工作流程如下：

使用：http://beta.json-generator.com/JmXmG79 以编程方式生成 JSON 对象。该链接将带您了解我在为示例生成数据时使用的确切逻辑。

为确保您使用的是有效的 JSON 对象，请使用在线 JSON linter。谷歌“JSON Validator”和第一个选项效果很好。

确定有效后，将其带入您的 JS 场景中，并用全局变量标签将其包装起来。从那时起，您可以参考上面的 Fiddle 来查看其他内容。

【讨论】：