three.js ライブラリを使った私の実験では、同じ遠近法カメラで表示される 2 つの異なるシーン (1 つはキャンバス レンダリング、もう 1 つは 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 );
}
上記の設定で全画面表示にするために、「要素」の正しい幅と高さの値を計算するのを手伝ってもらえますか?
事前にどうもありがとうございました、
オリバー