After extensively experimenting with the three.js library, I was able to establish two distinct scenes – one canvas-rendered and the other css3d-rendered – both displayed using the same perspective camera.
Note: Despite my efforts, I am constrained to using IE 10 for this project.
While the objects in the canvas-rendered scene undergo significant rotation and movement, the css3d-scene comprises a single DIV element containing a sub-DIV that encapsulates an image. The objective is for the css3d-rendered DIV to appear (almost) full-screen, irrespective of window size. However, attempting to enlarge it by manipulating the z-axis coordinates proved ineffective; thus, scaling seemed the more viable option. Nevertheless, achieving optimal results under varying window sizes requires different scaling factors, presenting a challenge.
I discovered an alternative method involving adjusting the height and width of the original div to dictate the rendered object's size. Given the ease of manipulating the enclosed image similar to the div, this approach appears preferable over scaling.
However, my proficiency falls short when calculating the precise pixel dimensions necessary for the DIV to render full-screen within the scene.
This is what I have managed so far...
<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, establish and configure DIV, integrate the DIV into the 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 );
}
If anyone could assist me in determining the accurate width and height values for the "element" to achieve fullscreen appearance in the specified configuration, your expertise would be greatly appreciated.
Thank you in anticipation,
Oliver