I have been attempting to overlay HTML text onto my three.js sketch, but adjusting the z-index does not seem to be working. While I know that I could utilize innerHTML, the issue arises when I need to also use the onclick attribute, which is not the main focus of my question here.
In the provided example, I am using a CSS3D renderer and my goal is to display the HTML content to the side. However, when adjusting padding values, the entire body shifts down instead of just moving the text.
Is there a fix for this?
UPDATE:
// WebGL renderer2
renderer2= new THREE.WebGLRenderer({ antialias: true });
renderer2.setClearColor(0xffffff, 1.0)
renderer2.setSize(window.innerWidth, window.innerHeight);
//renderer2.domElement.style.position = 'relative';
renderer2.domElement.style.zIndex = '-1';
document.body.appendChild(renderer2.domElement);
After some investigation, I decided to add another renderer that would load CSS3D and WEBGL simultaneously on the same page. However, when I set both positions to relative, they end up stacked one below the other. Ideally, I would like them to stack on top of each other with the HTML text displayed to the side.
<!DOCTYPE html>
<html>
<head>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
background-color: white;
}
.text{
z-index: 99;
padding-top: 5%;
}
.large {
font-size: xx-large;
}
</style>
</head>
<body>
<div class="text">
<p>Lorem Ipsum</p>
</div>
<script>
var string = '<div>' +
'<h1>A test CSS3D example.</h1>' +
'<span class="large">this is an input example</span>' +
'<textarea> Try adding text here</textarea>' +
'</div>';
// global variables
var renderer;
var scene;
var camera;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.zIndex= '1';
camera.position.x = 500;
camera.position.y = 500;
camera.position.z = 500;
camera.lookAt(scene.position);
document.body.appendChild(renderer.domElement);
var cssElement = createCSS3DObject(string);
cssElement.position.set(100, 100, 100);
scene.add(cssElement);
render();
}
function createCSS3DObject(s) {
var wrapper = document.createElement('div');
wrapper.innerHTML = s;
var div = wrapper.firstChild;
div.style.width = '370px';
div.style.height = '300px';
div.style.transform = 'rotate(70deg)';
div.style.opacity = 0.7;
div.style.background = new THREE.Color(Math.random() * 0xffffff).getStyle();
var object = new THREE.CSS3DObject(div);
return object;
}
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
window.onload = init;
</script>
</body>
</html>