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>
此代码提供给我：https://i.stack.imgur.com/tlxcV.jpg
但如果我改变：
element.src = "moo.html";
至
element.src = "http://www.google.com";
我得到：https://i.stack.imgur.com/FbnNC.jpg
受此示例启发：http://stemkoski.github.io/Three.js/CSS3D.html
这有可能以某种方式解决这个问题以创建跨域iframe吗？
是的，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验证器"和第一个选项工作得很好。
在您确定它是有效的之后，将它带到JS场景中，并将其封装在全局变量标记中。从那时起，你可以参考上面的Fiddle来查看其他内容。