在我对 three.js 库的实验中，我设法设置了两个不同的场景（一个是画布渲染的，一个是 css3d 渲染的），用相同的透视相机显示。
注意：我使用的是 IE 10（没办法解决这个问题）。
虽然画布渲染场景的对象被大量旋转和移动，但 css3d-scene 仅包含单个 DIV 元素，其中包含包含图像的子 DIV。无论窗口大小如何，css3d 渲染的 DIV 都应该（几乎）全屏显示。由于使用 DIV 的 z 轴坐标不会使其看起来更大，因此缩放可以使其更大。但是，对于不同的窗口大小，不同的缩放因子将提供最佳结果。
但是，我发现我也可以操纵原始 div 的高度和宽度来使渲染的对象变大或变小。由于可以像 div 一样简单地操作其中的图像，因此我更喜欢这种方法而不是缩放。
但我缺乏计算正确像素数量的能力，以便 DIV 在场景中全屏呈现。
这是我到目前为止得到的...
<style>
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
.element {
width: 1000px;
height: 750px;
box-shadow: 0px 0px 20px rgba(0,255,255,0.5);
border: 1px solid rgba(127,255,255,0.25);
cursor: default;
}
.element .profile {
position: absolute;
top: 2.5%;
left: 2.5%;
width: 95%;
height: 95%;
background-image:url('profile.jpg');
background-size: 100% auto;
color: rgba(127,255,255,0.75);
}
</style>
...
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.z = 1000;
... initialize a lot of particles (that work just fine in their scene with the camera setting above)
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0x000000, 1);
renderer.setSize( window.innerWidth, window.innerHeight );
...
// now: create the css rendered scene, create and configure DIV, add the DIV to scene
var element = document.createElement( 'div' );
element.className = 'element';
element.style.width = window.innerWidth + 'px';
element.style.height = window.innerHeight + 'px';
element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
var profile = document.createElement( 'div' );
profile.className = 'profile';
profile.textContent = "";
if (imgArray != undefined) {
if (imgArray.length > 0) {
profile.style.backgroundImage = 'url(' + imgNameArray[0] + ')';
profile.style.backgroundSize = "100% auto";
}
}
element.appendChild( profile );
myimgdiv = new THREE.CSS3DObject( element );
myimgdiv.position.x = 0;
myimgdiv.position.y = 0;
myimgdiv.position.z = 0;
scene2.add( myimgdiv );
renderer2 = new THREE.CSS3DRenderer();
renderer2.setSize( window.innerWidth, window.innerHeight );
renderer2.domElement.style.position = 'absolute';
renderer2.domElement.style.top = 0;
...
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
TWEEN.update();
camera.lookAt( scene.position );
renderer.render( scene, camera );
renderer2.render( scene2, camera );
}
有人可以帮我计算“元素”的正确宽度和高度值，使其在上述设置中看起来全屏吗？
非常感谢您，
奥利弗