J'essaie de superposer du texte HTML sur mon croquis three.js, mais changer l'index z ne change rien. Je suis conscient que je pourrais utiliser innerHTML, mais je vais aussi avoir besoin d'utiliser l'attribut onclick et cela va me causer d'autres problèmes qui ne sont pas le sujet principal de cette question. Pour l'exemple fourni, j'utilise un moteur de rendu CSS3D et je veux que le contenu HTML soit affiché sur le côté, mais en changeant les valeurs de remplissage, le corps entier tombe juste plus bas que le texte.Superposition de texte HTML sur le moteur de rendu three.js
Est-ce que quelqu'un sait si une telle correction est possible?
EDIT:
// 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);
Après une enquête plus approfondie, j'ai décidé d'ajouter un autre moteur de rendu pour que CSS3D et WEBGL seraient chargés à la fois sur la même page, mais lors d'un changement ces deux positions par rapport, ils finissent Je suis empilé l'un en dessous de l'autre et j'ai donc deux toiles, idéalement elles devraient être empilées les unes sur les autres et ensuite avoir du texte HTML sur le côté.
<!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>
Votre scène three.js ressemble à un positionnement absolu. Cela le met devant tout. –
Merci, a changé la scène relative et le texte à l'absolu. Super travail, un peu embarrassant que j'ai oublié quelque chose d'aussi simple que ça. – Sasquatchas
Cependant, cela ne semble pas s'arrêter là, car lorsque j'essaie d'ajouter un autre rendu à la scène, cela ne fait que brouiller les choses. – Sasquatchas